專案:ant.design pro + umijs + dva
新建乙個abortdispath.js檔案
export
const
abortdispatch
=(payload, dispatch)
=>
const cancellation =
newpromise
((_, reject)
=>);
});return promise.
race
([cancellation,
dispatch
(payload)])
;比較中止和介面請求快慢,誰快返回誰
}return
dispatch
(payload);}
;
新建乙個擴充套件component
import react from
'react'
;/**
* 用於元件解除安裝時自動cancel所有註冊的promise
*/export
default
class
enhancecomponent
extends
react.component
componentwillunmount()
/** * 註冊control
*/bindsignalcontrol=(
)=>
= controller;
registersignal = signal;
this
.abortsignalcontrollers.
push
(controller);}
return registersignal;};
/** * 取消signal對應的promise的請求
* @param signal
*/abortsignalcontrol
(signal)
}else);
this
.abortsignalcontrollers =
;}}_findsignalcontrol
(signal)
}
demo.js
export
default
class
demo
extends
enhancecomponent;}
search=(
)=>
this
.setstate()
;abortdispatch
(payload, query =>
dispatch(,
callback:
(data, aborted)
=>}}
)}}
request.js檔案中需要將signal放在options中,例如
在errorhandler方法中對aborted介面進行特殊處理
const
errorhandler
= error =>
= error ||
;const
= response ||
;// 如果是終止請求,預設返回成功
if(name ===
'aborterror');
}...
...return;}
const request =
extend()
;request.interceptors.request.
use(
(url, options)
=>,}
;})
React中fetch 基本使用
react中fetch 基本使用 一 fetch fetch是一種xmlhttprequest的一種替代方案,在工作當中除了用ajax獲取後台資料外我們還可以使用fetch axios來替代ajax 二 fetch的基本使用 fetch url then res then data catch e ...
React 使用 fetch 請求天氣
中國天氣網 提供了查詢天氣的 api,通過傳入城市 id,可以獲得當前城市的天氣資訊,api 相關資訊如下 規格 描述 主機位址 訪問方法 get路徑 data cityinfo html 返回結果 json 格式,包含 city temp1 temp2 weather等資訊 返回結果格式如下 在請...
React中Fetch之cors跨域請求的使用
本篇文章主要介紹了react中fetch之cors跨域請求的實現方法,寫的十分的全面細緻,具有一定的參考價值,對此有需要的朋友可以參考學習下。如有不足之處,歡迎批評指正。專案中使用了react,當中需要使用fetch來代替ajax。後端部分我使用了phalcon。由於前後端分離,為了方便,我嘗試在n...