Axios使用及源碼解析
簡介
axios 是一個用於瀏覽器和Node.js上的基於 Promise 的http網絡庫。
大綱
使用方式
安裝：
npm install axios
使用：
//引入axios
const axios = require('axios');
import axios from 'axios';
axios的四種使用方式
1. axios(config)
直接將相關配置包括請求url作為參數傳入到axios方法中
axios({
url: 'https://jsonplaceholder.typicode.com/todos/1',
method: 'get'
}).then(response => {
console.log(response.data)
}).catch(error => {
console.log(error)
});
2. axios(url[, config])
還是使用axios方法，但是第一個參數傳入請求url，第二個參數傳入其他配置參數。
axios('https://jsonplaceholder.typicode.com/todos/1', {
method: 'get'
}).then(response => {
console.log(response.data)
}).catch(error => {
console.log(error)
});
3. axios[method](url[, config])
使用axios暴露出來的get,post,delete,put等請求方法，參數設置同第2種 axios(url[, config])
axios.get('https://jsonplaceholder.typicode.com/todos/1', {
timeout: 1000
}).then(response => {
console.log(response.data)
}).catch(error => {
console.log(error);
});
4. axios.request(config)
使用axios暴露出來的request方法，參數設置同第1種axios(config)
axios.request({
url: 'https://jsonplaceholder.typicode.com/todos/1',
timeout: 1000
}).then(response => {
console.log(response.data)
}).catch(error => {
console.log(error)
});
請求配置
在上一步的發起請求的方法中，我們都能看到config這個配置參數，通過設置這個參數的值，可以達到配置請求的目的。在axios中，config是溝通調用方和網絡庫的橋梁，
常用的配置項如下所示：
{
// `url` 是用於請求的服務器 URL，相對路徑/絕對路徑
url: '/api/users',
// `method` 是創建請求時使用的http方法，包括get, post, put, delete等
method: 'get', // default
// `baseURL` 將自動加在 `url` 前面，除非 `url` 是一個絕對 URL。
// 它可以通過設置一個 `baseURL` 便於為 axios 實例的方法傳遞相對 URL
baseURL: 'https://some-domain.com/api/',
// `transformRequest` 允許在向服務器發送前，修改請求數據
// 只能用在 'PUT', 'POST' 和 'PATCH' 這幾個請求方法
// 后面數組中的函數必須返回一個字符串，或 ArrayBuffer，或 Stream
transformRequest: [function (data, headers) {
// 對 data 進行任意轉換處理
return data;
}],
// `transformResponse` 在傳遞給 then/catch 前，允許修改響應數據
transformResponse: [function (data) {
// 對 data 進行任意轉換處理
return data;
}],
// `headers` 是即將被發送的自定義請求頭
headers: {'X-Requested-With': 'XMLHttpRequest'},
// `params` 是即將與請求一起發送的 URL 參數
// 必須是一個無格式對象(plain object)或 URLSearchParams 對象
params: {
name: 'John'
},
// `paramsSerializer` 是一個負責 `params` 序列化的函數
// (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
paramsSerializer: function(params) {
return Qs.stringify(params, {arrayFormat: 'brackets'})
},
// `data` 是作為請求主體被發送的數據
// 只適用於這些請求方法 'PUT', 'POST', 和 'PATCH'
// 在沒有設置 `transformRequest` 時，必須是以下類型之一：
// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
// - 瀏覽器專屬：FormData, File, Blob
// - Node 專屬： Stream
data: {
firstName: 'John'
},
// `timeout` 指定請求超時的毫秒數(0 表示無超時時間)
// 如果請求花費了超過 `timeout` 的時間，請求將被中斷
timeout: 1000,
// `adapter` 允許自定義處理請求，以使測試更輕松
// 返回一個 promise 並應用一個有效的響應 (查閱 [response docs](#response-api)).
adapter: function (config) {
/* ... */
},
// `auth` 表示應該使用 HTTP 基礎驗證，並提供憑據
// 這將設置一個 `Authorization` 頭，覆寫掉現有的任意使用 `headers` 設置的自定義 `Authorization`頭
auth: {
username: 'janedoe',
password: 's00pers3cret'
},
// `responseType` 表示服務器響應的數據類型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
responseType: 'json', // default
// `responseEncoding` 表示用於響應數據的解碼方式
responseEncoding: 'utf8', // default
// `validateStatus` 定義對於給定的HTTP 響應狀態碼是 resolve 或 reject promise 。如果 `validateStatus` 返回 `true` (或者設置為 `null` 或 `undefined`)，promise 將被 resolve; 否則，promise 將被 rejecte
validateStatus: function (status) {
return status >= 200 && status < 300; // default
},
// `cancelToken` 指定用於取消請求的 cancel token
cancelToken: new CancelToken(function (cancel) {
}),
...
}
攔截器
攔截器，類似於中間件的概念，是axios的核心功能之一，主要是分為兩種：請求攔截器和響應攔截器。有了攔截器，我們能在網絡請求之前，對網絡請求配置做處理。在返回數據之前，對返回數據做處理。
中間件，攔截器：
一般用於對一個目標方法的前置或后置切片操作，可以將一些額外的臟邏輯寫到其他的文件中管理，提高目標方法的簡潔性。
使用方式：
//請求攔截器
const requestInterceptor = axios.default.interceptors.request.use((config) => {
//在請求發送前，對請求配置(AxiosRequestConfig)做一些處理
return config;
}, (error) => {
return Promise.reject(error);
});
//移除之前添加的攔截器
axios.default.interceptors.request.eject(requestInterceptor);
//響應攔截器
axios.default.interceptors.response.use((response) => {
//對請求響應數據做一些處理
return response;
}, (error) => {
return Promise.reject(error);
});
取消請求
支持取消請求也是axios的一個核心功能，在配置中實現一個cancelToken的參數就能取消。
//取消請求
const cancelToken = axios.CancelToken;
const source = cancelToken.source();
axios.get('https://jsonplaceholder.typicode.com/todos/1', {
cancelToken: source.token
}).then(response => {
console.log(response.data);
}).catch(error => {
if(axios.isCancel(error)) {
console.log(error.message);
} else {
console.log(error)
}
});
source.cancel('canceled by user');
默認配置
請求配置可以在每個請求中單獨設置，也可以在defaults中為全局設置。
//默認baseUrl
axios.defaults.baseUrl = 'https://jsonplaceholder.typicode.com';
//默認超時時間
axios.defaults.timeout = 3000;
//默認Authorization頭
axios.defaults.headers.common['Authorization'] = 'AUTH_TOKEN';
數據轉換
請求數據轉換
axios.defaults.transformRequest.push((data, headers)=>{
//處理請求的data
return data;
});
返回數據轉換
axios.defaults.transformResponse.push((data, headers)=>{
//處理返回的data
return data;
});
源碼解析
源碼分析基於0.19.2版本
首先看下源碼的目錄結構：
可以看到依次可以分為以下幾個部分：
- adapters： 主要是網絡請求適配器部分的源碼，包括瀏覽器端的xhr和nodejs端的http。
- cancel: 主要是取消請求的cancel和cancelToken相關類。
- core: axios的核心功能，重點類有以下幾個: Axios, dispatchRequest和InterceptorManager。剩余的主要是一些輔助的方法。
├── /core/
│ │ ├── Axios.js # 定義Axios類
│ │ ├── dispatchRequest.js # 用來調用適配器方法發送http請求
│ │ ├── InterceptorManager.js # 攔截器構造函數
- helper : 幫助類
- axios: 定義axios庫的接口和默認實例
- defaults: 默認配置
- utils: 工具方法
請求分析
首先從axios的幾種請求方式來入手，我們從axios庫中導入的axios對象。找到源碼axios.js類，可以看到創建的默認axios對象。
//axios.js
function createInstance(defaultConfig) {
var context = new Axios(defaultConfig);//創建Axios實例
//將context綁定到Axios的request方法上
//也可以這樣實現:var instance = Axios.prototype.request.bind(context);
//instance指向了request方法，並且上下文是實例context
//所以我們能直接以axios(url, {config})的方式來發送請求。本質上還是調用的request方法
var instance = bind(Axios.prototype.request, context);
// Copy axios.prototype to instance
//把Axios.prototype上的方法拓展到instance上，同時上下文是context，也就是this指向context
//所以我們能以axios.get/post的方式發送請求
utils.extend(instance, Axios.prototype, context);
//將context上的屬性和方法拓展到instance上
//所以我們以axios.defaults,axios.interceptors能獲取到攔截器和默認屬性
// Copy context to instance
utils.extend(instance, context);
return instance;
}
// Create the default instance to be exported
var axios = createInstance(defaults);
module.exports = axios;
從以上源碼可以得知，axios中導出的axios對象是通過createInstance方法以及默認配置defaults來創建的。
createInstance方法沒有僅僅創建Axios實例，還做了一系列綁定和拓展的操作，使得獲得的Axios實例支持axios(url,{config})和axios.get/post這種請求方式。
Axios類及request方法分析
從前面的分析可知，不管是創建的默認實例還是用自定義配置創建的實例，以及axios請求的幾種寫法，都和Axios類以及request方法息息相關。
function Axios(instanceConfig) {
this.defaults = instanceConfig; //默認配置
this.interceptors = { //攔截器
request: new InterceptorManager(),
response: new InterceptorManager()
};
}
Axios.prototype.request = function request(config) {
if (typeof config === 'string') {//為了支持axios(url, {config})這種寫法
config = arguments[1] || {};
config.url = arguments[0];
} else {
config = config || {};
}
config = mergeConfig(this.defaults, config);//合並配置
//設置請求方法
if (config.method) {
config.method = config.method.toLowerCase();
} else if (this.defaults.method) {
config.method = this.defaults.method.toLowerCase();
} else {
config.method = 'get';
}
//通過以promise resolve, reject為一組值的鏈式數組，來支持攔截器中間件，並將配置參數傳給dispatchRequest方法
// config配置--> 請求攔截器 --> dispatchRequest--> 響應攔截器
var chain = [dispatchRequest, undefined];
var promise = Promise.resolve(config);
this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {
chain.unshift(interceptor.fulfilled, interceptor.rejected);//請求攔截器插入到數組前部
});
this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) {
chain.push(interceptor.fulfilled, interceptor.rejected); //響應攔截器插入到數組尾部
});
while (chain.length) {//遍歷生成最終的請求promise(包含配置信息，請求攔截器，dispatchRequest方法，響應攔截器)
promise = promise.then(chain.shift(), chain.shift());
}
return promise;
};
//為了支持axios.get(url, config)這種寫法
utils.forEach(['delete', 'get', 'head', 'options'], function forEachMethodNoData(method) {
/*eslint func-names:0*/
Axios.prototype[method] = function(url, config) {
return this.request(utils.merge(config || {}, {
method: method,
url: url
}));
};
});
//為了支持axios.post(url, data, config)這種寫法
utils.forEach(['post', 'put', 'patch'], function forEachMethodWithData(method) {
/*eslint func-names:0*/
Axios.prototype[method] = function(url, data, config) {
return this.request(utils.merge(config || {}, {
method: method,
url: url,
data: data
}));
};
});
通過以上源碼，Axios類有默認配置和攔截器兩個屬性值，同時類上有Axios的核心方法request。
- request方法只聲明了一個參數config，但是通過判斷config的類型是否是字符串，巧妙的支持了axios(url, config)這種寫法。
config = mergeConfig(this.defaults, config);合並了默認配置和請求上設置的配置。結合axios類中的create工廠方法的代碼可以知道，配置信息的優先級由高到低分別是請求方法上的> 創建axios實例的> axios默認的- axios支持promise是通過在request方法中按照Promise中的then方法中的參數結構，一個resolve和一個reject為一組將dispatchRequest，請求攔截器和響應攔截器塞進數組中的。
// axios內部Promise的簡要流程
Promise.resolve(config).then(function requestInterceptorFulfill(config) {
return config;
}, function requestInterceptorReject(error) {
return Promise.reject(error);
}).then(function dispatchrequest(config) {
return dispatchRequest(config);
}, undefined).then(function responseInterceptorFulfill(response) {
return response;
}, function responseInterceptorReject(error) {
return Promise.reject(error);
});
dispatchRequest分析
通過上面的源碼，我們知道了axios是如何支持攔截器的，以及config在內部的流動方向。其中,有個dispatchRequest方法，還沒有分析它做了什么。
從字面意思來看，dispatchRequest 就是發送請求的意思，查看源碼，可以發現這個方法主要做了這幾件事情：
- 1.支持取消請求
- 2.對請求數據做轉換
- 3.處理請求頭
- 4.使用網絡請求適配器adapter以及配置config發送請求
- 5.對返回數據做轉換
module.exports = function dispatchRequest(config) {
//如果設置了cancelToken則直接取消請求，后續會分析取消請求的相關源碼
throwIfCancellationRequested(config);
// 確保headers存在
config.headers = config.headers || {};
// 對請求的數據做轉換
config.data = transformData(
config.data,
config.headers,
config.transformRequest
);
// 合並headers
config.headers = utils.merge(
config.headers.common || {},
config.headers[config.method] || {},
config.headers
);
utils.forEach(
['delete', 'get', 'head', 'post', 'put', 'patch', 'common'],
function cleanHeaderConfig(method) {
delete config.headers[method];
}
);
// 獲取config上設置的網絡請求適配器（若沒有則使用默認的）
// axios中有兩個預定義的適配器：分別是nodejs中的http和瀏覽器中的XMLHttpRequest
var adapter = config.adapter || defaults.adapter;
//將配置config傳入adpater中，return這個promise
return adapter(config).then(function onAdapterResolution(response) {
//如果設置了cancelToken則直接取消請求
throwIfCancellationRequested(config);
// 對返回的數據做轉換
response.data = transformData(
response.data,
response.headers,
config.transformResponse
);
return response;
}, function onAdapterRejection(reason) {
if (!isCancel(reason)) {
throwIfCancellationRequested(config);
// 對返回的數據做轉換
if (reason && reason.response) {
reason.response.data = transformData(
reason.response.data,
reason.response.headers,
config.transformResponse
);
}
}
return Promise.reject(reason);
});
};
可以看到，就算是走到了dispatchRequest方法內部，也不是真正發送請求的地方。源碼告訴我們，請求是從adapter內部發送出去的。
adapter-xhr分析
在axios內部，默認定義了兩種請求適配器，分別是nodejs端的http和瀏覽器端的xhr。在這里主要分析xhr的源碼。
xhr: 即XMLHttpRequest,具體用法可以參考MDN文檔https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
//xhr的精簡源碼，刪除了一些非重點代碼
module.exports = function xhrAdapter(config) {
return new Promise(function dispatchXhrRequest(resolve, reject) {
//構造一個XMLHttpRequest對象
var request = new XMLHttpRequest();
//構造請求完整路徑(相對路徑->絕對路徑)
var fullPath = buildFullPath(config.baseURL, config.url);
//根據配置config中的數據，初始化請求
//open方法三個參數分別為：請求方法,url,是否異步
//https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/open
request.open(config.method.toUpperCase(), buildURL(fullPath, config.params, config.paramsSerializer), true);
//設置監聽請求的onreadystatechange回調事件
request.onreadystatechange = function handleLoad() {
//響應頭
var responseHeaders = 'getAllResponseHeaders' in request ? parseHeaders(request.getAllResponseHeaders()) : null;
//響應數據
var responseData = !config.responseType || config.responseType === 'text' ? request.responseText : request.response;
//構造axios中的響應對象
var response = {
data: responseData,
status: request.status,
statusText: request.statusText,
headers: responseHeaders,
config: config,
request: request
};
//根據響應的狀態，返回promise的reslove或reject
settle(resolve, reject, response);
request = null;
};
//設置監聽請求的onabort回調事件
request.onabort = function handleAbort() {
reject(createError('Request aborted', config, 'ECONNABORTED', request));
request = null;
};
//設置監聽請求的onerror回調事件
request.onerror = function handleError() {
reject(createError('Network Error', config, null, request));
request = null;
};
//設置監聽請求的ontimeout回調事件
request.ontimeout = function handleTimeout() {
var timeoutErrorMessage = 'timeout of ' + config.timeout + 'ms exceeded';
if (config.timeoutErrorMessage) {
timeoutErrorMessage = config.timeoutErrorMessage;
}
reject(createError(timeoutErrorMessage, config, 'ECONNABORTED',
request));
request = null;
};
//若設置了cancelToken,則取消請求
if (config.cancelToken) {
config.cancelToken.promise.then(function onCanceled(cancel) {
request.abort();//中斷請求
reject(cancel);//使用cancel信息返回promise的reject
request = null;
});
}
if (requestData === undefined) {
requestData = null;
}
request.send(requestData);//使用請求數據requestData,最終發送請求
});
};
可以看到，adapter中封裝了使用XMLHttpRequest的具體細節，包括，創建XHR對象，初始化請求，構造請求鏈接，設置請求參數，構造響應對象等等
取消請求分析
在前面，我們講到了兩種取消請求的用法，現在就分析下取消請求相關部分的源碼。
//CancelToken.js
function CancelToken(executor) {
var resolvePromise;
this.promise = new Promise(function promiseExecutor(resolve) {
resolvePromise = resolve;
});
var token = this;
executor(function cancel(message) {
if (token.reason) {//已經取消過了
return;
}
//構造Cancel類，用於標志是否是取消請求，同時設置取消請求的信息
token.reason = new Cancel(message);
resolvePromise(token.reason);
});
//xhr.js
if (config.cancelToken) {
// 處理取消請求的情況
config.cancelToken.promise.then(function onCanceled(cancel) {
if (!request) {
return;
}
request.abort();//中斷請求
reject(cancel);
request = null;
});
}
通過以上源碼，我們知道
- 1.CancelToken內部聲明了promise成員變量
this.promise = new Promise(function promiseExecutor(resolve) { resolvePromise = resolve; });。 - 2.構造CancelToken對象的時候，傳入的executor方法在其中執行，並傳入了一個cancel方法作為參數，在這個cancel方法中，判斷了這個請求是否已經取消過，構造了Cancel類，用於存儲取消信息，然后將cancel對象通過保存的promise的reslove方法傳出去。
- 3.在xhr代碼中，第二步resolve的cancel對象，通過then方法繼續傳遞，並在其中中斷了請求，並通過xhr的promise的reject方法傳到外部。也就是我們使用axios請求的catch中得到的。
- 4.在使用CancelToken的時候，會把第2步中的cancel方法保存下來，當需要取消請求的時候再像這樣調用。
cancel('Cancel by user!')。方法參數就是Cancel對象中的message。
梳理一下：
//xhr中的promise
new Promise((resolve, reject)=>{
let request = {
abort: ()=>{
}
};
//CancelToken中的promise
Promise.resolve(new Cancel('Cancel by User!')).then(cancel => {
request.abort();//中斷請求
reject(cancel);//將cancel對象reject出去
});
}).catch(error => {
if(axios.isCancel(error)) { //捕獲在xhr中reject出來的cancel對象並打印message
console.log(cancel.message);
}
});