好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

使用Typescript重构axios(十一)——接口扩展

1.使用Typescript重构axios(一)——写在最前面
2.使用Typescript重构axios(二)——项目起手，跑通流程
3.使用Typescript重构axios(三)——实现基础功能：处理get请求url参数
4.使用Typescript重构axios(四)——实现基础功能：处理post请求参数
5.使用Typescript重构axios(五)——实现基础功能：处理请求的header
6.使用Typescript重构axios(六)——实现基础功能：获取响应数据
7.使用Typescript重构axios(七)——实现基础功能：处理响应header
8.使用Typescript重构axios(八)——实现基础功能：处理响应data
9.使用Typescript重构axios(九)——异常处理：基础版
10.使用Typescript重构axios(十)——异常处理：增强版
11.使用Typescript重构axios(十一)——接口扩展
12.使用Typescript重构axios(十二)——增加参数
13.使用Typescript重构axios(十三)——让响应数据支持泛型
14.使用Typescript重构axios(十四)——实现拦截器
15.使用Typescript重构axios(十五)——默认配置
16.使用Typescript重构axios(十六)——请求和响应数据配置化
17.使用Typescript重构axios(十七)——增加axios.create
18.使用Typescript重构axios(十八)——请求取消功能：总体思路
19.使用Typescript重构axios(十九)——请求取消功能：实现第二种使用方式
20.使用Typescript重构axios(二十)——请求取消功能：实现第一种使用方式
21.使用Typescript重构axios(二十一)——请求取消功能：添加axios.isCancel接口
22.使用Typescript重构axios(二十二)——请求取消功能：收尾
23.使用Typescript重构axios(二十三)——添加withCredentials属性
24.使用Typescript重构axios(二十四)——防御XSRF攻击
25.使用Typescript重构axios(二十五)——文件上传下载进度监控
26.使用Typescript重构axios(二十六)——添加HTTP授权auth属性
27.使用Typescript重构axios(二十七)——添加请求状态码合法性校验
28.使用Typescript重构axios(二十八)——自定义序列化请求参数
29.使用Typescript重构axios(二十九)——添加baseURL
30.使用Typescript重构axios(三十)——添加axios.getUri方法
31.使用Typescript重构axios(三十一)——添加axios.all和axios.spread方法
32.使用Typescript重构axios(三十二)——写在最后面（总结）

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

1. 前言

虽然我们目前已经实现了 axios 的所有基础功能以及异常情况的处理，但是我们实现的 axios 在使用起来好像只能向函数调用一样使用：

 axios({
  method: 'post',
  url: '/base/post',
  data: {
    a: 1,
    b: 2
  }
})

而官方的 axios 不但可以这样使用，它还对外提供了很多接口，如：

axios.request(config) axios.get(url[, config]) axios.delete(url[, config]) axios.head(url[, config]) axios.options(url[, config]) axios.post(url[, data[, config]]) axios.put(url[, data[, config]]) axios.patch(url[, data[, config]])

有了这些接口，就可以让我们省去一些配置，能够很方便的使用。那么我们接下来也要来实现这些接口。

2. 前置知识：混合对象

通过上面分析，我们发现：我们可以把 axios 对象当函数一样调用，也可以从它身上点出来一系列方法调用。这种设计使得 axios 更像是一个混合对象，本身是一个方法，内部又有很多方法属性。

所谓混合对象，我们可以看下面这段代码：

 function getCounter() {
  let counter = function (num) { console.log(num) }
  counter.interval = 123
  counter.reset = function () { console.log('reset')}
  return counter
}

let c = getCounter()
c(10)                  // 10
c.reset()              // reset
c.interval = 5.0
console.log(c.interval)    // 5

getCounter 函数内部返回了一个函数 counter ，并且在 counter 上面挂载了一些属性，这就使得 counter 函数变成了一个混合对象，它既能够当函数一样调用，本身又有了很多方法属性。

3. 实现思路

仿照上面这个例子，我们接下来扩展 axios 接口就可以这样做：

我们先创建一个 axios 类，在类内部实现我们要的所有的接口，包括 request 、 get 、 post 、 delete 等等；

然后我们创建一个类似于 getCounter 的 getAxios 的函数；

 function getAxios() {
  let axios = function () {  }   //之前创建的axios方法
  axios.reuqest = ''
  axios.get = ''
  axios.post = ''
  // ...  
  return axios
}

在 getAxios 函数内部给之前创建的 axios 方法上挂载我们要的接口，然后把 axios 返回；

这样我们在外面就能把 axios 既能当函数用，又能点出来其他的接口方法属性。

OK，这就是实现思路，话不多说，开干！。

4. 定义Axios类类型接口

定义 Axios 类之前，我们先在 src/types/index.ts 中定义一下它的类型接口，如下：

 export interface Axios {
  request(config: AxiosRequestConfig): AxiosPromise

  get(url: string, config?: AxiosRequestConfig): AxiosPromise

  delete(url: string, config?: AxiosRequestConfig): AxiosPromise

  head(url: string, config?: AxiosRequestConfig): AxiosPromise

  options(url: string, config?: AxiosRequestConfig): AxiosPromise
  
  // 以下三个与上面三个多了data参数

  post(url: string, data?: any, config?: AxiosRequestConfig): AxiosPromise

  put(url: string, data?: any, config?: AxiosRequestConfig): AxiosPromise

  patch(url: string, data?: any, config?: AxiosRequestConfig): AxiosPromise
}

这里有一个问题：

有了这些接口以后，我们将来发 get 或 post 请求时，我们只需这样：

 axios.get(url,config/*除url、method外的其他配置*/)
axios.post(url,data,config/*除url、method、data外的其他配置*/)

在 config 中我们就不需要再配置 url 、 method 或 data 了，而在上面的接口定义中， config 的类型仍是 AxiosRequestConfig ，而我们当时定义 AxiosRequestConfig 接口类型时的 url 是必选参数，所以我们现在就要将它改成可选参数了，如下：

 export interface AxiosRequestConfig {
  url?: string;
  method?: Method;
  headers?: any;
  data?: any;
  params?: any;
  responseType?: XMLHttpRequestResponseType;
  timeout?: number;
}

定义好之后，我们顺便再来定义一下将来的混合对象 axios 的类型接口：

 export interface AxiosInstance extends Axios {
  (config: AxiosRequestConfig): AxiosPromise;
}

OK，接口类型就定义完毕了。

5. 创建Axios类

现在，我们就可以来创建 Axios 类，在其内部实现我们想要的所有对外接口的方法了。

我们在 src 下面创建一个 core 目录，用来存放发送请求核心流程的代码。我们将之前 src/xhr.ts 和 src/index.ts 文件一并移入 src/core 目录内，并且为了区分将来的 axios 混合对象，我们将之前在 src/index.ts 中写的 axios 函数的函数名与文件名改为 dispatchRequest 和 dispatchRequest.ts 。改过之后，要将之前所有引用过这几个文件和函数的地方都要做一下更改，建议使用 webstorm 开发，可以一键自动更改所有引用地方，非常方便。

我们在 src/core 目录下创建 Axios.ts 文件，在该文件内创建 Axios 类：

 // src/core/Axios.ts

import { AxiosPromise, AxiosRequestConfig } from "types";
import dispatchRequest from "./dispatchRequest";

export default class Axios {
  request(config: AxiosRequestConfig): AxiosPromise {
    return dispatchRequest(config);
  }

  get(url: string, config?: AxiosRequestConfig): AxiosPromise {
    return this.request(
      Object.assign(config || {}, {
        method: "get",
        url
      })
    );
  }

  delete(url: string, config?: AxiosRequestConfig): AxiosPromise {
    return this.request(
      Object.assign(config || {}, {
        method: "delete",
        url
      })
    );
  }

  head(url: string, config?: AxiosRequestConfig): AxiosPromise {
    return this.request(
      Object.assign(config || {}, {
        method: "head",
        url
      })
    );
  }

  options(url: string, config?: AxiosRequestConfig): AxiosPromise {
    return this.request(
      Object.assign(config || {}, {
        method: "options",
        url
      })
    );
  }

  post(url: string, data?: any, config?: AxiosRequestConfig): AxiosPromise {
    return this.request(
      Object.assign(config || {}, {
        method: "post",
        url,
        data
      })
    );
  }

  put(url: string, data?: any, config?: AxiosRequestConfig): AxiosPromise {
    return this.request(
      Object.assign(config || {}, {
        method: "put",
        url,
        data
      })
    );
  }

  patch(url: string, data?: any, config?: AxiosRequestConfig): AxiosPromise {
    return this.request(
      Object.assign(config || {}, {
        method: "patch",
        url,
        data
      })
    );
  }
}

写完之后，我们发现：其实 get 、 delete 、 head 、 options 、 post 、 patch 、 put 这些接口方法，内部都是通过调用 request 方法实现发送请求，只不过在调用之前将请求方法 method 和 data 使用 Object.assign 合并进 config 内。另外，我们还发现： get 、 delete 、 head 、 options 这四个方法是不需要 data 参数的，并且它们内部实现的代码几乎一模一样，而 post 、 patch 、 put 这三个方法是需要 data 参数的，而且它们三个内部实现的代码也几乎一样，所以本着面向对象的原则，我们将其分别封装为两个子函数：

 _requestMethodWithoutData(method: Method, url: string, config?: AxiosRequestConfig) {
    return this.request(
      Object.assign(config || {}, {
        method,
        url
      })
    )
  }

  _requestMethodWithData(method: Method, url: string, data?: any, config?: AxiosRequestConfig) {
    return this.request(
      Object.assign(config || {}, {
        method,
        url,
        data
      })
    )
  }

然后我们就可以在 get 、 delete 、 head 、 options 这四个方法里调用 _requestMethodWithoutData ，在 post 、 patch 、 put 方法里调用 _requestMethodWithData ， Axios 类改写如下：

 import { AxiosPromise, AxiosRequestConfig, Method } from "types";
import dispatchRequest from "./dispatchRequest";

export default class Axios {
  request(config: AxiosRequestConfig): AxiosPromise {
    return dispatchRequest(config);
  }

  get(url: string, config?: AxiosRequestConfig): AxiosPromise {
    return this._requestMethodWithoutData("get", url, config);
  }

  delete(url: string, config?: AxiosRequestConfig): AxiosPromise {
    return this._requestMethodWithoutData("delete", url, config);
  }

  head(url: string, config?: AxiosRequestConfig): AxiosPromise {
    return this._requestMethodWithoutData("head", url, config);
  }

  options(url: string, config?: AxiosRequestConfig): AxiosPromise {
    return this._requestMethodWithoutData("options", url, config);
  }

  post(url: string, data?: any, config?: AxiosRequestConfig): AxiosPromise {
    return this._requestMethodWithData("post", url, data, config);
  }

  put(url: string, data?: any, config?: AxiosRequestConfig): AxiosPromise {
    return this._requestMethodWithData("put", url, data, config);
  }

  patch(url: string, data?: any, config?: AxiosRequestConfig): AxiosPromise {
    return this._requestMethodWithData("patch", url, data, config);
  }

  _requestMethodWithoutData(
    method: Method,
    url: string,
    config?: AxiosRequestConfig
  ) {
    return this.request(
      Object.assign(config || {}, {
        method,
        url
      })
    );
  }

  _requestMethodWithData(
    method: Method,
    url: string,
    data?: any,
    config?: AxiosRequestConfig
  ) {
    return this.request(
      Object.assign(config || {}, {
        method,
        url,
        data
      })
    );
  }
}

OK， Axios 类就已经实现好了。

6. 创建混合对象axios

接下来，我们就可以按照第3步的实现思路来实现这个混合对象 axios 了。我们在 src 下新创建一个 axios.ts 文件（之前的 src/axios.ts 文件已被移入 src/core 目录下并改名为 dispatchRequest ），在该文件内我们来创建混合对象 axios ，如下：

首先我们先来创建一个类似于第2节的 getCounter 的 getAxios 的函数，它将返回最终的混合对象 axios ，所以它的返回值类型为之前创建的 AxiosInstance ；

 function getAxios(): AxiosInstance {
  
  // ...  
  
  return axios
}

接着，我们在 getAxios 函数内部创建类似于第2节的 counter 的 axios 的函数,这里的 axios 函数其实就是 Axios 类中的 request 方法；

 function getAxios(): AxiosInstance {
  const axios = Axios.prototype.request
  // ...  
  
  return axios
}

这里，我们还需要注意一点，我们需要把 Axios 类的实例对象绑定给 axios 函数的上下文 this 。这是因为混合对象在 axios.get 使用时，其实是调用了 Axios 类中的 get 方法，而 get 方法内部是调用了 this._requestMethodWithoutData ，所以我们需要把 Axios 类的实例对象绑定给 axios 函数的上下文 this ，不然它就找不到 this._requestMethodWithoutData 。

 function getAxios(): AxiosInstance {
  const context = new Axios()
  const axios = Axios.prototype.request.bind(context)
  // ...  
  
  return axios
}

然后，我们就可以给 axios 上面挂载我们所需要的所有接口了

 function getAxios(): AxiosInstance {
  const context = new Axios()
  const axios = Axios.prototype.request.bind(context)
  // 挂载接口  
  axios.get = Axios.prototype.get.bind(context);
  axios.post = Axios.prototype.post.bind(context);
  axios.delete = Axios.prototype.delete.bind(context);
  axios.put = Axios.prototype.put.bind(context);
  
  // ...剩下的所有接口
  return axios
}

所有接口挂载好之后，就到最后一步，执行 getAxios 函数，返回混合对象 axios 了；

 function getAxios(): AxiosInstance {
  const context = new Axios();
  const axios = Axios.prototype.request.bind(context);
  
  // 挂载接口  
  axios.get = Axios.prototype.get.bind(context);
  axios.post = Axios.prototype.post.bind(context);
  axios.delete = Axios.prototype.delete.bind(context);
  axios.put = Axios.prototype.put.bind(context);
  
  // ...剩下的所有接口
  return axios as AxiosInstance;
}

const axios = getAxios();
export default axios;

这样，我们的混合对象 axios 就创建好了，但是你肯定发现，我们在 getAxios 函数内部挂载接口的时候，写了很多重复的代码，其实我们可以写一个工具函数 extand ，来帮助我们完成那一堆接口的挂载，所以我们在 src/helpers/util.ts 文件内创建 extend 函数，如下：

 export function extend<T, U>(to: T, from: U): T & U {
  for (const key in from) {
    (to as T & U)[key] = from[key] as any;
  }
  return to as T & U;
}

extend 方法的实现用到了交叉类型，并且用到了类型断言。 extend 的最终目的是把 from 里的属性都扩展到 to 中，包括原型上的属性。

创建好之后，我们就可以在 getAxios 函数内部使用 extend 方法了：

 import { AxiosInstance } from "./types";
import Axios from "./core/Axios";
import { extend } from "./helpers/util";

function getAxios(): AxiosInstance {
  const context = new Axios();
  const axios = Axios.prototype.request.bind(context);

  extend(axios, context);

  return axios as AxiosInstance;
}

const axios = getAxios();

export default axios;

OK，至此，混合对象 axios 就已经创建完毕了，当直接调用 axios 方法就相当于执行了 Axios 类的 request 方法发送请求，当然我们也可以调用 axios.get 、 axios.post 等方法。接下来，我们就可以编写 demo 来测试下我们的成果。

7. demo编写

在 examples 目录下创建 expandInterface 目录，在 expandInterface 目录下创建 index.html :

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>expandInterface demo</title>
  </head>
  <body>
    <script src="/__build__/expandInterface.js"></script>
  </body>
</html>

接着再创建 app.ts 作为入口文件：

 import axios from "src/axios";


axios({
  url: '/api/expandInterface/post',
  method: 'post',
  data: {
    msg: 'hi'
  }
})

axios.request({
  url: '/api/expandInterface/post',
  method: 'post',
  data: {
    msg: 'hello'
  }
})

axios.get('/api/expandInterface/get')

axios.options('/api/expandInterface/options')

axios.delete('/api/expandInterface/delete')

axios.head('/api/expandInterface/head')

axios.post('/api/expandInterface/post', { msg: 'post' })

axios.put('/api/expandInterface/put', { msg: 'put' })

axios.patch('/api/expandInterface/patch', { msg: 'patch' })

接着在 server/server.js 添加新的接口路由：

 // 扩展接口
router.get("/api/expandInterface/get", function(req, res) {
  res.json({
    msg: "hello world"
  });
});

router.options("/api/expandInterface/options", function(req, res) {
  res.end();
});

router.delete("/api/expandInterface/delete", function(req, res) {
  res.end();
});

router.head("/api/expandInterface/head", function(req, res) {
  res.end();
});

router.post("/api/expandInterface/post", function(req, res) {
  res.json(req.body);
});

router.put("/api/expandInterface/put", function(req, res) {
  res.json(req.body);
});

router.patch("/api/expandInterface/patch", function(req, res) {
  res.json(req.body);
});

最后在根目录下的 index.html 中加上启动该 demo 的入口：

 <li><a href="examples/expandInterface">expandInterface</a></li>

OK,我们在命令行中执行：

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

接着我们打开 chrome 浏览器，访问 http://localhost:8000/ 即可访问我们的 demo 了，我们点击 expandInterface ，通过 F12 的 network 部分我们可以看到所有的请求都已正常发出：

OK，接口扩展我们就已经实现了。

（完）

查看更多关于使用Typescript重构axios(十一)——接口扩展的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did223427
  阅读：76次

上一篇： 使用Typescript重构axios(十三)——让响应数据支持泛型

下一篇：使用Typescript重构axios(二)——项目起手，跑通流程

相关资讯