使用Typescript重构axios(一)——写在最前面

0.系列文章

项目源码请猛戳这里!!!

1.前言

俗话说：检验学习成果最直接的方式就是造论子。本系列文章是博主在学习了TypeScript之后，为了检验自己的学习成果，萌生出造一个轮子试试的想法。由于是第一次造轮子，所以想选择一个常用，易于理解，并且自己较熟悉的轮子。网上搜索一番，发现前后端交互神器axios造的人挺多的，并且提供了很多重构思路，为了能够站在巨人的肩膀上，并且axios也刚好符合上面提到的三个要求，那就是它啦，使用TypeScript重构axios。

2.需求分析

axios,基于Promise的HTTP客户端，用于浏览器和node.js

重构之前，我们需要简单地做一些需求分析，看一下我们这次重构需要支持哪些 Features。官方支持的Features如下：

Make XMLHttpRequests from the browser（在浏览器端使用 XMLHttpRequest 对象通讯）
~~Make http requests from node.js（在 Node.js 端使用 http request 通讯）~~
Supports the Promise 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（客户端防止 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

4.项目运行

# 克隆项目到本地
git clone https://github.com/NLRX-WJC/ts-axios.git

# 进入项目目录
cd ts-axios

# 安装依赖
npm install

# 同时打开客户端和服务端
npm run server | npm start

OK，介绍完了，现在就让我们开始使用TypeScript重构axios吧！！！

posted on 2019-08-19 15:55 难凉热血，码梦为生！阅读(7380) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

难凉热血，码梦为生！