从零实现axios(3.5小节-实现请求别名)

21 阅读1分钟

实现请求的别名

我们往 Axios 原型上添加 getpost 等请求的别名

var utils = require("../utils");
var buildURL = require("../helpers/buildURL");
var dispatchRequest = require("./dispatchRequest");
var InterceptorManager = require("./InterceptorManager");
var mergeConfig = require("./mergeConfig");

// 获取uri
Axios.prototype.getUri = function getUri(config) {
  config = mergeConfig(this.defaults, config);
  var fullPath = buildFullPath(config.baseURL, config.url);
  return buildURL(fullPath, config.params, config.paramsSerializer)
};

// 提供请求方法的别名
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*/
  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);
});

与此同时,我们在 xhr.js文件中对请求头作出相应的处理

module.exports = function xhrAdapter(config) {
  return new Promise(function dispatchXhrRequest(resolve, reject) {
    // 请求数据
    var requestData = config.data;
    var requestHeaders = config.headers;
    var responseType = config.responseType;

    // 该方法暂时不实现
    function done() {}

    // 由于我们只实现标准浏览器的请求发送,因此不需要判断是否是标准浏览器
    if (utils.isFormData(requestData)) {
      delete requestHeaders["Content-Type"]; // 如果是FormData,让浏览器自己添加"Content-Type"
    }

    // 中间代码省略,可参考前面的内容或最后一章提供的代码资料
    // ...

    // 添加请求头
    if ("setRequestHeader" in request) {
      utils.forEach(requestHeaders, function setRequestHeader(val, key) {
        if (
          typeof requestData === "undefined" &&
          key.toLowerCase() === "content-type"
        ) {
          //如果数据是undefined且是content-type类型,移除Content-Type
          delete requestHeaders[key];
        } else {
          // 否则,设置请求头
          request.setRequestHeader(key, val);
        }
      });
    }

    // 添加withCredentials
    if (!utils.isUndefined(config.withCredentials)) {
      request.withCredentials = !!config.withCredentials;
    }

    // 添加responseType
    if (responseType && responseType !== 'json') {
      request.responseType = config.responseType;
    }

    if (!requestData) {
      requestData = null;
    }

    request.send(requestData);
  });
};