一文深度剖析Axios源码

本文概要

• 前言
• Axios整体代码结构分析
• Axios执行流程整体分析
• Axios执行文件分析

前言

axios 是目前最常用的 http 请求库，可以用于浏览器和 node.js , 在 github 上已有 43k star 左右之多。

Axios 的主要特性包括：

• 基于 Promise
• 支持浏览器和 node.js
• 可添加拦截器和转换请求和响应数据
• 请求可以取消
• 自动转换 JSON 数据
• 客户端支持防范 XSRF

本文 将 带大家一起阅读 axios 的源码, 按照执行流程解析当中的一些封装技巧，分析功能实现。

Axios整体代码结构分析

├── /dist/                     # 项目输出目录
├── /lib/                      # 项目源码目录
│ ├── /cancel/                 # 定义取消功能
│ ├── /core/                   # 一些核心功能
│ │ ├── Axios.js               # axios的核心主类
│ │ ├── dispatchRequest.js     # 用来调用http请求适配器方法发送请求
│ │ ├── InterceptorManager.js  # 拦截器构造函数
│ │ └── settle.js              # 根据http响应状态，改变Promise的状态
│ ├── /helpers/                # 一些辅助方法
│ ├── /adapters/               # 定义请求的适配器 xhr、http
│ │ ├── http.js                # 实现http适配器
│ │ └── xhr.js                 # 实现xhr适配器
│ ├── axios.js                 # 对外暴露接口
│ ├── defaults.js              # 默认配置
│ └── utils.js                 # 公用工具
├── package.json               # 项目信息
├── index.d.ts                 # 配置TypeScript的声明文件
└── index.js                   # 入口文件

Axios执行流程整体分析

Axios执行文件分析

• 入口 /lib/axios.js

function createInstance(defaultConfig) {
    var context = new Axios(defaultConfig);
    // 自定义bind方法，等同于var instance = Axios.prototype.request.bind(context)
    // 这句的作用是将request方法指向instance，上下文是context，可以使用instance(option)
    // 调用  var instance = bind(Axios.prototype.request, context);

    // 根据前面extend方法，使Axios.prototype的方法扩展到instance对象上，这样instance就有了get，post,put等方法
    // 并且制定上细纹是context, 这样axios中方法， this执行context
    // utils.extend(instance, Axios.prototype, context);
    // 将context自身属性和方法扩展到instance上， 因为extend内部使用的forEach方法对对象做for in 遍历时， 只遍历对象本身的属性， 而不会遍历原型链上的属性
    // 这样，instance 就有了  defaults、interceptors 属性。（这两个属性后面我们会介绍）
    // Copy context to instance
    utils.extend(instance, context);

    return instance;
}
// 接收默认配置项作为参数（后面会介绍配置项），创建一个Axios实例，最终会被作为对象导出
var axios = createInstance(defaults);

/lib/core/Axios.js是核心包，axios各种方式('delete', 'get', 'head', 'options','post', 'put', 'patch')都是通过request方法发出的。每个axios实例都有一个interceptors实例属性，interceptors对象上有两个属性request、response。InterceptorManager用来实现拦截器的，这个构造函数原型上有3个方法：use、eject、forEach。我们首先看下 InterceptorManager的实现:

• 拦截器包 /lib/core/InterceptorManager.js

function InterceptorManager() {
    this.handlers = []; // 存放拦截器方法，数组内每一项都是有两个属性的对象，两个属性分别对应成功和失败后执行的函数。
}

// 往拦截器里添加拦截方法,使用 unshift,会导致use 后添加的先执行，先添加的后执行，use就是我们在http.js中书写的拦截器
InterceptorManager.prototype.use = function use(fulfilled, rejected) {
    this.handlers.push({
        fulfilled: fulfilled,
        rejected: rejected
    });
    return this.handlers.length - 1;
};

// 用来注销指定的拦截器
InterceptorManager.prototype.eject = function eject(id) {
    if (this.handlers[id]) {
        this.handlers[id] = null;
    }
};

// 遍历this.handlers，并将this.handlers里的每一项作为参数传给fn执行
InterceptorManager.prototype.forEach = function forEach(fn) {
    utils.forEach(this.handlers, function forEachHandler(h) {
        if (h !== null) {
            fn(h);
        }
    });
};

• 核心包  /lib/core/Axios.js

Axios.js主要处理了两个部分，复用请求方法、实现拦截器。 当我们使用 Axios 的实例去发送请求，使用的方法get、post等都是复用了request方法，在request方法中通过 arguments 获取传入的参数，实现了传入参数的重载。 拦截器是axios的一大特色，它的实现原理其实不复杂，核心就是promise的链式调用。

function Axios(instanceConfig) {
    this.defaults = instanceConfig;
    this.interceptors = {
        request: new InterceptorManager(),
        response: new InterceptorManager()
    };
}
Axios.prototype.request = function request(config) {
    /*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);
    config.method = config.method ? config.method.toLowerCase() : 'get';

    // Hook up interceptors middleware
    // chain 是一个数组
    var chain = [dispatchRequest, undefined];
    var promise = Promise.resolve(config);
    // 使用 use 添加 fulfilled 与 rejected 添加到队列中
    // 添加 request 拦截函数的时候使用的是unshift， 这样会导致 use 后添加的先执行，先添加的后执行
    this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {
        chain.unshift(interceptor.fulfilled, interceptor.rejected);
    });
    // response使用的是push,添加拦截相应函数，这里是先添加先执行，后添加后执行。
    this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) {
        chain.push(interceptor.fulfilled, interceptor.rejected);
    });
    // chain  [fulfilled, rejected, ... dispatchRequest, undefined ....,fulfilled, rejected]
    // 这里补充一下 fulfilled, rejected 都是肯定是成对出现的， 具体原因可看 InterceptorManager.prototype.use
    // promise.then(undefined, undefined) 中当传递的不是function时，会发生值穿。也就是说 use 中可以传入非function，
    // 或者传入单个function
    while (chain.length) {
        promise = promise.then(chain.shift(), chain.shift());
    }

    return promise;
};


// 复用request 实现了 delete， get, head, options
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
        }));
    };
});
// 复用request 实现了 delete， get, head, options
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.prototype.request方法会调用dispatchRequest方法，而dispatchRequest方法会调用xhrAdapter方法，xhrAdapter方法返回的是还一个Promise对象，调用defaults的getDefaultAdapter方法，如果是浏览器端使用xhr，如果是服务端调用的是http。接下来我们一次解析dispatchRequest，xhrAdapter，xhr 文件。

• /lib/core/dispatchRequest.js

dispatchRequest做了三件事

• 拿到config对象，对config进行传给http请求适配器前的最后处理
• http请求适配器根据config配置，发起请求
• http请求适配器请求完成后，如果成功则根据header、data、和config.transformResponse

module.exports = function dispatchRequest(config) {
    throwIfCancellationRequested(config);

    // 如果包含baseUrl, 并且不是config.url绝对路径，组合baseUrl以及config.url
    if (config.baseURL && !isAbsoluteURL(config.url)) {
        // 组合baseURL与url形成完整的请求路径
        config.url = combineURLs(config.baseURL, config.url);
    }

    config.headers = config.headers || {};

    // 使用/lib/defaults.js中的transformRequest方法，对config.headers和config.data进行格式化
    // 比如将headers中的Accept，Content-Type统一处理成大写
    // 比如如果请求正文是一个Object会格式化为JSON字符串，并添加application/json;charset=utf-8的Content-Type
    // 等一系列操作
    config.data = transformData(
        config.data,
        config.headers,
        config.transformRequest
    );

    // 合并不同配置的headers，config.headers的配置优先级更高
    config.headers = utils.merge(
        config.headers.common || {},
        config.headers[config.method] || {},
        config.headers || {}
    );

    // 删除headers中的method属性
    utils.forEach(
        ['delete', 'get', 'head', 'post', 'put', 'patch', 'common'],
        function cleanHeaderConfig(method) {
            delete config.headers[method];
        }
    );

    // 如果config配置了adapter，使用config中配置adapter的替代默认的请求方法
    var adapter = config.adapter || defaults.adapter;

    // 使用adapter方法发起请求（adapter根据浏览器环境或者Node环境会有不同，http请求适配器会优先使用config上自定义的适配器，没有配置时才会使用默认的XHR或http适配器，不过大部分时候，axios提供的默认适配器是能够满足我们的
    return adapter(config).then(
        // 请求正确返回的回调
        function onAdapterResolution(response) {
            // 判断是否以及取消了请求，如果取消了请求抛出以取消
            throwIfCancellationRequested(config);

            // 使用/lib/defaults.js中的transformResponse方法，对服务器返回的数据进行格式化
            // 例如，使用JSON.parse对响应正文进行解析
            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方法内，首先得到xhrAdapter方法返回的Promise对象, 然后通过.then方法，对xhrAdapter返回的Promise对象的成功或失败结果再次加工， 成功的话，则将处理后的response返回， 失败的话，则返回一个状态为rejected的Promise对象. 用户调用axios()方法时，就可以直接调用Promise的.then或.catch进行业务处理了。

return adapter(config).then(function onAdapterResolution(response) {
    // ...
    return response;
}, function onAdapterRejection(reason) {
    // ...
    return Promise.reject(reason);
});
};

可以看到adapter 若config没有配置adapter使用的是defaults的adapter,我们首先看下defaults中的adapter函数，稍后会详细介绍defaults源码，

function getDefaultAdapter() {
    var adapter;
    // Only Node.JS has a process variable that is of [[Class]] process
    if (typeof process !== 'undefined' && Object.prototype.toString.call(process) === '[object process]') {
        // For node use HTTP adapter
        adapter = require('./adapters/http');
    } else if (typeof XMLHttpRequest !== 'undefined') {
        // For browsers use XHR adapter
        adapter = require('./adapters/xhr');
    }
    return adapter;
}

调用defaults的getDefaultAdapter方法，如果是浏览器端使用xhr，如果是服务端调用的是http。我们接下来看下xhr文件。

• /lib/adapters/xhr.js

xhr.js导出的xhrAdapter方法是axios在浏览器环境下使用的默认请求方法。我们可以在配置中使用adapter配置项对默认请求方法进行替换。

module.exports = function xhrAdapter(config) {

    return new Promise(function dispatchXhrRequest(resolve, reject) {
        var requestData = config.data;
        var requestHeaders = config.headers;

        // 判断是否是FormData对象, 如果是, 删除header的Content-Type字段，让浏览器自动设置Content-Type字段
        if (utils.isFormData(requestData)) {
            delete requestHeaders['Content-Type'];
        }

        // 创建xtr对象
        var request = new XMLHttpRequest();

        // 设置http请求头中的Authorization字段
        // 关于Authorization字段
        // 更多内容参考https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Authorization
        if (config.auth) {
            var username = config.auth.username || '';
            var password = config.auth.password || '';
            // 使用btoa方法base64编码username和password
            requestHeaders.Authorization = 'Basic ' + btoa(username + ':' + password);
        }

        // 初始化请求方法
        // open(method: 请求的http方法, url: 请求的url地址, 是否支持异步)
        request.open(
            config.method.toUpperCase(),
            buildURL(config.url, config.params, config.paramsSerializer),
            true
        );

        // 设置超时时间
        request.timeout = config.timeout;

        // 监听readyState状态的变化，当readyState状态为4的时候，表示ajax请求成功
        request.onreadystatechange = function handleLoad() {
            if (!request || request.readyState !== 4) {
                return;
            }

            // request.status响应的数字状态码，在完成请求前数字状态码等于0
            // 如果request.status出错返回的也是0，但是file协议除外，status等于0也是一个成功的请求
            // 更多内容请参考 https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/status
            if (request.status === 0 && !(request.responseURL && request.responseURL.indexOf('file:') === 0)) {
                return;
            }

            // getAllResponseHeaders方法会返回所有的响应头
            // 更多内容请参考 https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/getAllResponseHeaders
            var responseHeaders = 'getAllResponseHeaders' in request ? parseHeaders(request.getAllResponseHeaders()) : null;

            // 如果没有设置数据响应类型（默认为“json”）或者responseType设置为text时，获取request.responseText值否则是获取request.response
            // responseType是一个枚举类型，手动设置返回数据的类型 更多请参考 https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/responseType
            // responseText是全部后端的返回数据为纯文本的值 更多请参考 https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/responseText
            // response为正文，response的类型取决于responseType 更多请参考 https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/response
            var responseData = !config.responseType || config.responseType === 'text' ? request.responseText : request.response;

            var response = {
                data: responseData, // 响应正文
                status: request.status, // 响应状态
                statusText: request.statusText, // 响应状态的文本信息
                headers: responseHeaders, // 响应头
                config: config,
                request: request
            };

            // status >= 200 && status < 300 resolve
            // 否则reject
            settle(resolve, reject, response);

            request = null;
        };

        // ajax中断时触发
        request.onabort = function handleAbort() {
            if (!request) {
                return;
            }

            // 抛出Request aborted错误
            reject(createError('Request aborted', config, 'ECONNABORTED', request));

            request = null;
        };

        // ajax失败时触发
        request.onerror = function handleError() {
            // 抛出Network Error错误
            reject(createError('Network Error', config, null, request));

            request = null;
        };

        // ajax请求超时时调用
        request.ontimeout = function handleTimeout() {
            // 抛出 timeout错误
            reject(createError('timeout of ' + config.timeout + 'ms exceeded', config, 'ECONNABORTED',
                request));

            request = null;
        };

        // 判断当前是为标准浏览器环境，如果是，添加xsrf头
        // 什么是xsrf header？xsrf header是用来防御CSRF攻击
        // 原理是服务端生成一个XSRF-TOKEN，并保存到浏览器的cookie中，在每次请求中ajax都会将XSRF-TOKEN设置到request header中
        // 服务器会比较cookie中的XSRF-TOKEN与header中XSRF-TOKEN是否一致
        // 根据同源策略，非同源的网站无法读取修改本源的网站cookie，避免了伪造cookie
        if (utils.isStandardBrowserEnv()) {
            var cookies = require('./../helpers/cookies');

            // withCredentials设置跨域请求中是否应该使用cookie 更多请参考 https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/withCredentials
            // （设置了withCredentials为true或者是同源请求）并且设置xsrfCookieName
            var xsrfValue = (config.withCredentials || isURLSameOrigin(config.url)) && config.xsrfCookieName ?
                // 读取cookie中XSRF-TOKEN
                cookies.read(config.xsrfCookieName) :
                undefined;

            if (xsrfValue) {
                // 在request header中设置XSRF-TOKEN
                requestHeaders[config.xsrfHeaderName] = xsrfValue;
            }
        }

        // setRequestHeader是用来设置请求头部的方法
        if ('setRequestHeader' in request) {
            // 将config中配置的requestHeaders，循环设置到请求头上
            utils.forEach(requestHeaders, function setRequestHeader(val, key) {
                if (typeof requestData === 'undefined' && key.toLowerCase() === 'content-type') {
                    delete requestHeaders[key];
                } else {
                    request.setRequestHeader(key, val);
                }
            });
        }

        // 设置xhr对象的withCredentials属性，是否允许cookie进行跨域请求
        if (config.withCredentials) {
            request.withCredentials = true;
        }

        // 设置xhr对象的responseType属性
        if (config.responseType) {
            try {
                request.responseType = config.responseType;
            } catch (e) {
                if (config.responseType !== 'json') {
                    throw e;
                }
            }
        }

        // 下载进度
        if (typeof config.onDownloadProgress === 'function') {
            request.addEventListener('progress', config.onDownloadProgress);
        }

        // 上传进度
        // request.upload XMLHttpRequest.upload 属性返回一个 XMLHttpRequestUpload对象，用来表示上传的进度
        if (typeof config.onUploadProgress === 'function' && request.upload) {
            request.upload.addEventListener('progress', config.onUploadProgress);
        }

        if (config.cancelToken) {
            // 取消请求，在介绍/lib/cancel/CancelToken.js中以及介绍，这里不在赘述
            config.cancelToken.promise.then(function onCanceled(cancel) {
                if (!request) {
                    return;
                }
                request.abort();
                reject(cancel);
                request = null;
            });
        }

        if (requestData === undefined) {
            requestData = null;
        }

        // 发送http请求
        request.send(requestData);
    });
};

xhrAdapter内的XHR发送请求成功后会执行这个Promise对象的resolve方法,并将请求的数据传出去, 反之则执行reject方法，并将错误信息作为参数传出去。接下来走settle.js.

function settle(resolve, reject, response) {
    var validateStatus = response.config.validateStatus;
    if (!response.status || !validateStatus || validateStatus(response.status)) {
        resolve(response);
    } else {
        reject( /**/ );
    }
};

dispatch 中 transformData对数据进行处理的,以及defaults的getDefaultAdapter方法，我们接下来看下/lib/defaults.js。

• /lib/defaults.js

defaults.js文件中配置了，axios默认的请求头、不同的环境下axios默认使用的请求方法、格式化请求正文的方法，格式化响应正文方法等内容

var utils = require('./utils');
var normalizeHeaderName = require('./helpers/normalizeHeaderName');

// 默认Content-Type
var DEFAULT_CONTENT_TYPE = {
    'Content-Type': 'application/x-www-form-urlencoded'
};

// 设置ContentType，在没有设置的情况下
function setContentTypeIfUnset(headers, value) {
    if (!utils.isUndefined(headers) && utils.isUndefined(headers['Content-Type'])) {
        headers['Content-Type'] = value;
    }
}

// 根据当前环境，获取默认的请求方法
function getDefaultAdapter() {
    var adapter;
    // 判断当前环境是否存在process对象
    if (typeof process !== 'undefined' && Object.prototype.toString.call(process) === '[object process]') {
        // node环境
        adapter = require('./adapters/http');
    } else if (typeof XMLHttpRequest !== 'undefined') {
        // 浏览器环境
        adapter = require('./adapters/xhr');
    }
    return adapter;
}

var defaults = {
    // 默认的请求方法
    adapter: getDefaultAdapter(),

    // 格式化请求requestData，这会请求发送前使用，在默认情况下，axios将会自动的将传入的data对象序列化为JSON字符串，

    transformRequest: [
        function transformRequest(data, headers) {
            // 格式化header属性名，将header中不标准的属性名，格式化为Accept属性名
            normalizeHeaderName(headers, 'Accept');
            // 格式化header属性名，将header中不标准的属性名，格式化为Content-Type属性名
            normalizeHeaderName(headers, 'Content-Type');

            if (utils.isFormData(data) ||
                utils.isArrayBuffer(data) ||
                utils.isBuffer(data) ||
                utils.isStream(data) ||
                utils.isFile(data) ||
                utils.isBlob(data)
            ) {
                return data;
            }
            if (utils.isArrayBufferView(data)) {
                return data.buffer;
            }

            // URLSearchParams提供了一些用来处理URL查询字符串接口
            // 如果是URLSearchParams对象
            if (utils.isURLSearchParams(data)) {
                // Content-Type设置为application/x-www-form-urlencoded
                // application/x-www-form-urlencoded，数据被编码成以&分隔的键值对
                setContentTypeIfUnset(headers, 'application/x-www-form-urlencoded;charset=utf-8');
                return data.toString();
            }

            // 如果是对象
            if (utils.isObject(data)) {
                // Content-Type设置为application/json
                setContentTypeIfUnset(headers, 'application/json;charset=utf-8');
                // 将请求正文格式化为JSON字符串，并返回
                return JSON.stringify(data);
            }

            return data;
        }
    ],

    // 格式化响应resposeData，这会响应接受后使用，将响应数据中的JSON字符串转换为JavaScript对象
    transformResponse: [
        function transformResponse(data) {
            if (typeof data === 'string') {
                try {
                    data = JSON.parse(data);
                } catch (e) { /* Ignore */ }
            }
            return data;
        }
    ],

    // 默认超时时间
    timeout: 0,

    // xsrf设置的cookie的key
    xsrfCookieName: 'XSRF-TOKEN',
    // xsrf设置header的key
    xsrfHeaderName: 'X-XSRF-TOKEN',

    maxContentLength: -1,

    // 验证请求的状态
    // 在处理请求的Promise会被使用
    validateStatus: function validateStatus(status) {
        return status >= 200 && status < 300;
    }
};

defaults.headers = {
    // 通用的HTTP字段
    // Accept告知客户端可以处理的类型
    common: {
        'Accept': 'application/json, text/plain, */*'
    }
};

utils.forEach(['delete', 'get', 'head'], function forEachMethodNoData(method) {
    defaults.headers[method] = {};
});

// 为post，put，patch请求设置默认的Content-Type
utils.forEach(['post', 'put', 'patch'], function forEachMethodWithData(method) {
    defaults.headers[method] = utils.merge(DEFAULT_CONTENT_TYPE);
});

module.exports = defaults;

默认的defaults配置项里已经自定义了一个请求转换器和一个响应转换器，请求转换器的使用地方是http请求前，使用请求转换器对请求数据做处理， 然后传给http请求适配器使用，在默认情况下，axios将会自动的将传入的data对象序列化为JSON字符串，将响应数据中的JSON字符串转换为JavaScript对象，看下transformData方法的代码， 主要遍历转换器数组，分别执行每一个转换器，根据data和headers参数，返回新的data。响应转换器的使用地方是在http请求完成后，根据http请求适配器的返回值做数据转换处理。

• /lib/core/transformData.js

function transformData(data, headers, fns) {
    utils.forEach(fns, function transform(fn) {
        data = fn(data, headers);
    });
    return data;
};


// /lib/core/dispatchRequest.js
return adapter(config).then(function onAdapterResolution(response) {
    // ...
    response.data = transformData(
        response.data,
        response.headers,
        config.transformResponse
    );

    return response;
}, function onAdapterRejection(reason) {
    if (!isCancel(reason)) {
        // ...
        if (reason && reason.response) {
            reason.response.data = transformData(
                reason.response.data,
                reason.response.headers,
                config.transformResponse
            );
        }
    }

    return Promise.reject(reason);
});

拦截器同样可以实现转换请求和响应数据的需求，但根据作者的设计和综合代码可以看出， 在请求时，拦截器主要负责修改config配置项，数据转换器主要负责转换请求体，比如转换对象为字符串 在请求响应后，拦截器可以拿到response，数据转换器主要负责处理响应体，比如转换字符串为对象。

axios 的大体流程 如上述般大体介绍完了。如后续有更多思考会出更多续集.

觉得本文对你有帮助？请分享给更多人

关注「React中文社区」加星标，每天进步