取消ajax請求
阿新 • • 發佈:2022-05-12
1. 原生xhr取消請求
3.1 使用 CancelToken.source 工廠方法建立 cancel token
1. 已發出的請求可能仍然會到達後端
2. 取消後續的回撥處理,避免多餘的回撥處理,以及特殊情況,先發出的後返回,導致回撥中的資料錯誤覆蓋
3. 取消loading效果,以及該請求的其他互動效果,特別是在單頁應用中,A頁面跳轉到B頁面之後,A頁面的請求應該取消,否則回撥中的一些處理可能影響B頁面
4. 超時處理,錯誤處理等都省去了,節約資源 參考:https://juejin.cn/post/6992745514731061285
var xhr = new XMLHttpRequest(); xhr.abort();2. jquery需求請求
var jq = $.ajax({ }) jp.abort();3. axios取消請求
3.1 使用 CancelToken.source 工廠方法建立 cancel token
const CancelToken = axios.CancelToken; const source = CancelToken.source(); axios.get('/user/123', { cancelToken: source.token }).3.2 傳遞一個 executor 函式到 CancelToken 的建構函式來建立 cancel tokencatch(function(thrown) { if (axios.isCancel(thrown)) { console.log('Request canceled', thrown.message); } else { // 處理錯誤 } }); axios.post('/user/123', { name: '小明' }, { cancelToken: source.token }) // 取消請求(message 引數是可選的) source.cancel('canceled by the user.');
const CancelToken = axios.CancelToken; let cancel; axios.get('/user/12345', { cancelToken: new CancelToken(function executor(c) { // executor 函式接收一個 cancel 函式作為引數 cancel = c; }) }); // cancel the request cancel();取消ajax請求的意義
1. 已發出的請求可能仍然會到達後端
2. 取消後續的回撥處理,避免多餘的回撥處理,以及特殊情況,先發出的後返回,導致回撥中的資料錯誤覆蓋
3. 取消loading效果,以及該請求的其他互動效果,特別是在單頁應用中,A頁面跳轉到B頁面之後,A頁面的請求應該取消,否則回撥中的一些處理可能影響B頁面
4. 超時處理,錯誤處理等都省去了,節約資源 參考:https://juejin.cn/post/6992745514731061285