手把手带你使用 typescript 实现一个 axios 库（一）基本请求的实现

注：本教程基于慕课网黄大神的课程进行的整理

源码地址本章节对应tag: v0.1

前言

本人是个工作快两年的前端小菜鸟，热爱写代码，喜欢分享。近期在学习黄大神的课程，就想着写博客来记录一下，一方面加深自己的理解，一方面分享出来给需要的人

需求分析

我们要做的是用 typescript 来重构 axios，so 你需要先熟悉axios，此次重构，会支持以下功能。

在浏览器端使用 XMLHttpRequest 对象通讯
支持 Promise API
支持请求和响应的拦截器
支持请求数据和响应数据的转换
支持请求的取消
JSON 数据的自动转换
客户端防止 XSRF

项目初始化

这里我们使用 typescript 的一个脚手架工具typescript-library-starter，感兴趣的可以点击进去进一步学习。

前言

如果你还不了解 typescript，可以先看一下官网的5 分钟上手 TypeScript这篇文章

使用方式

git clone https://github.com/alexjoverm/typescript-library-starter.git ts-axios-pro

cd ts-axios-pro

npm install
// 如果npm安装慢的话，可以用如下命令替换为国内的淘宝源
npm install --registry=https://registry.npm.taobao.org

目录结构

├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── code-of-conduct.md
├── node_modules
├── package-lock.json
├── package.json
├── rollup.config.ts // rollup 配置文件
├── src // 源码目录
├── test // 测试目录
├── tools // 发布到 GitHup pages 以及 发布到 npm 的一些配置脚本工具
├── tsconfig.json // TypeScript 编译配置文件
└── tslint.json // TypeScript lint 文件

基础请求代码的实现

先看一个基础的请求，我们通过传入一个对象来发送请求。

axios({
  method: 'get',
  url: '/simple/get',
  params: {
    a: 1,
    b: 2
  }
})

创建入口文件

在 src 目录下创建一个 index.ts 文件用来作为我们的入口文件。如果你仔细观察了上面的 axios 请求，不难写出如下的代码

function axios(config) {}

export default axios

此时，你的编辑器会给你一个红色的波浪线警告和一个绿色的警告（如果没有，请安装 TSlint 插件），鼠标移上去会显示错误信息。如下图...

cinfig

移到 config 上会展示

1、已声明“config”，但从未读取其值。ts(6133)
参数“config”隐式具有“any”类型。ts(7006)
2、移到绿色的那里会告诉你这个函数不能为空
原因：默认在tsconfig.json文件中吧strict设置为了true(建议开启，不要吧它设置成false)

解决方法：给 config 定义接口类型

创建类型文件(type)

在 src 目录下创建一个types目录，在下面创建一个 index.ts 类型定义文件。
定义一个 AxiosRequestConfig 接口类型

export interface AxiosRequestConfig {
  url: string
  method: string
  data?: any // 可选参数用?号表示
  params?: any
}

其中url，data，params这三者都是用户随机填写的，但是method是固定为get、post、 put等。
so 我们这里需要把method的类型改写为字符串字面量类型。

接下来我们改写上面的代码如下

export type Method =
  | 'get'
  | 'GET'
  | 'delete'
  | 'DELETE'
  | 'head'
  | 'HEAD'
  | 'options'
  | 'OPTIONS'
  | 'post'
  | 'POST'
  | 'put'
  | 'PUT'
  | 'patch'
  | 'PATCH'
export interface AxiosRequestConfig {
  url: string
  method: Method
  data?: any
  params?: any
}

这样限制了输入的 method 只能为指定的字符串
scr下的index.ts为

import { AxiosRequestConfig } from './types'
function axios(config: AxiosRequestConfig) {
  // aaa
}

export default axios

此时，就不会有警告信息

编写原生 ajax 请求代码

我们利用模块化的思想，将这部分逻辑拆分为一个单独的 ts 文件。在src目录下新建一个xhr.ts文件，内容如下

import { AxiosRequestConfig } from './types' // 引入config类型定义

// void: 它表示没有任何类型。 当一个函数没有返回值时，你通常会见到其返回值类型是 void：
export default function xhr(config: AxiosRequestConfig): void {
  const { url, method = 'get', data = null } = config // 从config中解构出url,method, data 参数

  // 创建XMLHttpRequest对象
  const request = new XMLHttpRequest()

  /**
   * @description: 发送
   * @param method {String} 请求方式
   * @param url { String} 请求url
   * @param async {Boolean} 是否异步
   */
  request.open(method.toUpperCase(), url, true)

  request.send(data)
}

此时，在src/index.ts引入并使用

import { AxiosRequestConfig } from './types'
import xhr from './xhr'
function axios(config: AxiosRequestConfig) {
  // aaa
  xhr(config)
}

export default axios

至此，我们第一步的封装就算完成了，下面说一下怎么查看效果。

demo 编写

源码对应tag: v0.1分支

这部分设计到webpack，express等配置，本人也懂的不多，所以只直接copy原作者的代码过来的。so只会教你怎么在这个项目中使用。

依赖安装

首先将examples目录拷贝到你的项目根目录中，然后打开package.json下的devDependencies添加以下依赖，并重新执行npm install

"webpack": "^4.28.4",
"webpack-dev-middleware": "^3.5.0",
"webpack-hot-middleware": "^2.24.3",
"ts-loader": "^5.3.3",
"tslint-loader": "^3.5.4",
"express": "^4.16.4",
"body-parser": "^1.18.3"

注意：版本号尽量保持一致，不然容易出问题

demo目录介绍

├── simple  // 测试真正用到的
├── global.css  // 全局css样式
├── index.html  // 全局html
├── server.js   // express起的服务
└── webpack.config.js // webpack配置

我们在simple下的app.ts下引入我们刚封装好的axios函数

import axios from '../../src/index'

axios({
  method: 'get',
  url: '/simple/get',
  params: {
    a: 1,
    b: 2
  }
})

配置别名dev

打开package.json文件，在scripts下配置"dev": "node examples/server.js"

"scripts": {
    "dev": "node examples/server.js", // 这里
    "lint": "tslint  --project tsconfig.json -t codeFrame 'src/**/*.ts' 'test/**/*.ts'",
    "prebuild": "rimraf dist",
    "build": "tsc --module commonjs && rollup -c rollup.config.ts && typedoc --out docs --target es6 --theme minimal --mode file src",
    "start": "rollup -c rollup.config.ts -w",
    "test": "jest --coverage",
    "test:watch": "jest --coverage --watch",
    "test:prod": "npm run lint && npm run test -- --no-cache",
    "deploy-docs": "ts-node tools/gh-pages-publish",
    "report-coverage": "cat ./coverage/lcov.info | coveralls",
    "commit": "git-cz",
    "semantic-release": "semantic-release",
    "semantic-release-prepare": "ts-node tools/semantic-release-prepare",
    "precommit": "lint-staged",
    "travis-deploy-once": "travis-deploy-once"
  },

打开命令行，运行npm run dev，如果看到以下信息说明运行成功

run dev

浏览器输入localhost:8080，显示页面如下。

8080

点击simple，打开开发者工具，到network下显示如下信息，恭喜你，成功迈出了第一步

hello