细读Axios源码系列一 - 从零搭建项目架构，项目准备、项目打包、项目测试流程

橙某人
645 阅读2分钟

「这是我参与2022首次更文挑战的第8天，活动详情查看：2022首次更文挑战」。

写在开头

Hello ~ 各位小伙伴们新年好啊^-^，新的一年都给俺互相卷起来！

在过年期间抽空写了一个 ElementUI源码系列 的专栏，不出我所料，阅读和点赞量收获惨淡>~<。不过这没有关系，这并不能阻挡我的热情，这不，马不停蹄地给各位带来第二个源码系列 - Axios。

当然，你不会以为学完 Axios 就完了吧？太天真了，第三个源码系列 - vue-cli，俺也已经准备好了，如果最近工作上不忙的话，我会同时进行更新，嘿嘿，新的一年继续卷起来吧xdm。

image.gif

预备知识

了解使用过 Axios 的小伙伴应该知道，它是一个发起网络请求的工具。Axios 它是一个基于 Promise 对象的网络请求库，可以用于浏览器和 node.js 环境中。

既然涉及网络请求，那么在正式开始介绍它之前，我们先来搭建一个网络服务，方便我们后续的测试操作。搭建服务的方法有很多种，你可以选择你喜欢的方式，而本章我们来介绍一个模块 - json-server ，它能帮助我们在30秒内快速搭建好一个零编码、完整、便捷的服务。

json-server 模块

全局安装：

npm install -g json-server

创建一个 xxx.json 文件：

{
  "posts": [
    {
      "id": 1,
      "title": "axios源码系列",
      "author": "橙某人"
    },
    {
      "id": 2,
      "title": "json-server使用教程",
      "author": "橙某人"
    }
  ],
  "profile": {
    "name": "橙某人",
    "age": 18
  }
}

启动服务：

json-server --watch xxx.json

如果你能看到这样一个界面，则说明你成功了。

image.png

你可以直接通过浏览器去访问这两个接口，它们支持 get 方式也支持 post 请求方式，更多使用技巧可以查看 官方说明 ，后面使用到它的时候我们再细说，先对它有一个基本了解即可。

项目准备

有了一个后台服务后，我们就可以来开始搭建项目结构了。

首先，在你的电脑里寻找一个风水宝地，创建一个文件夹，通过 npm init -y 命令，初始化 package.json 文件；在项目根目录下创建 index.js 入口文件，它是我们项目的总入口文件。

// index.js
module.exports = require('./lib/axios');

我们继续创建 lib 文件夹，它会存放 Axios 的所有源码；再创建 axios.js 文件。

// lib/axios.js
var axios = {
  name: '橙某人'
};

module.exports = axios;

项目基本结构如下图：

image.png

项目打包

搭建完项目的基本结构后，下个步骤就是项目打包了，Axios 打包用到的工具是 Grunt 和 Webpack，Webpack 相信各位可能比较熟了，它是一个模块打包器。

而对于 Grunt 可能有挺多小伙伴还比较陌生吧，从某种程度上讲，它算是已经退出了历史的舞台。所以对于 Grunt 我们仅需了解即可，能够大概看懂其中的代码就行啦，下面写到关于 Grunt 的代码，小编会详细写上注释，轻松看懂绝没有问题啦。

那我们废话不多说，先来看看实际要怎么把我们当前的项目进行打包吧，实践出真理。

先下载相关依赖：

npm install grunt@1.3.0 grunt-webpack@4.0.2 webpack@4.44.2 load-grunt-tasks@3.5.2 -D

然后在根目录下创建 Gruntfile.js 文件，内容如下：

module.exports = function(grunt) {
  // 加载当前项目需要的所有依赖项, 取代以前 grunt.loadNpmTasks("grunt-webpack") 单个声明的繁琐方式
  require('load-grunt-tasks')(grunt);
  // grunt的任务总配置
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    // 关于webpack属性的配置详情可以看这里 https://www.npmjs.com/package/grunt-webpack
    webpack: {
      // 名称可以随便取，下面就是webpack原有的一些属性信息了
      myConfig: {
        mode: 'development',
        entry: './index.js',
        output: {
          path: __dirname + '/dist/',
          filename: 'axios.js',
          library: 'axios',
          libraryTarget: 'umd'
        },
      }
    }
  });
  // 注册一个任务，具体语法可以看这里 https://www.gruntjs.net/creating-tasks
  grunt.registerTask('build', '任务描述，如：这是一个打包axios的任务', ['webpack']);
}

创建好项目的配置文件后，我们就可以执行打包命令：grunt build。

image.png

如果你能看到如上图界面，并且生成了 dist/axios.js 文件，则说明大功告成了。

image.png

下面补充一些，你可能会有疑问的小知识点：

  • 上面我们使用 load-grunt-tasks 模块，自动加载所需的依赖，它其实就是去读取了 package.json 文件中的 dependencies/devDependencies/peerDependencies/optionalDependencies 等属性来引入相关依赖。而你也可以用旧的方式，单个单个依赖引入：

    module.exports = function(grunt) {
   grunt.loadNpmTasks("grunt-webpack");
   grunt.initConfig({
     ...
   });
   // 注册一个任务
   grunt.registerTask('build', '任务描述，如：这是一个打包axios的任务', ['webpack']);
 }

    这样子你可以不用下载 load-grunt-tasks 模块。

  • grunt build 命令中 build 就是我们注册的 任务名，任务可以注册多个，如：

    module.exports = function(grunt) {
  require('load-grunt-tasks')(grunt);
  grunt.initConfig({
    ...
  });
  // 注册一个任务
  grunt.registerTask('build', '任务描述，如：这是一个打包axios的任务', ['webpack']);
  // 再注册一个任务，更多语法可以查看：https://www.gruntjs.net/creating-tasks
  grunt.registerTask('myTask', () => {
    console.log('我的任务');
  });
}

    然后你可以执行 grunt myTask 命令。 image.png

  • 你会不会有一个疑问，为什么不直接使用 webpack 打包就好，还要使用 grunt呢？ 首先，不得不说，两者有不少相同的地方，但你要区分好两者的本质区别，webpack 是一个模块打包器，而 grunt 是一个任务执行器。所谓任务执行器是用来自动化处理一些常见的开发任务的，如项目代码检查（lint）、构建（build）、测试（test）等等，它更看重的是偏上层的问题。而 webpack 更专注于模块之间的打包工作。

    打包器帮助你取得准备用于部署的 JavaScript 和样式表，将它们转换为适合浏览器的可用格式。例如，JavaScript 可以压缩、拆分 chunk 和懒加载，以提高性能。打包是 web 开发中最重要的挑战之一，解决此问题可以消除开发过程中的大部分痛点。

项目测试

做到这里，项目前期的准备工作终于做完了，下面就来步入测试流程，测试过程就比较简单了，我们直接新建一个 index.html 文件：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Axios</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<script>
    axios({
        url: 'http://localhost:3000/posts',
    }).then(res => {
        console.log(res)
    })
</script>
</body>
</html>

上面代码我们可以先拉一个官方的 axios 版本回忆一下原本的 axios 的使用，结果如下是正常的：

image.png

然后我们再引入自己项目写的 axios 进行测试：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Axios</title>
    <script src="../dist/axios.js"></script>
</head>
<body>
<script>
    console.log(axios); // 打印我们自己的axios
</script>
</body>
</html>

不过，我们现在的 axios 只是一个简单的对象，后续我们将来慢慢完善它。

image.png



至此，本篇文章就写完啦，撒花撒花。

image.png

希望本文对你有所帮助，如有任何疑问，期待你的留言哦。
老样子，点赞+评论=你会了，收藏=你精通了。

avatar
文章
阅读
粉丝