一、原生ajax終止請求

1、abort()

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

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

案例代碼：

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

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

二、axios終止請求

1、AbortController（新版本）

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

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

案例代碼：

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

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

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

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

2、CancelToken（舊版本）

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

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

案例代碼：

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

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

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

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

三、參考資料

Axios中文文檔

AbortController

XMLHttpRequest.abort()

總結(jié)

到此這篇關(guān)于前端終止請求的3種方式的文章就介紹到這了,更多相關(guān)前端終止請求方式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論