当初来看axios的外围,构造函数Axios,它自身就是一个构造函数,而后在其原型prototype上绑定了一些办法,拦截器就在this.interceptors上
function Axios(instanceConfig) { this.defaults = instanceConfig; this.interceptors = { request: new InterceptorManager(), // InterceptorManager也是一个构造函数 response: new InterceptorManager() };}原型prototype增加了request办法(用来发送申请),getUri办法(用来建设申请的门路),还有就是一些办法的别名,比方axios.get()这种写法,就是在prototype上增加了get办法,所以实例上能够拜访的到
源码剖析如下
'use strict';var utils = require('./../utils');var buildURL = require('../helpers/buildURL');var InterceptorManager = require('./InterceptorManager');var dispatchRequest = require('./dispatchRequest');var mergeConfig = require('./mergeConfig');/** * 构造函数Axios * * @param {Object} instanceConfig 默认配置 */function Axios(instanceConfig) { this.defaults = instanceConfig; this.interceptors = { request: new InterceptorManager(), // InterceptorManager也是一个构造函数 response: new InterceptorManager() };}/** * 散发一个申请 * * @param {Object} config 申请的配置 (跟默认配置合并) */Axios.prototype.request = function request(config) { // config就是axios({})中的{} /*eslint no-param-reassign:0*/ // Allow for axios('example/url'[, config]) a la fetch API if (typeof config === 'string') { config = arguments[1] || {}; config.url = arguments[0]; } else { config = config || {}; } config = mergeConfig(this.defaults, config); // Set config.method if (config.method) { config.method = config.method.toLowerCase(); } else if (this.defaults.method) { config.method = this.defaults.method.toLowerCase(); } else { config.method = 'get'; } // filter out skipped interceptors 过滤拦截器 var requestInterceptorChain = []; var synchronousRequestInterceptors = true; // forEach办法在InterceptorManager文件中, 其本质还是utils文件中的forEach办法, 参考axios源码(三) this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) { // interceptor就是this.handler的每个元素, 参见InterceptorManager文件 if (typeof interceptor.runWhen === 'function' && interceptor.runWhen(config) === false) { return; } synchronousRequestInterceptors = synchronousRequestInterceptors && interceptor.synchronous; requestInterceptorChain.unshift(interceptor.fulfilled, interceptor.rejected); }); var responseInterceptorChain = []; this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) { // 跟下面一样 responseInterceptorChain.push(interceptor.fulfilled, interceptor.rejected); }); var promise; if (!synchronousRequestInterceptors) { var chain = [dispatchRequest, undefined]; Array.prototype.unshift.apply(chain, requestInterceptorChain); // 增加到chain chain.concat(responseInterceptorChain); // 一个新的数组 promise = Promise.resolve(config); while (chain.length) { promise = promise.then(chain.shift(), chain.shift()); } return promise; } var newConfig = config; while (requestInterceptorChain.length) { var onFulfilled = requestInterceptorChain.shift(); var onRejected = requestInterceptorChain.shift(); try { newConfig = onFulfilled(newConfig); } catch (error) { onRejected(error); break; } } try { promise = dispatchRequest(newConfig); } catch (error) { return Promise.reject(error); } while (responseInterceptorChain.length) { promise = promise.then(responseInterceptorChain.shift(), responseInterceptorChain.shift()); } return promise;};Axios.prototype.getUri = function getUri(config) { config = mergeConfig(this.defaults, config); return buildURL(config.url, config.params, config.paramsSerializer).replace(/^\?/, '');};// Provide aliases for supported request methods 给申请的办法提供一个别名utils.forEach(['delete', 'get', 'head', 'options'], function forEachMethodNoData(method) { /*eslint func-names:0*/ Axios.prototype[method] = function(url, config) { return this.request(mergeConfig(config || {}, { method: method, url: url, data: (config || {}).data })); };});utils.forEach(['post', 'put', 'patch'], function forEachMethodWithData(method) { /*eslint func-names:0*/ Axios.prototype[method] = function(url, data, config) { return this.request(mergeConfig(config || {}, { method: method, url: url, data: data })); };});module.exports = Axios;