# 1.前言
俗话说:检验学习成果最直接的方式就是造论子。本系列文章是博主在学习了 TypeScript
之后,为了检验自己的学习成果,萌生出造一个轮子试试的想法。由于是第一次造轮子,所以想选择一个常用,易于理解,并且自己较熟悉的轮子。网上搜索一番,发现前后端交互神器axios
造的人挺多的,并且提供了很多重构思路,为了能够站在巨人的肩膀上,并且 axios
也刚好符合上面提到的三个要求,那就是它啦,使用TypeScript
重构axios
。
# 2.需求分析
axios,基于 Promise 的 HTTP 客户端,用于浏览器和 node.js
重构之前,我们需要简单地做一些需求分析,看一下我们这次重构需要支持哪些 Features
。官方支持的Features
如下:
- Make XMLHttpRequests (opens new window) from the browser(在浏览器端使用 XMLHttpRequest 对象通讯)
Make http (opens new window) requests from node.js(在 Node.js 端使用 http request 通讯)- Supports the Promise (opens new window) API(支持 Promise API)
- Intercept request and response(支持请求和响应的拦截器)
- Transform request and response data(支持请求数据和响应数据的转换)
- Cancel requests(支持请求的取消)
- Automatic transforms for JSON data(JSON 数据的自动转换)
- Client side support for protecting against XSRF (opens new window)(客户端防止 XSRF)
这次重构,我们只实现官方支持的 8 个Features
中的 7 个,其中axios
在node
中的应用不打算实现,因为这部分在日常使用中相对较少(其实是因为懒,逃~)。
# 3.了解 axios
axios
本质上就是发送一个请求拿到响应结果中途可以去对配置参数、请求数据和响应数据处理同时也支持一些拦截器的调用,它的工作流程如下:
而我们后续的重构思路也是严格按照这样一个工作流程展开。
# 3.目录介绍
本项目分为客户端(examples
文件夹)和服务端(server
文件夹):客户端主要是用来检验重构功能的demo
,采用TypeScript
按照模块化进行编写;服务端是用来响应demo
中发出的请求,采用express
编写。
├─.gitignore
├─index.html
├─package.json
├─README.md
├─tsconfig.json # TypeScript 编译配置文件
├─tslint.json # TypeScript lint 文件
├─examples # 每个功能点的demo
├─server # 服务端源码
└─src # 源码目录
├─axios.ts
├─defaultes.ts
├─cancel
├─core
├─helpers
└─types
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 4.项目运行
# 克隆项目到本地
git clone https://github.com/NLRX-WJC/ts-axios.git
# 进入项目目录
cd ts-axios
# 安装依赖
npm install
# 同时打开客户端和服务端
npm run server | npm start
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
OK,介绍完了,现在就让我们开始使用TypeScript
重构axios
吧!!!
← 11.反转链表 02.项目起手,跑通流程 →