詳解axios是如何處理異常的
axios 中的正常請求
axios 中當(dāng)請求服務(wù)正常返回時,會落入 .then() 方法中。
axios.get('https://httpstat.us/200')
.then(res => {
console.log(res)
})
效果如下:

axios 會把響應(yīng)結(jié)果包裝在返回的 Response 對象的 data 屬性中,除此之外:
- config:即請求配置
- headers:響應(yīng)頭數(shù)據(jù)(AxiosHeaders 對象)
- request:請求實例。瀏覽器環(huán)境就是 XMLHttpRequest 對象
- status:HTTP 狀態(tài)碼。本案例是 200,表示請求成功處理了
- statusText: 狀態(tài)碼的文字說明
axios 中的異常請求
axios 中的異常請求分 2 類:有響應(yīng)異常請求和無響應(yīng)的異常請求。
有響應(yīng)的異常
當(dāng)返回的 HTTP 狀態(tài)碼是 2xx 之外的是狗,就會進(jìn)入 axios 的 .catch() 方法中。
403 響應(yīng):
axios.get('https://httpstat.us/403')
.catch(err => {
console.log(err)
})
效果:

500 響應(yīng):
axios.get('https://httpstat.us/500')
.catch(err => {
console.log(err)
})
效果:

以上 2 個場景,返回的都是一個 AxiosError 對象,它繼承自 Error。相比 Error,AxiosError 除了常規(guī)的 code、message、name 和 stack 屬性(非標(biāo)準(zhǔn))外,還包含 config、request 和 reponse:
- response 就是響應(yīng)對象,與正常請求時返回的響應(yīng)對象完全一致
- config 和 request 與 Response 對象里的一樣——前者是請求配置,后者則是底層的請求對象
自定義 validateStatus()
當(dāng)然,對于有響應(yīng)的請求,2xx 狀態(tài)碼進(jìn)入 then,之外的狀態(tài)碼進(jìn)入 catch 是 axios 的默認(rèn)配置——通過 validateStatus() 設(shè)置的。
// `validateStatus` defines whether to resolve or reject the promise for a given
// HTTP response status code. If `validateStatus` returns `true` (or is set to `null`
// or `undefined`), the promise will be resolved; otherwise, the promise will be
// rejected.
validateStatus: function (status) {
return status >= 200 && status < 300; // default
},
在 axios 內(nèi)部,當(dāng)接收到響應(yīng)后,會將響應(yīng)碼傳入 validateStatus() 函數(shù)校驗。返回 true,就表示請求成功,否則表示請求失敗。
你可以自由調(diào)整這里的判斷,決定哪類響應(yīng)可以作為成功的請求處理。
比如,將返回狀態(tài)碼 4xx 的請求也看做是成功的。
axios.get('https://httpstat.us/404', {
validateStatus: function (status) {
return status < 500; // Resolve only if the status code is less than 500
}
})
.then(res => {
console.log(res)
})
效果:

我們設(shè)置可以將 validateStatus 設(shè)置為 null,將所有有響應(yīng)返回的請求都看作是成功的,這樣也能進(jìn)入 .then() 中處理了。
axios.get('https://httpstat.us/500', {
validateStatus: null
})
.then(res => {
console.log(res)
})
效果:

無響應(yīng)的異常
不過某些請求是沒有響應(yīng)返回的。比如:網(wǎng)絡(luò)中斷、跨域錯誤、超時、取消請求等。這類異常請求都沒有響應(yīng)返回,但都會落入到 .catch() 里。
網(wǎng)絡(luò)中斷
先以網(wǎng)絡(luò)中斷的情況舉例。
axios.get('https://httpstat.us/200?sleep=10000', {
})
.catch(err => {
console.log(err)
})
我們模擬了一個耗時 10s 的請求,在此期間,我們將電腦的網(wǎng)絡(luò)斷掉。就能看到效果。

這個時候可以發(fā)現(xiàn),catch() 中接收到 Axios 對象是沒有 response 屬性的,說明沒有服務(wù)響應(yīng)。同時,錯誤信息是“Network Error”,也就是網(wǎng)絡(luò)服務(wù)。
當(dāng)然,無效地址以及跨域錯誤,也報錯 “Network Error”。
超時報錯
再演示一個請求超時的案例。
axios.get('https://httpstat.us/200?sleep=10000', {
timeout: 1000
})
.catch(err => {
console.log(err)
})
我們模擬了個 10s 返回的請求,而超時限制設(shè)置在了 1s。運行代碼,效果如下:

顯而易見,錯誤里依然沒有 response 屬性,錯誤的消息也很清晰的說明了問題:"過了 1s 的超時限制了"。
取消請求
axios 中還提供了取消請求的方案。
const controller = new AbortController();
axios.get('https://httpstat.us/200?sleep=10000', {
signal: controller.signal
})
.catch(err => {
console.log(err)
})
controller.abort();
效果如下:

catch() 捕獲到的是一個 CanceledError 對象,它繼承了 AxiosError,這樣我們就能單獨判斷這類自動取消的情況了。注意,這里依然是沒有 response 屬性的。
當(dāng)然,axios 中還有一個舊的取消方案——使用 CancelToken。
axios.get('https://httpstat.us/200?sleep=10000', {
cancelToken: source.token
})
.catch(res => {
console.log(res)
})
source.cancel();

相比較于 AbortController 觸發(fā)的取消,少了 config 和 request 屬性。
以上,我們就列完了 aioxs 中各類異常請求的場景及表現(xiàn)。官方倉庫 README 的 Handling Errors 也對此做了歸納。
axios.get('/user/12345')
.catch(function (error) {
if (error.response) {
// 請求發(fā)出,并且得到服務(wù)器響應(yīng)
// 響應(yīng)碼在 2xx 之外(默認(rèn))
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) {
// 請求發(fā)出,但沒有響應(yīng)返回
// `error.request` 對應(yīng)底層請求對象。瀏覽器環(huán)境是 XMLHttpRequest 實例,Node.js 環(huán)境下則是 http.ClientRequest 實例
console.log(error.request);
} else {
// 在請求準(zhǔn)備/響應(yīng)處理階段出錯了
console.log('Error', error.message);
}
console.log(error.config);
});
接下來就來分析 axios 中是如何實現(xiàn)請求的異常處理的。
源碼分析
我們還是以 axios 的瀏覽器端實現(xiàn)(lib/adapters/xhr.js)為例。
AxiosError
通過前面的學(xué)習(xí),我們知道 axios 拋出的異常是基于 Error 基類封裝的 AxiosError,其源代碼位于 /lib/core/AxiosError.js。
function AxiosError(message, code, config, request, response) {
// 1)
Error.call(this);
// 2)
if (Error.captureStackTrace) {
Error.captureStackTrace(this, this.constructor);
} else {
this.stack = (new Error()).stack;
}
// 3)
this.message = message;
this.name = 'AxiosError';
// 4)
code && (this.code = code);
config && (this.config = config);
request && (this.request = request);
response && (this.response = response);
}
簡單做一些說明:
- Error.call(this) 的作用類似調(diào)用父級構(gòu)造函數(shù),AxiosError 實例原型也成 Error 實例了
- 收集報錯棧信息,優(yōu)先以 Error.captureStackTrace 方式收集,方便排查問題
- 設(shè)置常規(guī)屬性 message 和 name
- 擴(kuò)展出 code、code、code 和 response,這些都是可選的
當(dāng)然 AxiosError 還有其他代碼,因為本文不涉及,就不再贅述。
介紹完 AxiosError,就可以分析 axios 中是如何拋出 AxiosError 的了。
XMLHttpRequest 對象
在能夠拋出異常之前,我們需要先創(chuàng)建請求對象 request。
// https://github.com/axios/axios/blob/v1.6.8/lib/adapters/xhr.js#L76 let request = new XMLHttpRequest();
瀏覽器環(huán)境,request 就是 XMLHttpRequest 實例,接下來的異常處理都是基于 request 上的監(jiān)聽事件捕獲的。
無響應(yīng)異常的處理
接下來,我們先講無響應(yīng)異常的處理,因為它們的相對邏輯比較簡單。
網(wǎng)絡(luò)異常
這類異常包括:網(wǎng)絡(luò)中斷、跨域錯誤以及請求地址錯誤。通過監(jiān)聽 request 的 onerror 事件實現(xiàn):
// /v1.6.8/lib/adapters/xhr.js#L158-L166
// Handle low level network errors
request.onerror = function handleError() {
// Real errors are hidden from us by the browser
// onerror should only fire if it's a network error
reject(new AxiosError('Network Error', AxiosError.ERR_NETWORK, config, request));
// Clean up request
request = null;
};
直接返回了一個 reject 狀態(tài)的 Promise,表示請求失敗。并返回了 CODE 值為 ERR_NETWORK 的 AxiosError 對象。
超時處理
再來看看對超時的處理,監(jiān)聽了 ontimeout 事件。
// /v1.6.8/lib/adapters/xhr.js#L168-L183
// Handle timeout
request.ontimeout = function handleTimeout() {
let timeoutErrorMessage = config.timeout ? 'timeout of ' + config.timeout + 'ms exceeded' : 'timeout exceeded';
const transitional = config.transitional || transitionalDefaults;
if (config.timeoutErrorMessage) {
timeoutErrorMessage = config.timeoutErrorMessage;
}
reject(new AxiosError(
timeoutErrorMessage,
transitional.clarifyTimeoutError ? AxiosError.ETIMEDOUT : AxiosError.ECONNABORTED,
config,
request));
// Clean up request
request = null;
};
處理也很簡單,同樣是 reject Promise,同時拋出一個 CODE 值為 ECONNABORTED 的 AxiosError 對象。
transitional 配置對象是為了向后兼容才保留的,已不再推薦使用,所以你可以忽略這部分你的判斷邏輯。
另外,你還可以通過傳入 config.timeoutErrorMessage 配置,自定義超時報錯消息。
取消請求
取消請求依賴的是監(jiān)聽 onabort 事件。
// /v1.6.8/lib/adapters/xhr.js#L146-L156
// Handle browser request cancellation (as opposed to a manual cancellation)
request.onabort = function handleAbort() {
if (!request) {
return;
}
reject(new AxiosError('Request aborted', AxiosError.ECONNABORTED, config, request));
// Clean up request
request = null;
};
當(dāng)你調(diào)用 request 上的 abort() 方法時,就會觸發(fā)這個事件調(diào)用。
在 axios 內(nèi)部,不管你是通過 signal 還是通過 cancelToken(已棄用),內(nèi)部都是通過調(diào)用 request.abort() 來中止請求的。
取消請求的報錯 CODE 值跟超時一樣也是 ECONNABORTED,不過報錯消息是“Request aborted”。這樣你就能區(qū)分這次請求是瀏覽器取消的還是人工取消的了。
// /v1.6.8/lib/adapters/xhr.js#L231-L247
if (config.cancelToken || config.signal) {
// Handle cancellation
// eslint-disable-next-line func-names
onCanceled = cancel => {
if (!request) {
return;
}
reject(!cancel || cancel.type ? new CanceledError(null, config, request) : cancel);
request.abort();
request = null;
};
config.cancelToken && config.cancelToken.subscribe(onCanceled);
if (config.signal) {
config.signal.aborted ? onCanceled() : config.signal.addEventListener('abort', onCanceled);
}
}
再來看看,有響應(yīng)的異常處理邏輯。
有響應(yīng)異常的處理
axios 內(nèi)部通過監(jiān)聽 onloadend 事件來處理有響應(yīng)的異常請求。
// /v1.6.8/lib/adapters/xhr.js#L125 request.onloadend = onloadend
不管當(dāng)前請求是否成功,onloadend 回調(diào)總是會調(diào)用,這里其實是可以使用 onload 事件替代的。
request.onload = onloadend
之所以有這部分邏輯是為了向后兼容,因為 axios 中這部分的完整邏輯是這樣的。
if ('onloadend' in request) {
// Use onloadend if available
request.onloadend = onloadend;
} else {
// Listen for ready state to emulate onloadend
request.onreadystatechange = function handleLoad() {
// ...
// readystate handler is calling before onerror or ontimeout handlers,
// so we should call onloadend on the next 'tick'
setTimeout(onloadend);
}
}
OK,我們繼續(xù)看 onloadend 函數(shù)的內(nèi)容:
// /v1.6.8/lib/adapters/xhr.js#L92-L121
function onloadend() {
// 1)
if (!request) {
return;
}
// 2)
// Prepare the response
const responseHeaders = AxiosHeaders.from(
'getAllResponseHeaders' in request && request.getAllResponseHeaders()
);
const responseData = !responseType || responseType === 'text' || responseType === 'json' ?
request.responseText : request.response;
const response = {
data: responseData,
status: request.status,
statusText: request.statusText,
headers: responseHeaders,
config,
request
};
// 3)
settle(function _resolve(value) {
resolve(value);
done();
}, function _reject(err) {
reject(err);
done();
}, response);
// Clean up request
request = null;
}
- 這里做了 request 的非空判斷。因為 onloadend 在調(diào)用之前,可以已經(jīng)在其他的回調(diào)事件中處理了,直接返回即可
- 這里則是準(zhǔn)備返回的響應(yīng)數(shù)據(jù)。先收集響應(yīng)頭數(shù)據(jù),再獲得響應(yīng)數(shù)據(jù),最后拼成 Respoonse 對象返回。注意,當(dāng) responseType 是 "json" 時,響應(yīng)數(shù)據(jù)返回的是 request.responseText,是個字符串,這會在下一步處理。
- 這里我們將拼接的 response 交由 settle 函數(shù)處理,并由它決定最終是成功請求(
resolve(err))還是失敗請求(reject(err))
settle 函數(shù)位于 lib/core/settle.js:
/**
* Resolve or reject a Promise based on response status.
*
* @param {Function} resolve A function that resolves the promise.
* @param {Function} reject A function that rejects the promise.
* @param {object} response The response.
*
* @returns {object} The response.
*/
export default function settle(resolve, reject, response) {
// 1)
const validateStatus = response.config.validateStatus;
// 2)
if (!response.status || !validateStatus || validateStatus(response.status)) {
resolve(response);
// 3)
} else {
reject(new AxiosError(
'Request failed with status code ' + response.status,
[AxiosError.ERR_BAD_REQUEST, AxiosError.ERR_BAD_RESPONSE][Math.floor(response.status / 100) - 4],
response.config,
response.request,
response
));
}
}
- 我們首先拿到了 validateStatus 配置。這是我們判斷請求成功與否的關(guān)鍵
- 這個 if 通過就把傳入的 response 直接丟出去,表示請求成功了。跟這個判斷邏輯,我們可以知道,當(dāng) validateStatus 為空(
null或undefined),所有響應(yīng)都會認(rèn)為是成功的被返回 - 否則,沒有通過校驗?zāi)蔷捅硎菊埱笫×?。報錯消息類似
'Request failed with status code xxx';4xx 狀態(tài)碼的返回 CODE 是 ERR_BAD_REQUEST,5xx 狀態(tài)碼的返回 CODE 是 ERR_BAD_RESPONSE;最后我們還把 response 作為 AxiosError 的 response 屬性傳入了進(jìn)來
至此,我們就講完了 axios 中的異常處理邏輯了。
總結(jié)
本文介紹了 axios 請求過程中可能會出現(xiàn)的各種異常場景。
axios 異常場景按照有無響應(yīng)分 2 類:有響應(yīng)異常和無響應(yīng)異常。有響應(yīng)異常就是指那些能成功接收到服務(wù)器響應(yīng)狀態(tài)碼的請求,包括常見的 2xx、4xx 和 5xx;無響應(yīng)異常則包括網(wǎng)絡(luò)中斷、無效地址、跨域錯誤、超時、取消等場景下的錯誤,這些都是接受不到服務(wù)器響應(yīng)的。
然后,我們從瀏覽器端實現(xiàn)出發(fā),介紹了 AxiosError、分析了拋出 AxiosError 異常的時機(jī)與方式。
以上就是詳解axios是如何處理異常的的詳細(xì)內(nèi)容,更多關(guān)于axios處理異常的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JS中Json數(shù)據(jù)的處理和解析JSON數(shù)據(jù)的方法詳解
JSON (JavaScript Object Notation)一種簡單的數(shù)據(jù)格式,比xml更輕巧,這篇文章主要介紹了JS中Json數(shù)據(jù)的處理和解析JSON數(shù)據(jù)的方法詳解的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-06-06
JavaScript實現(xiàn)的in_array函數(shù)
這篇文章主要介紹了JavaScript實現(xiàn)的in_array函數(shù),用于判斷一個值是否在數(shù)組中,類似PHP的in_array函數(shù),需要的朋友可以參考下2014-08-08
javascript中for/in循環(huán)及使用技巧
如果您希望一遍又一遍地運行相同的代碼,并且每次的值都不同,那么使用循環(huán)是很方便的,本篇文章給大家介紹javascript中for/in循環(huán)及使用技巧 ,需要的朋友可以參考下2015-09-09
探析瀏覽器執(zhí)行JavaScript腳本加載與代碼執(zhí)行順序
本文主要基于向HTML頁面引入JavaScript的幾種方式,分析HTML中JavaScript腳本的執(zhí)行順序問題,通過本文給大家分享瀏覽器執(zhí)行JavaScript腳本加載與代碼執(zhí)行順序,對瀏覽器執(zhí)行javascript及執(zhí)行順序相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-01-01
javaScript Array(數(shù)組)相關(guān)方法簡述
javaScript Array(數(shù)組)相關(guān)方法簡述,讓大家更快的熟悉array數(shù)組的用法。2009-07-07

