一比一还原axios源码（一）—— 发起第一个请求

　　上一篇文章，我们简单介绍了XMLHttpRequest及其他可以发起AJAX请求的API，那部分大家有兴趣可以自己去扩展学习。另外，简单介绍了怎么去读以及我会怎么写这个系列的文章，那么下面就开始真正的axios源码实现，跟紧我的步伐，你会发现其实阅读源码并不是一件很复杂的事情。另外，我在上一篇概要中附上的链接，大家一定要去看，至少要了解一下XMLHttpRequest的相关属性和方法都有哪些，因为接下来的核心内容，其实都是基于此的。

　　那么先来看看我们今天要来实现的内容有哪些，首先第一部分，我会创建一个本地的server服务，实现这部分的代码，以供我们在实现axios的过程中可以用来验证代码以做测试，另外，会实现简单的axios的get请求。

　　下面我们就先来看看server的代码是什么样的。

一、编写server代码

　　首先，我们在examples文件夹下创建webpack.config.js和server.js文件，是server部分的核心代码，其中webpack比较简单，代码如下：

const fs = require("fs");
const path = require("path");
const webpack = require("webpack");

module.exports = {
  mode: "development",
  entry: fs.readdirSync(__dirname).reduce((entries, dir) => {
    const fullDir = path.join(__dirname, dir);
    const entry = path.join(fullDir, "app.js");
    if (fs.statSync(fullDir).isDirectory() && fs.existsSync(entry)) {
      entries[dir] = ["webpack-hot-middleware/client", entry];
    }
    return entries;
  }, {}),
  output: {
    path: path.join(__dirname, "__build__"),
    filename: "[name].js",
    publicPath: "/__build__/",
  },
  module: {},
  resolve: {
    extensions: [".js"],
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
  ],
};

　　看上面的代码，核心就是读取examples目录下的所有文件，然后生成多页应用。其中if判断的是如果是文件夹并且该文件夹存在，那么则会加入热更新的依赖。这些都比较容易理解。其次，是server.js。

　　通过express生成一个服务器，并读取webpack.config.js的配置文件， express通过webpack-dev-middleware插件来读取webpack的配置文件，最后通过

app.use(express.static(__dirname));

　　这行代码，读取根目录下的index.html作为访问服务器的跟路由页面。再然后通过下面的代码注册每一个example的路由，这里的路由，是后端路由，代表着可访问的接口地址：

function registerC1Router() {
  router.get("/c1/get", function (req, res) {
    res.json({
      msg: `hello world`,
    });
  });
}

　　在后面的开发过程中，会根据章节增加examples的demo代码。完整的代码大家也可以在https://github.com/zakingWong/zaking-axios/tree/c1这里查看。

二、发起ajax请求

　　接下来，我们要看如何实现axios中的一个api，我们先看下axios的官方文档：

　　这是axios从服务器获取一个图片的方法，发起了get请求，需要一个url，那么我们今天就来实现红框中的部分，通过代码的实现，来发起一个真正的请求。

　　接下来，我们在lib文件夹里创建一个adapters文件夹，在adapters文件夹下创建一个xhr文件，这是我们真正的XMLHttpRequest的代码，xhr文件的代码这样写：

export default function xhrAdapter(config) {
    var request = new XMLHttpRequest();

    request.open(config.method.toUpperCase(), config.url, true);

    request.send(config.data);
}

　　很简单，实际上就是开启一个XMLHttpRequest请求。然后在lib下的axios文件中引入并调用即可。这样，我们就完成了axios源码的实现，好了，本系列到此结束。哈哈哈，开个玩笑。

1、完善url参数

　　OK，经过上面的代码，我们已经可以发起get请求了，但是还有个问题没有解决，就是params参数的传递，axios可以传递params后拼在url的请求后面。那么，我们也来实现一下。axios通过一个buildURL方法来辅助处理url后携带的参数，那么我们也照着抄呗。

　　首先，我们在lib下创建一个helpers文件夹，这个文件夹是用来放一堆一堆的辅助处理的方法的，在这个文件夹下，我们创建一个名字叫buildURL的文件。然后，我们一口气把目前所需要的文件创建完吧，接下来就可以专注的写代码了，我们再在lib文件夹下创建一个utils文件，也就是用来存放一些工具方法，我们稍后会用到的时候再来抄，哦不，再来写。

　　下面……激动人心的时刻到了，但是我们还不能开始写代码，我们先来看看。我们需要处理params的场景有哪些：

最常见的普通使用方法：

axios({
  method: "get",
  url: "/c1/get",
  params: {
    a: 1,
    b: 2,
  },
});

　　上面这种场景是最常见的，我们希望可以把params对象拼在url后面，变成这样："/c1/get?a=1&b=2"即可。

参数值为数组：

axios({
  method: "get",
  url: "/c1/get",
  params: {
    a: [1, 2, 3, 4],
  },
});

　　上面的代码，params参数对象的值a是一个数组，我们希望它的url可以变成这样："/c1/get?a[]=1&a[]=2&a[]=3&a[]=4"，就好了。

参数值为对象：

// params的参数的值为对象的情况
axios({
  method: "get",
  url: "/c1/get",
  params: {
    a: {
      b: 1,
    },
  },
});

　　　我们希望是这样的url："/c1/get?a=%7B%22b%22:%221%22%7D"。这里的%7B就是“{”,%22就是“"”，%7D就是“}”，也就是字符encode后的结果。

参数值为Date类型：

// params的参数的值为Date类型
const date = new Date();

axios({
  method: "get",
  url: "/c1/get",
  params: {
    date,
  },
});

　　它在url上就会变成这样："/c1/get?date=2019-04-01T05:55:39.030Z"，date 后面拼接的是 date.toISOString() 的结果。

特殊字符的支持：

// 支持特殊字符
axios({
  method: "get",
  url: "/c1/get",
  params: {
    a: "@:$, ",
  },
});

　　我们希望可以支持@、:、$、,、、[、]，这些字符“@符号，:冒号，,逗号，空格，中括号[]，$美元符”，希望这些特殊符号不会被encode，要注意，这里的空格会被转换成+号。url就是这样的："/c1/get?foo=@:$+"。

忽略空值

// 忽略空值
axios({
  method: "get",
  url: "/c1/get",
  params: {
    a: 1,
    b: null,
    c: undefined,
  },
});

　　所以上面的请求代码，url就是这样："/c1/get?a=1"。

丢弃URL中的hash标记

// 丢弃URL中的hash标记
axios({
  method: "get",
  url: "/c1/get#fuckhash",
  params: {
    a: 1,
    b: null,
    c: undefined,
  },
});

　　诶？这个跟上面的url表现是一样的："/c1/get?a=1"。

保留URL中已存在的参数

// 保留URL中已存在的参数
axios({
  method: "get",
  url: "/c1/get#fuckhash?m=12&md=23",
  params: {
    a: 1,
    b: null,
    c: undefined,
  },
});

　　这个呢就是这样的："/c1/get?m=12&md=23&a=1"。

　　OK，终于，我们分析完了所有的情况，下面就要开始抄写buildURL代码了。

export default function buildURL(url, params, paramsSerializer) {
  // 如果没有params的参数的话，直接返回url即可
  if (!params) return url;
  // 首先啊，由于我们引入了可以自定义转换的逻辑，所以这里我们先判断一下
  let serializedParams; // 这个变量就是转换后的url参数
  if (paramsSerializer) {
    serializedParams = paramsSerializer(params);
  } else if (utils.isURLSearchParams(params)) {
    serializedParams = params.toString();
  } else {
    // 如果即没有自定义的转换方法，又不是一个URLSearchParams对象，那么就走默认的转换逻辑
    // 先声明一个存储变量
    let parts = [];
    // 这里用了一个自定义的循环方法
    utils.forEach(params, function serialize(val, key) {
      // 这个跟我们说好的场景一致，如果没有值，就不管它了。
      if (val === null || typeof val === "undefined") {
        return;
      }

      // 判断val是否是个数组,如果是数组的话，那么key要变化一下，这个咱们之前的需求也说过，
      // 如果不是的话，把它变成数组，方便后面统一循环处理
      if (utils.isArray(val)) {
        key = key + "[]";
      } else {
        val = [val];
      }

      utils.forEach(val, function parseValue(v) {
        // 这个也说了，日期的话要处理下
        if (utils.isDate(v)) {
          v = v.toISOString();
          // 如果是个对象的话，那直接stringify就好
        } else if (utils.isObject(v)) {
          v = JSON.stringify(v);
        }
        // 数组里的样子就是这样的["a=1","v=2"]酱紫。
        parts.push(encode(key) + "=" + encode(v));
      });
    });
    // parts里面的参数都放完了，咱隔一下
    serializedParams = parts.join("&");
    // 此时的serializedParams就是这样的"a=1&v=2"了
  }

  // 上面，我们根据不同的条件（自定义转换，URLSearchParams，默认）处理好了searchParams
  // 下面，我们要处理hash
  // 这个逻辑很简单，就是有hash的时候，只留下hash前的地址
  if (serializedParams) {
    console.log(url, "url");

    var hashmarkIndex = url.indexOf("#");
    // 要注意的是，如果hash存在，并且还存在参数，那么hash后面的参数也会被视为hash的一部分
    if (hashmarkIndex !== -1) {
      url = url.slice(0, hashmarkIndex);
    }
    console.log(url, "url");
    // 判断下url有没有参数，根据不同条件分割searchParams
    url += (url.indexOf("?") === -1 ? "?" : "&") + serializedParams;
  }

  return url;
}

　　首先啊，上面的代码都详细的写了注释。包括大家也可以去gitHub上看源码，好吧，跟axios一模一样，没有几乎，唉。。毕竟是抄的嘛。。。我在简单说下逻辑，首先，根据传入的参数判断要对params如何处理。如果既不存在自定义的转换方法又不是URLSearchParams对象，那么就会进入到我们自己的逻辑里。

　　自己的逻辑里，用到了一个自定义的工具forEach方法，这个方法不多说，大家自己去源码的注释里看，循环的时候会判断下，这个key要是没有可使用的值就抛弃掉。那如果是数组，就转换一下key，如果不是，就把值变成一个数组，因为后面，我们要循环这个key的值，这块很重要，我们不仅要循环整个params对象，因为可能存在params中的值也是数据的情况，所以，还要循环遍历在params中的某个key的值是数组的情况。这样，如果值是数组的话，就会拼凑一个一个的key，刚好，之前我们把不是数组的也变成数组里，就可以单纯对数组进行循环处理。

　　剩下的就比较简单，对Date和Object做一下特殊的处理，并且剔除hash。这里针对hash尤其要说一下，如果hash和searchParams同时存在，那么会连带一起抛弃掉的。比如www.baidu.com#query?a=1&b=2，那么处理后就只剩下www.baidu.com了。其他的就没了。

　　我们在xhrAdapter方法中加上buildURL，然后，就可以查看结果了。

import buildURL from "../helpers/buildURL";
export default function xhrAdapter(config) {
  var request = new XMLHttpRequest();

  request.open(
    config.method.toUpperCase(),
    buildURL(config.url, config.params, config.paramsSerializer),
    true
  );

  request.send(config.data);
}

　　该章节完整的代码在这里https://github.com/zakingWong/zaking-axios/tree/c1。哦对，额外要说的，该章节实现了几个工具方法，大家可以去lib/utils下查看，写了注释，这里就不多说了。不是主线任务，嘻嘻。

　　我们也可以直接把项目clone到本地，npm run dev后，在对应的本地地址中查看效果，哦还有，run之前别忘了npm install一下。

参考：

posted @ 2022-03-15 21:13 Zaking 阅读(416) 评论(0) 编辑收藏举报

刷新页面返回顶部

Zaking