一比一还原axios源码(六)—— 配置化

上一章我们完成了拦截器的代码实现,这一章我们来看看配置化是如何实现的。首先,按照惯例我们来看看axios的文档是怎么说的:首先我们可以可以通过axios上的defaults属性来配置api。我们可

大家好,又见面了,我是你们的朋友全栈君。

  上一章我们完成了拦截器的代码实现,这一章我们来看看配置化是如何实现的。首先,按照惯例我们来看看axios的文档是怎么说的:

<span role="heading" aria-level="2">一比一还原axios源码(六)—— 配置化

    首先我们可以可以通过axios上的defaults属性来配置api。

<span role="heading" aria-level="2">一比一还原axios源码(六)—— 配置化

  我们可以自己创建一个axios实例,传入对应的可配置参数,然后还可以通过defaults来修改。其实就是后写的配置,会覆盖之前的配置。那么接下来我们就来看代码吧~

  首先,我们在lib根目录下,创建一个defaults文件,在里面写下我们的默认配置:

<span role="heading" aria-level="2">一比一还原axios源码(六)—— 配置化

  目前来说吼,就这么几个配置。 adapter这个默认配置,是用来区分宿主环境的也就是是使用xhr还是http,在咱们这里getDefaultAdapter是这样的:


 import adapterXHR from “./adapters/xhr”;

function
getDefaultAdapter() { var adapter; if (typeof XMLHttpRequest !== "undefined") { // For browsers use XHR adapter // adapter = require("./adapters/xhr"); adapter = adapterXHR; } else if ( typeof process !== "undefined" && Object.prototype.toString.call(process) === "[object process]" ) { // For node use HTTP adapter // 咱们没有实现服务端的http,所以直接用xhr的 adapter = adapterXHR; // adapter = require("./adapters/http"); } return adapter; }

  很简单哈,就是判断下宿主环境,因为我这里没有实现http部分,所以两个条件判断引入的都是同一个xhr文件。我们再往下看就是默认的transformRequest方法:

  transformRequest: [
    function transformRequest(data, headers) {
      normalizeHeaderName(headers, "Accept");
      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;
      }
      if (utils.isURLSearchParams(data)) {
        setContentTypeIfUnset(
          headers,
          "application/x-www-form-urlencoded;charset=utf-8"
        );
        return data.toString();
      }

      var isObjectPayload = utils.isObject(data);
      var contentType = headers && headers["Content-Type"];

      if (isObjectPayload && contentType === "multipart/form-data") {
        return toFormData(
          data,
          new ((this.env && this.env.FormData) || FormData)()
        );
      } else if (isObjectPayload || contentType === "application/json") {
        setContentTypeIfUnset(headers, "application/json");
        return stringifySafely(data);
      }

      return data;
    },
  ],

  这个transformRequest做的事情比较多,首先就是调用normalizeHeaderName转换两个请求头,这个之前说过,就不多说了,再然后其实就是判断请求body的类型,然后进行一定的请求头适应和转换。transformResponse则比较简单:

  transformResponse: [
    function transformResponse(data) {
      if (utils.isString(data) && data.length) {
        try {
          return JSON.parse(data);
        } catch (e) {
          if (e.name === "SyntaxError") {
            throw enhanceError(e, this, "E_JSON_PARSE");
          }
          throw e;
        }
      }
      return data;
    },
  ],

  这里我去掉了axios原有的transitional参数,因为这个东西可以说几乎用不太到这么细,有兴趣的话大家可以自己去看,如果你一步一步跟到了这里,那么看懂这个参数的应用肯定不在话下。

再然后就是timeout、headers和validateStatus:

  timeout: 0,

  validateStatus: function validateStatus(status) {
    return status >= 200 && status < 300;
  },

  headers: {
    common: {
      Accept: "application/json, text/plain, */*",
    },
  },

  timeout和headers不说了,validateStatus实际上就是promise走reject的条件。OK,最后我们还要给defaults的headers根据不同的方法,加一下请求头字段:

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

utils.forEach(["post", "put", "patch"], function forEachMethodWithData(method) {
  defaults.headers[method] = utils.merge(DEFAULT_CONTENT_TYPE);
});

  很简单,不多说。完整的代码就在这里,大家可以去看。下面我们就要来看下如何把defaults配置融合进我们的请求中去。首先,我们要找到创建axios的源头的类,也就是Axios类,我们加一点代码:

export default function Axios(config) {
  this.defaults = config;
  this.interceptors = {
    request: new InterceptorManager(),
    response: new InterceptorManager(),
  };
}

  多了个this.defaults,没错,我们会在创建实例的时候,传入我们上面编写好的defaults,那么我们就去axios.js里面,修改下代码吧:

var axios = createInstance(defaults);

  然后,我们给createInstance方法加一点东西:

instance.create = function create(instanceConfig) {
    return createInstance(mergeConfig(defaultConfig, instanceConfig));
  };

  也就是我们给生成的Axios实例instance提供一个创建实例的方法create。OK,到了这里哈,我们就可以使用这个defaults配置了,但是我们要去哪用呢?没错!就是Axios的prototype上挂载的request方法里。到目前为止,咱们稍微的小小的回顾下:首先我创建了defaults默认配置 —> 然后我在Axios类里接收配置 —> 最后,我在创建axios实例的时候把默认配置传入到Axios类里。那么我们继续,在request方法内,我们需要把创建实例时默认配置和axios实例使用时传入的配置合并一下,注意!我们之前所说的所有的“配置”都是指默认配置,默认配置是在创建实例的时候传递给Axios类使用的。

  var context = new Axios(defaultConfig);

  我们合并的配置是合并的默认配置和手动配置,手动配置指的是传递给axios实例的配置:

axios({
  url: "/c6/post",
  method: "post",
  data: qs.stringify({
    a: 1,
  }),
  headers: {
    test: "321",
  },
}).then((res) => {
  console.log(res.data);
});

  比如这个axios里传的这个对象。我们言归正传,合并下配置:

  config = mergeConfig(this.defaults, config);

  就可以了。这个mergeConfig,之前有说过,不多说了吼。到了现在还没完,我们还有个核心的地方,就是adapter,也就是说,我们要在哪使用这个adapter,怎么使用。之前的dispatchRequest很简单,但是这里我们需要多做一些额外的处理:

import defaults from "../defaults";
import utils from "../utils";
import transformData from "./transformData";

/**
 * Dispatch a request to the server using the configured adapter.
 *
 * @param {object} config The config that is to be used for the request
 * @returns {Promise} The Promise to be fulfilled
 */
export default function dispatchRequest(config) {
  // Ensure headers exist
  config.headers = config.headers || {};

  // Transform request data
  config.data = transformData.call(
    config,
    config.data,
    config.headers,
    config.transformRequest
  );

  // Flatten headers
  config.headers = utils.merge(
    config.headers.common || {},
    config.headers[config.method] || {},
    config.headers
  );

  utils.forEach(
    ["delete", "get", "head", "post", "put", "patch", "common"],
    function cleanHeaderConfig(method) {
      delete config.headers[method];
    }
  );

  var adapter = config.adapter || defaults.adapter;

  return adapter(config).then(
    function onAdapterResolution(response) {
      // Transform response data
      response.data = transformData.call(
        config,
        response.data,
        response.headers,
        config.transformResponse
      );

      return response;
    },
    function onAdapterRejection(reason) {
      return Promise.reject(reason);
    }
  );
}

  首先哈,我们获取一下config的headers,然后转换一下config.data,再然后,还记不记得,defaults里的headers是一个二维深度的对象,那么我们需要把它降维,最后我们获取adapter,返回这个adapter的promise即可。到了这里,我粗略的带大家过完了配置化的整条线。其中我略过了一些不常用的源码,也有一部分工具方法没有深入的去讲,那些我个人觉得大家可以自己去看,再读文章的时候,一定要对比着源码来思考,不然的话,可能不太容易理解我说的是啥。

  这章到这里就完事啦。下一章我们去实现axios的取消功能。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/124367.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 小米6解BL锁教程申请BootLoader解锁教程

    小米6解BL锁教程申请BootLoader解锁教程*小米6线刷兼救砖_解账户锁_纯净刷机包_教程*远程解锁一、准备工作1、注册小米账号:点击注册(已有小米账号请忽视)2、在手机中登陆【小米账号】3、下载并解压【小米解锁工具】或点击这里下载安装二、开始解锁1打开【小米解锁官网】:http://www.miui.com/unlock/,点击【立即解锁】,输入【小米账号】,点击【立即登录】,填写好上诉信息后,…

    2022年5月23日
    106
  • 社区打造智慧小区_idc智能化解决方案

    社区打造智慧小区_idc智能化解决方案智慧社区建设方案丨智慧小区智能化解决方案随着物联网技术和我国新一代互联网技术的发展,未来社区网络将会实现全覆盖,通过社区网络和物联网络,将会实现社区机电设备和住宅的自动化,智能化,实现远程监控和网络数字化。智慧社区是社区综合服务管理的一种创新,利用前沿的智能化基础设施建设,增强社区治理和小区管理智能化,推动便民措施服务项目智能化,使社区居民的衣食住行更为舒服、高效率。智慧社区概念介绍:智慧社区是指充分利用物联网、云计算、移动互联网等新一代信息技术的集成应用,涉及到智能楼…

    2022年10月18日
    0
  • 简练网软考知识点整理-项目需求跟踪及需求跟踪矩阵[通俗易懂]

    简练网软考知识点整理-项目需求跟踪及需求跟踪矩阵[通俗易懂]需求跟踪矩阵是把产品需求从其来源连接到能满足需求的可交付成果的一种表格。使用需求跟踪矩阵,可以把每个需求与业务目标或项目目标联系起来,有助于确保每个需求都具有商业价值。需求跟踪矩阵提供了在整个项目生命周期中跟踪需求的一种方法,有助于确保需求文件中被批准的每项需求在项目结束的时候都能交付。最后,需求跟踪矩阵还为管理产品范围变更提供了框架。

    2025年5月24日
    0
  • 关于大学毕业 总结的文章2000_如何写大学学期总结

    关于大学毕业 总结的文章2000_如何写大学学期总结本文十天后设置为粉丝可见,喜欢的提前关注不要白嫖请点赞不要白嫖请点赞不要白嫖请点赞文中提到的书我都有电子版,可以评论邮箱发给你。文中提到的书我都有电子版,可以评论邮箱发给你。文中提到的书我都有电子版,可以评论邮箱发给你。本篇文章应该算是Java后端开发技术栈的,但是大部分是基础知识,所以我觉得对任何方向都是有用的。1、数据结构数据结构是计算机存储、…

    2022年9月6日
    3
  • lamda 表达式「建议收藏」

    lamda 表达式「建议收藏」Lamda表达式高阶语言中的lamda表达式,灵感来自于lamda演算。lamda演算包括一条变换规则(变量替换)和一条函数定义方式,通过带入和替换,对输入产生输出。Connect新用法connect连接信号槽connect(sender,&Sender::valueChanged,receiver,&Rece…

    2022年5月27日
    50
  • JVM内存结构概述

    JVM内存结构概述本节将会介绍一下JVM的内存结构,JVM运行时数据区的各个组成部分:堆,方法区,程序计数器,Java虚拟机栈,本地方法栈,还会对Java堆的分代划分做个简单的介绍。目录前言JVM是什么JVM内存结构概览运行时数据区程序计数器Java虚拟机栈本地方法栈方法区运行时常量池Java堆直接内存前言JVM是Java中比较难理解和掌握的一部分,也是面试…

    2022年6月3日
    42

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号