axios - 6 - 发送请求

console.info

该系类文章旨在研究 axios 的实现 。在研究源码的基础上，去理解 axios 是如何实现 ajax 请求并更好的去使用这个库。

简述

对应文件：lib/core/dispatchRequest.js

该模块接受传入的 config 对象并使用该对象下的 adapter 发送请求。

注： 这里的 config 对象可以看作是 default + config 的合集。

代码分析

获取请求头

• 根据自定义的配置，修改请求头信息

config.data = transformData(
    config.data,
    config.headers,
    config.transformRequest
);

transformData 函数使用将 config 下的 transformRequest 处理请求的 data & headers ，返回处理结果。

transformData 函数的具体内容为：

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

• 合并头信息

在 defalut 中为了方便管理不同请求需要不同的请求头，将分别的请求头信息保存在 default.headers[method] 下，而真正的请求发送仅仅需要 default.header 就够了。

// 合并请求头
config.headers = utils.merge(
    config.headers.common || {},
    config.headers[config.method] || {},
    config.headers || {}
);
// 去掉 header 中不必要的属性
utils.forEach(
    ['delete', 'get', 'head', 'post', 'put', 'patch', 'common'],
    function cleanHeaderConfig(method) {
        delete config.headers[method];
    }
);

发送请求 & 处理响应

• 获取请求发送器发送请求，返回 promise 以供调用。

var adapter = config.adapter || defaults.adapter;
return adapter(config).then(onAdapterResolution, onAdapterRejection);

• 处理成功响应，对应 then 中的第一个参数

function onAdapterResolution(response) {
    // 判断当前的请求是否被主动取消了，对应 default 中的 cancelToken 可在 defalut 文章中查看
    throwIfCancellationRequested(config);

    // 根据自定义的配置，修改响应头信息
    response.data = transformData(
        response.data,
        response.headers,
        config.transformResponse
    );

    return response;
}

transformData 函数使用将 config 下的 transformResponse 处理响应的 data & headers ，返回处理结果。

• 处理失败响应，对应 then 中的第二个参数

function onAdapterRejection(reason) {
    // 当使用 isCancel(reason) 判断为 true 时，仅仅是请求被主动取消了，并不是请求失败。
    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);
}

上述大致的请求过程中的处理。