React 實現fetch取消 中止請求

專案：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);}
;

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)
}

export

default
class
demo
extends
enhancecomponent;}
search=(
)=>
this
.setstate()
;abortdispatch
(payload, query =>
dispatch(,
callback:
(data, aborted)
=>}}
)}}

在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...