一個axios實例上有兩個攔截器，一個是請求攔截器， 然後響應攔截器。我們下看下官網的用法：
添加攔截器
// 添加請求攔截器
axios.interceptors.request.use(function (config) {
// 在發送請求之前做些什麼
return config;
}, function (error) {
// 對請求錯誤做些什麼
return Promise.reject(error);
});
移除攔截器
const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);
其實源碼中就是，所有攔截器的執行 所以說肯定有一個forEach方法。
思路理清楚了，現在我們就開始去寫吧。代碼我就直接發出來，然後我在下面注解。
export class InterceptorManager {
constructor() {
// 存放所有攔截器的棧
this.handlers = []
}
use(fulfilled, rejected) {
this.handlers.push({
fulfilled,
rejected,
})
//返回id 便于取消
return this.handlers.length - 1
}
// 取消一個攔截器
eject(id) {
if (this.handlers[id]) {
this.handlers[id] = null
}
}
// 執行棧中所有的hanlder
forEach(fn) {
this.handlers.forEach((item) => {
// 這裡為了過濾已經被取消的攔截器，因為已經取消的攔截器被置null
if (item) {
fn(item)
}
})
}
}
攔截器這個類我們已經初步實現了，現在我們去實現axios 這個類，還是先看下官方文檔，先看用法，再去分析。
axios(config)
// 發送 POST 請求
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
// 發送 GET 請求（默認的方法）
axios('/user/12345');
Axios 這個類最核心的方法其實還是 request 這個方法。我們先看下實現吧
class Axios {
constructor(config) {
this.defaults = config
this.interceptors = {
request: new InterceptorManager(),
response: new InterceptorManager(),
}
}
// 發送一個請求
request(config) {
// 這裡呢其實就是去處理了 axios(url[,config])
if (typeof config == 'string') {
config = arguments[1] || {}
config.url = arguments[0]
} else {
config = config || {}
}
// 默認get請求，并且都轉成小寫
if (config.method) {
config.method = config.method.toLowerCase()
} else {
config.method = 'get'
}
// dispatchRequest 就是發送ajax請求
const chain = [dispatchRequest, undefined]
// 發生請求之前加入攔截的 fulfille 和reject 函數
this.interceptors.request.forEach((item) => {
chain.unshift(item.fulfilled, item.rejected)
})
// 在請求之後增加 fulfilled 和reject 函數
this.interceptors.response.forEach((item) => {
chain.push(item.fulfilled, item.rejected)
})
// 利用promise的鍊式調用，将參數一層一層傳下去
let promise = Promise.resolve(config)
//然後我去遍曆 chain
while (chain.length) {
// 這裡不斷出棧 直到結束為止
promise = promise.then(chain.shift(), chain.shift())
}
return promise
}
}
這裡其實就是體現了axios設計的巧妙， 維護一個棧結構 promise 的鍊式調用 實現了 攔截器的功能， 可能有的小夥伴到這裡還是不是很能理解，我還是給大家畫一個草圖去模拟下這個過程。
假設我有1個請求攔截器handler和1個響應攔截器handler
一開始我們棧中的數據就兩個
這個沒什麼問題，由于有攔截器的存在，如果存在的話，那麼我們就要往這個棧中加數據，請求攔截器顧名思義要在請求之前所以是unshift。加完請求攔截器我們的棧變成了這樣
沒什麼問題，然後請求結束後，我們又想對請求之後的數據做處理，所以響應攔截的數據自然是push了。這時候棧結構變成了這樣：
然後遍曆整個棧結構，每次出棧都是一對出棧， 因為promise 的then 就是 一個成功，一個失敗嘛。遍曆結束後，返回經過所有處理的promise，然後你就可以拿到最終的值了。
adapterAdapter: 英文解釋是适配器的意思。這裡我就不實現了，我帶大家看一下源碼。adapter 做了一件事非常簡單，就是根據不同的環境 使用不同的請求。如果用戶自定義了adapter，就用config.adapter。否則就是默認是default.adpter.
var adapter = config.adapter || defaults.adapter;
return adapter(config).then() ...
繼續往下看deafults.adapter做了什麼事情：
function getDefaultAdapter() {
var adapter;
if (typeof XMLHttpRequest !== 'undefined') {
// For browsers use XHR adapter
adapter = require('./adapters/xhr');
} else if (typeof process !== 'undefined' && Object.prototype.toString.call(process) === '[object process]') {
// For node use HTTP adapter
adapter = require('./adapters/http');
}
return adapter;
}
其實就是做個選擇：如果是浏覽器環境：就是用xhr 否則就是node 環境。判斷process是否存在。從寫代碼的角度來說，axios源碼的這裡的設計可擴展性非常好。有點像設計模式中的适配器模式， 因為浏覽器端和node 端 發送請求其實并不一樣， 但是我們不重要，我們不去管他的内部實現，用promise包一層做到對外統一。所以 我們用axios 自定義adapter 器的時候, 一定是返回一個promise。ok請求的方法我在下面模拟寫出。
cancleToken我首先問大家一個問題，取消請求原生浏覽器是怎麼做到的？有一個abort 方法。可以取消請求。那麼axios源碼肯定也是運用了這一點去取消請求。現在浏覽器其實也支持fetch請求， fetch可以取消請求？很多同學說是不可以的，其實不是？fetch 結合 abortController 可以實現取消fetch請求。我們看下例子：
const controller = new AbortController();
const { signal } = controller;
fetch("http://localhost:8000", { signal }).then(response => {
console.log(`Request 1 is complete!`);
}).catch(e => {
console.warn(`Fetch 1 error: ${e.message}`);
});
// Wait 2 seconds to abort both requests
setTimeout(() => controller.abort(), 2000);
但是這是個實驗性功能，可惡的ie。所以我們這次還是用原生的浏覽器xhr基于promise簡單的封裝一下。代碼如下：
export function dispatchRequest(config) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest()
xhr.open(config.method, config.url)
xhr.onreadystatechange = function () {
if (xhr.status >= 200 && xhr.status <= 300 && xhr.readyState === 4) {
resolve(xhr.responseText)
} else {
reject('失敗了')
}
}
if (config.cancelToken) {
// Handle cancellation
config.cancelToken.promise.then(function onCanceled(cancel) {
if (!xhr) {
return
}
xhr.abort()
reject(cancel)
// Clean up request
xhr = null
})
}
xhr.send()
})
}
Axios 源碼裡面做了很多處理， 這裡我隻做了get處理，我主要的目的就是為了axios是如何取消請求的。先看下官方用法:
主要是兩種用法：
使用 cancel token 取消請求
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 {
// 處理錯誤
}
});
axios.post('/user/12345', {
name: 'new name'
}, {
cancelToken: source.token
})
// 取消請求（message 參數是可選的）
source.cancel('Operation canceled by the user.');
還可以通過傳遞一個 executor 函數到 CancelToken 的構造函數來創建 cancel token：
const CancelToken = axios.CancelToken;
let cancel;
axios.get('/user/12345', {
cancelToken: new CancelToken(function executor(c) {
// executor 函數接收一個 cancel 函數作為參數
cancel = c;
})
});
// cancel the request
cancel();
看了官方用法 和結合axios源碼：我給出以下實現:
export class cancelToken {
constructor(exactor) {
if (typeof executor !== 'function') {
throw new TypeError('executor must be a function.')
}
// 這裡其實将promise的控制權 交給 cancel 函數
// 同時做了防止多次重複cancel 之前 Redux 還有React 源碼中也有類似的案列
const resolvePromise;
this.promise = new Promise(resolve => {
resolvePromise = resolve;
})
this.reason = undefined;
const cancel = (message) => {
if(this.reason) {
return;
}
this.reason = 'cancel' message;
resolvePromise(this.reason);
}
exactor(cancel)
}
throwIfRequested() {
if(this.reason) {
throw this.reason
}
}
// source 其實本質上是一個語法糖 裡面做了封裝
static source() {
const cancel;
const token = new cancelToken(function executor(c) {
cancel = c;
});
return {
token: token,
cancel: cancel
};
}
}
截止到這裡大體axios 大體功能已經給出。
接下來我就測試下我的手寫axios 有沒有什麼問題？
<script type="module" >
import Axios from './axios.js';
const config = { url:'http://101.132.113.6:3030/api/mock' }
const axios = new Axios();
axios.request(config).then(res => {
console.log(res,'0000')
}).catch(err => {
console.log(err)
})
</script>
打開浏覽器看一下結果：
成功了ok, 然後我來測試一下攔截器的功能：代碼更新成下面這樣：
import Axios from './axios.js';
const config = { url:'http://101.132.113.6:3030/api/mock' }
const axios = new Axios();
// 在axios 實例上挂載屬性
const err = () => {}
axios.interceptors.request.use((config)=> {
console.log('我是請求攔截器1')
config.id = 1;
return config
},err )
axios.interceptors.request.use((config)=> {
config.id = 2
console.log('我是請求攔截器2')
return config
},err)
axios.interceptors.response.use((data)=> {
console.log('我是響應攔截器1',data )
data = 1;
return data;
},err)
axios.interceptors.response.use((data)=> {
console.log('我是響應攔截器2',data )
return data
},err)
axios.request(config).then(res => {
// console.log(res,'0000')
// return res;
}).catch(err => {
console.log(err)
})
ajax 請求的結果 我是resolve(1) ，所以我們看下輸出路徑：
沒什麼問題， 響應後的數據我加了1。
接下來我來是取消請求的兩種方式
// 第一種方式
let cancelFun = undefined;
const cancelInstance = new cancelToken((c)=>{
cancelFun = c;
});
config.cancelToken = cancelInstance;
// 50 ms 就取消請求
setTimeout(()=>{
cancelFun('取消成功')
},50)
第二種方式：
const { token, cancel } = cancelToken.source();
config.cancelToken = token;
setTimeout(()=>{
cancel()
},50)
結果都是OK的,至此axios簡單源碼終于搞定了。
反思本篇文章隻是把axios源碼的大體流程走了一遍， axios源碼内部還是做了很多兼容比如：配置優先級：他有一個mergeConfig 方法， 還有數據轉換器。不過這些不影響我們對axios源碼的整體梳理， 源碼中其實有一個createInstance，至于為什麼有？我覺得就是為了可擴展性更好， 将來有啥新功能，直接在原有axios的實例的原型鍊上去增加，代碼可維護性強， axios.all spread 都是實例new出來再去挂的，不過都很簡單，沒啥的。有興趣大家自行閱讀。
,更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
