axios升級篇(碼住！)

這是我參與8月更文挑戰的第4天，活動詳情查看：8月更文挑戰

1、攔截器

axios有兩種攔截：請求攔截和響應攔截。兩種攔截都有成功和失敗兩種狀態。

特別注意，攔截後必定要將請求/響應返回，否則服務器/瀏覽器是收不到請求的。

// 添加請求攔截器
axios.interceptors.request.use(function (config) {
    // 在發送請求以前作些什麼
    return config;
    }, function (error) {
    // 對請求錯誤作些什麼
    return Promise.reject(error);
});

    // 添加響應攔截器
axios.interceptors.response.use(function (response) {
    // 對響應數據作點什麼
    return response;
    }, function (error) {
    // 對響應錯誤作點什麼
    return Promise.reject(error);
});
複製代碼

除了axios,咱們也能夠給新建立的instance添加攔截器。

請求攔截器在發送請求以前執行，響應攔截器在收到請求以前以前執行。也就是在發送請求以前請求攔截器會將config作一些操做再發給服務器，服務器返回response後響應攔截器能夠將response處理後再把數據返回。

知道了攔截的方式，那咱們何時須要去攔截請求呢？

1. config中的信息不符合服務器要求
2. 發送網絡請求時，須要在界面顯示加載的圖標
3. 某些網絡請求（好比登陸token），需攜帶一些特殊信息

2、取消請求

基本流程

1. 配置cancelToken對象
2. 緩存用於取消請求的cancel函數
3. 在後面特定時機調用cancel函數取消對象
4. 在錯誤回調中判斷若是error是cancel,作相應處理

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor 函數接收一個 cancel 函數做爲參數
    cancel = c;
  })
});

cancel();

複製代碼

const CancelToken = axios.CancelToken; 
const source = CancelToken.source();

axios.get('/user/12345', {
	cancelToken: source.token
}).catch(function(thrown) {
	if (axios.isCancel(thrown)) {
		console.log('Request canceled', thrown.message);
	} else {
		// 處理錯誤
	}
});
// 取消請求（message 參數是可選的）
source.cancel('Operation canceled by the user.');
複製代碼

3、源碼分析

Axios與axios的區別？

1. 語法上來講，axios不是Axios的實例
2. 功能上來講，axios是Axios的實例，由於它具備Axios實例上的方法
3. axios是Axios.prototype.request函數bind()返回的函數
4. axios做爲對象有Axios原型對象上的全部方法，有Axios對象上全部屬性：defaults/interceptors

axios與instance的區別？

相同：本質上都是由createInstance()函數建立而成

1. 都是一個能發任意請求的函數：request(config)
2. 都有發特定請求的方法：get()/post()/put()/delete()
3. 都有默認配置和攔截器屬性：defaults/interceptors

不一樣：

1. 默認匹配的值極可能不同
2. instance沒有axios後面添加的一些方法：create()/all()/CancleToken()等等

axios/lib/core/Axios.js

axios/lib/axios.js

攔截器的執行順序

首先，咱們要明白，對於請求攔截器來講，後定義的攔截器先執行；而對於響應攔截器，先定義的攔截器先執行。

源碼核心實現：axios/lib/core/Axios.js

舉個栗子：

按順序定義了四個攔截器：
請求攔截1（fullfilled1，rejected1）
請求攔截2（fullfilled2，rejected2）
響應攔截1（fullfilled111，rejected111）
響應攔截2（fullfilled222，rejected222）

requestInterceptorChain=[fullfilled2,rejected2,fullfilled1,rejected1]

responseInterceptorChain=[fullfilled111,rejected111,fullfilled222,rejected222]

chain=[fullfilled2,rejected2,fullfilled1,rejected1,dispatchRequest,undefined,fullfilled111，rejected111,fullfilled222,rejected222]

//promise = promise.then(chain.shift(), chain.shift())每次取出前兩個,
promise執行順序：
(fullfilled2,rejected2)-->(fullfilled1,rejected1)-->(dispatchRequest,undefined)-->(fullfilled111，rejected111)-->(fullfilled222,rejected222)

//最後返回promise,執行的就是請求的回調函數
複製代碼

總的來講，就是請求攔截器-->發送請求-->響應攔截器-->處理數據。

想了解上一篇axios內容，這裏指路：axios入門篇