快捷導(dǎo)航

前端終止請(qǐng)求的3種方式總結(jié)(ajax、axios)

更新時(shí)間：2023年09月17日 14:51:05 作者：努力的小朱同學(xué)

這篇文章主要給大家總結(jié)介紹了關(guān)于前端終止請(qǐng)求的3種方式,其中包括ajax、axios的相關(guān)資料, 取消請(qǐng)求在前端有時(shí)候會(huì)用到,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

一、原生ajax終止請(qǐng)求

1、abort()

? XMLHttpRequest.abort() 方法用于終止 XMLHttpRequest 對(duì)象的請(qǐng)求，該方法沒有參數(shù)，也沒有返回值。當(dāng)調(diào)用該方法時(shí)，如果對(duì)應(yīng) XMLHttpRequest 對(duì)象的請(qǐng)求已經(jīng)被發(fā)送并且正在處理中，則會(huì)中止該請(qǐng)求；如果請(qǐng)求已經(jīng)完成（即已經(jīng)接收到完整的響應(yīng)），則不會(huì)執(zhí)行任何操作。而且調(diào)用該方法后，還會(huì)觸發(fā) XMLHttpRequest 對(duì)象的abort事件，我們可以在該事件的處理函數(shù)中執(zhí)行后續(xù)相關(guān)邏輯代碼，例如清除請(qǐng)求相關(guān)數(shù)據(jù)等等。

? 當(dāng)一個(gè)請(qǐng)求被終止后，該請(qǐng)求的readyState將會(huì)變?yōu)?code>0，并且status屬性也會(huì)變?yōu)?code>0。

案例代碼：

// 創(chuàng)建XMLHttpRequest對(duì)象
const xhr = new XMLHttpRequest();
// 請(qǐng)求地址
const url = "https://developer.mozilla.org/";
// 初始化請(qǐng)求
xhr.open('GET', url, true);
// 發(fā)送請(qǐng)求
xhr.send();
// 監(jiān)聽取消請(qǐng)求
xhr.addEventListener('abort', function () {
	console.log('請(qǐng)求被abort()取消了');
});
// 定時(shí)器模擬取消請(qǐng)求
setTimeout(() => {
	// 取消請(qǐng)求
	xhr.abort();
	// 取消請(qǐng)求之后的狀態(tài)status
	console.log('abort()之后的xhr.status---', xhr.status);
	// 取消請(qǐng)求之后的狀態(tài)readyState
	console.log('abort()之后的xhr.readyState---', xhr.readyState);
}, 100);

執(zhí)行結(jié)果：

在這里插入圖片描述

二、axios終止請(qǐng)求

1、AbortController（新版本）

? 在axiso的0.22.0版本開始，需要使用瀏覽器原生的AbortController來終止請(qǐng)求，是目前推薦用的方法。當(dāng)使用該方法終止請(qǐng)求時(shí)，如果對(duì)應(yīng)請(qǐng)求已經(jīng)被發(fā)送并且正在處理中，則會(huì)中止該請(qǐng)求；如果請(qǐng)求已經(jīng)完成（即已經(jīng)接收到完整的響應(yīng)），則不會(huì)執(zhí)行任何操作。

? 我們想監(jiān)聽到終止請(qǐng)求的操作，并進(jìn)行后續(xù)處理，有兩種方法：① 使用AbortController提供的onabort事件，通過監(jiān)聽該事件，并綁定事件處理函數(shù)，在函數(shù)中進(jìn)行后續(xù)處理。② 使用try..catch，終止請(qǐng)求之后，會(huì)觸發(fā)catch，在catch中進(jìn)行后續(xù)處理。如果同時(shí)使用onabort事件和try..catch，則會(huì)先觸發(fā)onabort事件，再觸發(fā)try..catch。

案例代碼：

// 以vue項(xiàng)目中使用axios為例
// 創(chuàng)建請(qǐng)求控制器 
this.controller = new AbortController();
console.log("初始聲明的請(qǐng)求控制器------", this.controller);
// 第一種方法：綁定事件處理程序
this.controller.signal.addEventListener("abort", () => {
   console.log("請(qǐng)求已終止，觸發(fā)了onabort事件");
   // 進(jìn)行后續(xù)處理
});
// 第二種方法：try...catch
try {
    // 發(fā)送文件上傳請(qǐng)求
    const res = await this.$axios.post(api.Upload, uploadData, {
     timeout: 0, // 設(shè)置超時(shí)時(shí)間為 0/null 表示永不超時(shí)
     signal: this.controller.signal, // 綁定取消請(qǐng)求的信號(hào)量
	});
} catch (error) {
    console.log("終止請(qǐng)求時(shí)catch的error---", error);
    // 判斷是否為取消上傳
    if (error.message == "canceled"){
        // 進(jìn)行后續(xù)處理
    };
}
// 終止請(qǐng)求
this.controller.abort();
console.log("終止請(qǐng)求后的請(qǐng)求控制器------", this.controller);

執(zhí)行結(jié)果：

? 注意：每個(gè)AbortController可以同時(shí)取消多個(gè)請(qǐng)求，但是只能取消請(qǐng)求一次，一個(gè)AbortController在終止過請(qǐng)求之后，其控制是否終止請(qǐng)求的signal.aborted屬性會(huì)從false，變?yōu)?code>true，目前本人沒找到恢復(fù)為false的方法，暫且認(rèn)為是不可恢復(fù)的吧。如果后續(xù)請(qǐng)求還是綁定該請(qǐng)求控制器，則后續(xù)請(qǐng)求都會(huì)被提前終止，不會(huì)被發(fā)出。

? 如果我們想要在終止請(qǐng)求之后，不影響后續(xù)請(qǐng)求的正常發(fā)出，且后續(xù)請(qǐng)求也是可以被終止的，那么需要在每次發(fā)出請(qǐng)求之前，都通過構(gòu)造函數(shù)創(chuàng)建一個(gè)新的的 AbortController，每次請(qǐng)求綁定的都是新的AbortController，這樣才能做到多次請(qǐng)求之間不干擾。

2、CancelToken（舊版本）

? 在axiso的0.22.0之前的版本，需要使用取消令牌cancel token來終止請(qǐng)求，不過該API從0.22.0開始被棄用，目前已不建議再使用。當(dāng)使用該方法終止請(qǐng)求時(shí)，如果對(duì)應(yīng)請(qǐng)求已經(jīng)被發(fā)送并且正在處理中，則會(huì)中止該請(qǐng)求；如果請(qǐng)求已經(jīng)完成（即已經(jīng)接收到完整的響應(yīng)），則不會(huì)執(zhí)行任何操作。

? 該方法只能通過try..catch來監(jiān)聽取消請(qǐng)求操作，終止請(qǐng)求之后，會(huì)觸發(fā)catch，在catch中進(jìn)行后續(xù)處理。而且該方法在取消請(qǐng)求時(shí)，可以通過參數(shù)自定義catch的error中的message內(nèi)容。

案例代碼：

// 以vue項(xiàng)目中使用axios為例
// 這個(gè)地方需要導(dǎo)入原生的axios 最好不要使用二次封裝后的axios
import axios from "axios";
// 創(chuàng)建請(qǐng)求令牌
this.source = axios.CancelToken.source();
console.log("初始聲明的請(qǐng)求令牌---", this.source);
// 第二種方法：try...catch
try {
    // 發(fā)送文件上傳請(qǐng)求
    const res = await this.$axios.post(api.Upload, uploadData, {
     timeout: 0, // 設(shè)置超時(shí)時(shí)間為 0/null 表示永不超時(shí)
     cancelToken: this.source.token, // 綁定取消請(qǐng)求的令牌
	});
} catch (error) {
    console.log("終止請(qǐng)求時(shí)catch的error---", error);
    // 判斷是否為取消上傳
    if (error.message == "自定義取消請(qǐng)求的message"){
        // 進(jìn)行后續(xù)處理
    };
}
// 終止請(qǐng)求
this.source.cancel("自定義取消請(qǐng)求的message");
console.log("取消請(qǐng)求后的請(qǐng)求令牌---", this.source);

執(zhí)行結(jié)果：

? 注意：該方法與AbortController相同，都可以同時(shí)取消多個(gè)請(qǐng)求，但是只能取消請(qǐng)求一次，一個(gè)CancelToken在終止過請(qǐng)求之后，如果后續(xù)請(qǐng)求還是綁定該請(qǐng)求令牌，則后續(xù)請(qǐng)求都會(huì)被提前終止，不會(huì)被發(fā)出。

? 同理，如果我們想要在終止請(qǐng)求之后，不影響后續(xù)請(qǐng)求的正常發(fā)出，且后續(xù)請(qǐng)求也是可以被終止的，那么需要在每次發(fā)出請(qǐng)求之前，都創(chuàng)建一個(gè)新的的 CancelToken，每次請(qǐng)求綁定的都是新的CancelToken，這樣才能做到多次請(qǐng)求之間不干擾。