/ javaScript

axios - 6 - 发送请求

console.info

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

简述

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

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

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

代码分析

获取请求头

  1. 根据自定义的配置,修改请求头信息
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;
}
  1. 合并头信息

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];
    }
);

发送请求 & 处理响应

  1. 获取请求发送器发送请求,返回 promise 以供调用。
var adapter = config.adapter || defaults.adapter;
return adapter(config).then(function,function);
  1. 处理成功响应,对应 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 ,返回处理结果。

  1. 处理失败响应,对应 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);
}

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