在前端做大文件分片上傳，或者其它中斷請(qǐng)求時(shí)，需要暫?；蛑匦抡?qǐng)求，比如這里大文件上傳時(shí)，可能會(huì)需要暫停、繼續(xù)上傳，如下GIF演示：
這里不詳細(xì)說文件上傳的處理和切片細(xì)節(jié)，后續(xù)有時(shí)間在出一篇，大文件上傳，切片上傳、斷點(diǎn)續(xù)傳、秒傳等??。
不扯遠(yuǎn)了，緊接本篇主題??。
如何使用axios取消請(qǐng)求
axios中已經(jīng)實(shí)現(xiàn)了取消請(qǐng)求的操作，一共
-
第一種 從 v0.22.0 開始，Axios 支持以 fetch API 方式——
AbortController取消請(qǐng)求,示例如下
import axios from 'axios';
const controller = new AbortController();
let fetchSignal = controller.signal
axios.post('http://www.***.cn/', {
signal: fetchSignal
}).then((response)=> {
//...
});
// 取消請(qǐng)求，不支持message參數(shù)
controller.abort()
-
第二種使用
CancelToken.source工廠方法創(chuàng)建一個(gè) cancel token ，如下所示：
import axios from 'axios';
let axiosSource = axios.CancelToken.source();
axios({
method: 'post',
url: 'http://www.***.cn/',
data: formdata,// 提交的文件數(shù)據(jù)或其它參數(shù)
cancelToken: axiosSource.token,
headers: { 'Content-Type': 'multipart/form-data' },
}).then((response)=> {
//...
});
// 取消請(qǐng)求,支持message參數(shù)
axiosSource.cancel('取消請(qǐng)求');
- 第三種 通過傳遞一個(gè)
executor函數(shù)到CancelToken的構(gòu)造函數(shù)來創(chuàng)建一個(gè)cancel token，這里就不介紹了，可以查看官網(wǎng)示例??。
本文采用第二種方式實(shí)現(xiàn)。
如何重新發(fā)送請(qǐng)求
在重新發(fā)送請(qǐng)求前，需要重新生成CancelToken.source,不然再也無法從該URL獲得成功的響應(yīng),因?yàn)橥粋€(gè)CancelToken.source都會(huì)被取消請(qǐng)求，如下圖打印結(jié)果：
所以在重新請(qǐng)求前，需要重新生成一個(gè)CancelToken.source，代碼如下：文章來源：http://www.zghlxwxcb.cn/news/detail-655095.html
// 重新發(fā)送請(qǐng)求
axiosSource = axios.CancelToken.source();
axios({
//....代碼同上
})
最后在放上axios官網(wǎng)的說明及實(shí)例鏈接 點(diǎn)我直達(dá)
如果本文對(duì)您有幫助，還請(qǐng)點(diǎn)個(gè)小贊??。
本文完~文章來源地址http://www.zghlxwxcb.cn/news/detail-655095.html
到了這里，關(guān)于axios使用axiosSource.cancel取消請(qǐng)求后怎么恢復(fù)請(qǐng)求，axios取消請(qǐng)求和恢復(fù)請(qǐng)求實(shí)現(xiàn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
