axios原始碼解析 - 請求方法的別名實現
阿新 • • 發佈:2022-05-22
axios中的建立請求方式很多,比如axios(url),axios.get(url),axios.post(url),axios.delete(url),方便快捷的api設計讓axios火得一塌糊塗。
先列一下所有請求方法,程式碼如下:
1. axios(config) || axios(url[, config]) 2. axios.request(config)(實際上axios.request(url)和axios.request(url[, config])也是可以執行的,其d.ts可能寫得有點問題,會給錯誤提示,因此暫時不考慮) 3. axios.get(url[, config])4. axios.head(url[, config]) 5. axios.options(url[, config]) 6. axios.post(url[, data[, config]]) 7. axios.put(url[, data[, config]]) 8. axios.patch(url[, data[, config]]) 9. axios.postForm(url[, data[, config]]) 10. axios.putForm(url[, data[, config]]) 11. axios.patchForm(url[, data[, config]]) 其中9、10、11是新特性,文件中也沒有說明, 其實就是在headers中多加上'Content-Type': 'multipart/form-data'。
這個有個問題就是axios.post在config.data傳遞引數時,會被忽略掉,
而是直接拿第二個引數data,axios.post(url, null, {data: FormData})這樣寫也是有可能的,特別是對於記不清楚api的我來說,所以建議作者大大從data: data 改成 data: data || config.data。
emm,完美~
先下結論,無論使用任何請求方法,最終都是呼叫Axios.prototype.request這個方法。
Axios建構函式的核心程式碼如下:
/* axios/lib/core/Axios.js */ // Axios建構函式 function Axios(defaultConfig) { this.defaults = defaultConfig; this.interceptors = { request: new InterceptorManager(), response: new InterceptorManager() } } // Axios原型上的request方法 Axios.prototype.request = function(configOrUrl, config) { ... ... ... } // Axios原型上的['delete', 'get', 'head', 'options']四種方法 utils.forEach(['delete', 'get', 'head', 'options'], function(method) { Axios.prototype[method] = function(url, config) { return this.request(mergeConfig(config || {}, { method: method, url: url, data: (config || {}).data })); } }); // Axios原型上的['post', 'put', 'patch']三種方法 utils.forEach(['post', 'put', 'patch'], function(method) { Axios.prototype[method] = function(url, data, config) { function generateHTTPMethod(isForm) { return function httpMethod(url, data, config) { return this.request(mergeConfig(config || {}, { method: method, headers: isForm ? { 'Content-Type': 'multipart/form-data' } : {}, url: url, data: data })); }; } Axios.prototype[method] = generateHTTPMethod(); Axios.prototype[method + 'Form'] = generateHTTPMethod(true); } }); /* axios/lib/utils.js */ // forEach函式 function forEach(obj, fn) { if (obj === null || typeof obj === undefined) { return; } if (typeof obj !== 'object') { obj = [obj]; } if (Array.isArray(obj)) { for (var i = 0; i < obj.length; i++) { fn.call(null, obj[i], i, obj); } } else { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { fn.call(null, obj[key], key, obj); } } } }
作者大大用了forEach這個方法,巧妙的寫了Axios.prototype.get、Axios.prototype.post等原型方法,那麼axios()為什麼能觸發?axios為什麼會有get、post等屬性且axios.get()也能觸發呢?程式碼如下:
/* axios/lib/axios.js */ function createInstance(defaultConfig) { // 生成例項物件 var context = new Axios(defaultConfig); // 通過bind方法讓instance等同於Axios.prototype.request,且執行時的this指向當前的例項物件 var instance = bind(Axios.prototype.request, context); // 將Axios.prototype原型上的方法作為instance的屬性, 且方法中的this指向當前的例項物件 utils.extend(instance, Axios.prototype.request, context); // 將該例項物件的defaults、interceptors屬性作為instance的屬性 utils.extend(instance, context); instace.cteate = function (instanceConfig) { // 合併屬性,因此新的例項也擁有預設例項設定過的屬性 return createInstance(mergeConfig(defaultConfig, instanceConfig)); } return instance; } // import axios from 'axios'中axios便是這個變數 var axios = createInstance(defaultConfig); /* axios/lib/utils.js */ // 從上述程式碼中,發現bind和extends起到的作用非常關鍵 // bind函式 function bind(fn, thisArg) { return function wrap() { var args = new Array(arguments.length); for (var i = 0l i < arguments.length; i++) { args[i] = arguments[i]; } fn.apply(thisArg, args); } } // extends函式 function extend(a, b, thisArg) { forEach(b, function assignValue(val, key) { if (thisArg && typeof val === 'function') { a[key] = bind(val, thisArg); } else { a[key] = val; } }); return a; }
最後附上axios官方文件:https://axios-http.com/