经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » TypeScript » 查看文章
TypeScript利用TS封装Axios实战
来源：jb51　　时间：2022/6/27 10:53:44　　对本文有异议

简介

这是TypeScript实战的第三篇文章。前面两篇笔者分别介绍了在Vuex和Pinia中怎么使用TypeScript以及Vuex和Pinia的区别。今天我们再用TypeScript封装一遍Axios。希望能进一步巩固TypeScript的基础知识。

Axios几个常用类型

在使用TypeScript封装Axios之前我们先来看看Axios几个重要的类型。

AxiosRequestConfig

AxiosRequestConfig是我们使用axios发送请求传递参数的类型。当然它也是我们请求拦截器里面的参数类型。

  1. axios(config: AxiosRequestConfig)

可以看到，这个config里面的参数还是挺多的。我们常用的有url、method、params、data、headers、baseURL、timeout。

  1. export interface AxiosRequestConfig {
  2.   url?: string;
  3.   method?: Method;
  4.   baseURL?: string;
  5.   transformRequest?: AxiosTransformer | AxiosTransformer[];
  6.   transformResponse?: AxiosTransformer | AxiosTransformer[];
  7.   headers?: any;
  8.   params?: any;
  9.   paramsSerializer?: (params: any) => string;
  10.   data?: any;
  11.   timeout?: number;
  12.   timeoutErrorMessage?: string;
  13.   withCredentials?: boolean;
  14.   adapter?: AxiosAdapter;
  15.   auth?: AxiosBasicCredentials;
  16.   responseType?: ResponseType;
  17.   xsrfCookieName?: string;
  18.   xsrfHeaderName?: string;
  19.   onUploadProgress?: (progressEvent: any) => void;
  20.   onDownloadProgress?: (progressEvent: any) => void;
  21.   maxContentLength?: number;
  22.   validateStatus?: ((status: number) => boolean) | null;
  23.   maxBodyLength?: number;
  24.   maxRedirects?: number;
  25.   socketPath?: string | null;
  26.   httpAgent?: any;
  27.   httpsAgent?: any;
  28.   proxy?: AxiosProxyConfig | false;
  29.   cancelToken?: CancelToken;
  30.   decompress?: boolean;
  31.   transitional?: TransitionalOptions
  32. }

AxiosInstance

AxiosInstance是我们使用axios实例对象类型。

我们使用axios.create(config?: AxiosRequestConfig)创建出来的对象都是AxiosInstance类型

  1. export interface AxiosInstance {
  2.   (config: AxiosRequestConfig): AxiosPromise;
  3.   (url: string, config?: AxiosRequestConfig): AxiosPromise;
  4.   defaults: AxiosRequestConfig;
  5.   interceptors: {
  6.     request: AxiosInterceptorManager<AxiosRequestConfig>;
  7.     response: AxiosInterceptorManager<AxiosResponse>;
  8.   };
  9.   getUri(config?: AxiosRequestConfig): string;
  10.   request<T = any, R = AxiosResponse<T>> (config: AxiosRequestConfig): Promise<R>;
  11.   get<T = any, R = AxiosResponse<T>>(url: string, config?: AxiosRequestConfig): Promise<R>;
  12.   delete<T = any, R = AxiosResponse<T>>(url: string, config?: AxiosRequestConfig): Promise<R>;
  13.   head<T = any, R = AxiosResponse<T>>(url: string, config?: AxiosRequestConfig): Promise<R>;
  14.   options<T = any, R = AxiosResponse<T>>(url: string, config?: AxiosRequestConfig): Promise<R>;
  15.   post<T = any, R = AxiosResponse<T>>(url: string, data?: any, config?: AxiosRequestConfig): Promise<R>;
  16.   put<T = any, R = AxiosResponse<T>>(url: string, data?: any, config?: AxiosRequestConfig): Promise<R>;
  17.   patch<T = any, R = AxiosResponse<T>>(url: string, data?: any, config?: AxiosRequestConfig): Promise<R>;
  18. }

可以发现，我们可以使用axios.create、axios.all、axios.spread方法，但是AxiosInstance 上并没有create、all、spread等方法，那我们的axios到底是什么类型呢？

AxiosStatic

  1. export interface AxiosStatic extends AxiosInstance {
  2.   create(config?: AxiosRequestConfig): AxiosInstance;
  3.   Cancel: CancelStatic;
  4.   CancelToken: CancelTokenStatic;
  5.   isCancel(value: any): boolean;
  6.   all<T>(values: (T | Promise<T>)[]): Promise<T[]>;
  7.   spread<T, R>(callback: (...args: T[]) => R): (array: T[]) => R;
  8.   isAxiosError(payload: any): payload is AxiosError;
  9. }
  10. declare const axios: AxiosStatic;

可以发现，axios其实是AxiosStatic类型，并且继承了AxiosInstance类型。所以是两者的结合。相较axios.create(config?: AxiosRequestConfig)创建出来的实例对象，axios功能是更强大的。

AxiosResponse

AxiosResponse是非常重要的，我们的axios请求返回值类型都是AxiosResponse类型。并且我们可以发现AxiosResponse是一个接口泛型，这个泛型会应用到后端返回的data上。所以这块我们可以根据后端接口返回定义不同的类型传递进去。后面笔者在封装常用方法的时候会细说。

  1. export interface AxiosResponse<T = any>  {
  2.   data: T;
  3.   status: number;
  4.   statusText: string;
  5.   headers: any;
  6.   config: AxiosRequestConfig;
  7.   request?: any;
  8. }

AxiosError

AxiosError这个类型也是我们必须要知道的。在我们响应拦截器里面的错误就是AxiosError类型。

  1. export interface AxiosError<T = any> extends Error {
  2.   config: AxiosRequestConfig;
  3.   code?: string;
  4.   request?: any;
  5.   response?: AxiosResponse<T>;
  6.   isAxiosError: boolean;
  7.   toJSON: () => object;
  8. }

说完了Axios的几个常用类型，接下来我们正式开始使用TS来封装我们的Axios。

基础封装

首先我们实现一个最基本的版本，实例代码如下：

  1. // index.ts
  2. import axios from 'axios'
  3. import type { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
  4.  
  5. class Request {
  6.   // axios 实例
  7.   instance: AxiosInstance
  8.   // 基础配置，url和超时时间
  9.   baseConfig: AxiosRequestConfig = {baseURL: "/api", timeout: 60000}
  10.  
  11.   constructor(config: AxiosRequestConfig) {
  12.     // 使用axios.create创建axios实例
  13.     this.instance = axios.create(Object.assign(this.baseConfig, config))
  14.   }
  15.   // 定义请求方法
  16.   public request(config: AxiosRequestConfig): Promise<AxiosResponse> {
  17.     return this.instance.request(config)
  18.   }
  19. }
  20. export default Request

在实际项目中有了基本的请求方法还是远远不够的，我们还需要封装拦截器和一些常用方法。

拦截器封装

拦截器封装只需要在类中对axios.create()创建的实例调用interceptors下的两个拦截器即可，

实例代码如下：

  1. // index.ts
  2. constructor(config: AxiosRequestConfig) {
  3.   this.instance = axios.create(Object.assign(this.baseConfig, config))
  4.   this.instance.interceptors.request.use(
  5.     (config: AxiosRequestConfig) => {
  6.       // 一般会请求拦截里面加token
  7.       const token = localStorage.getItem("token")
  8.       config.headers["Authorization"] = token;
  9.       
  10.       return config
  11.     },
  12.     (err: any) => {
  13.       return Promise.reject(err)
  14.     },
  15.   )
  16.   this.instance.interceptors.response.use(
  17.     (res: AxiosResponse) => {
  18.       // 直接返回res，当然你也可以只返回res.data
  19.       return res
  20.     },
  21.     (err: any) => {
  22.       // 这里用来处理http常见错误，进行全局提示
  23.       let message = "";
  24.       switch (err.response.status) {
  25.         case 400:
  26.           message = "请求错误(400)";
  27.           break;
  28.         case 401:
  29.           message = "未授权，请重新登录(401)";
  30.           // 这里可以做清空storage并跳转到登录页的操作
  31.           break;
  32.         case 403:
  33.           message = "拒绝访问(403)";
  34.           break;
  35.         case 404:
  36.           message = "请求出错(404)";
  37.           break;
  38.         case 408:
  39.           message = "请求超时(408)";
  40.           break;
  41.         case 500:
  42.           message = "服务器错误(500)";
  43.           break;
  44.         case 501:
  45.           message = "服务未实现(501)";
  46.           break;
  47.         case 502:
  48.           message = "网络错误(502)";
  49.           break;
  50.         case 503:
  51.           message = "服务不可用(503)";
  52.           break;
  53.         case 504:
  54.           message = "网络超时(504)";
  55.           break;
  56.         case 505:
  57.           message = "HTTP版本不受支持(505)";
  58.           break;
  59.         default:
  60.           message = `连接出错(${err.response.status})!`;
  61.       }
  62.       // 这里错误消息可以使用全局弹框展示出来
  63.       // 比如element plus 可以使用 ElMessage
  64.       ElMessage({
  65.         showClose: true,
  66.         message: `${message}，请检查网络或联系管理员！`,
  67.         type: "error",
  68.       });
  69.       // 这里是AxiosError类型，所以一般我们只reject我们需要的响应即可
  70.       return Promise.reject(err.response)
  71.     },
  72.   )
  73. }

在这里我们分别对请求拦截器和响应拦截器做了处理。在请求拦截器我们给请求头添加了token。

在响应拦截器，我们返回了整个response对象，当然你也可以只返回后端返回的response.data，这里可以根据个人喜好来处理。其次对http错误进行了全局处理。

常用方法封装

在基础封装的时候我们封装了一个request通用方法，其实我们还可以更具体的封装get、post、put、delete方法，让我们使用更方便。

并且，我们前面分析到，AxiosResponse其实是一个泛型接口，他可以接受一个泛型并应用到我们的data上。所以我们可以在这里再定义一个后端通用返回的数据类型。

比如假设我们某个项目后端接口不管请求成功与失败，返回的结构永远是code、message、results的话我们可以定义一个这样的数据类型。

  1. type Result<T> = {
  2.   code: number,
  3.   message: string,
  4.   result: T
  5. }

然后传递个各个方法：

  1. public get<T = any>(
  2.   url: string, 
  3.   config?: AxiosRequestConfig
  4. ): Promise<AxiosResponse<Result<T>>> {
  5.   return this.instance.get(url, config);
  6. }
  7. public post<T = any>(
  8.   url: string,
  9.   data?: any,
  10.   config?: AxiosRequestConfig
  11. ): Promise<AxiosResponse<Result<T>>> {
  12.   return this.instance.post(url, data, config);
  13. }
  14. public put<T = any>(
  15.   url: string,
  16.   data?: any,
  17.   config?: AxiosRequestConfig
  18. ): Promise<AxiosResponse<Result<T>>> {
  19.   return this.instance.put(url, data, config);
  20. }
  21. public delete<T = any>(
  22.   url: string,
  23.   config?: AxiosRequestConfig
  24. ): Promise<AxiosResponse<Result<T>>> {
  25.   return this.instance.delete(url, config);
  26. }

这样当我们调用接口的时候就可以看到我们返回的data的类型啦。就是我们定义的Result类型。

所以我们可以直接得到自动提示：

上面调用接口的时候并没有传递接口数据类型，所以我们的result是any类型，要想要每个接口都有类型提示，我们还需要给方法传递泛型。

我们再改进下，我们再定义一个login接口返回值类型loginType

  1. type loginType = {
  2.   token: string;
  3. };

然后再调用方法的地方传递进去，然后我们再看看返回值data的类型。

可以看到他是Result<loginType>类型，这个loginType就是result的类型。

所以我们的result还可以进一步的得到提示

当然每个接口都定义返回值类型固然好，但是会大大加大前端的工作量。我们在写请求方法的时候也可以不传递接口返回值类型，这样result的类型就是any。这个可以根据自身项目需求来选择使用。

看到这小伙伴们是不是都弄懂了呢？如还有疑问欢迎留言。

总结

说了这么多，有些小伙伴们可能有点晕了，下面笔者总结下整个axios的封装。

  1. // index.ts
  2. import axios from "axios";
  3. import type { AxiosInstance, AxiosRequestConfig, AxiosResponse } from "axios";
  4. type Result<T> = {
  5.   code: number;
  6.   message: string;
  7.   result: T;
  8. };
  9. class Request {
  10.   // axios 实例
  11.   instance: AxiosInstance;
  12.   // 基础配置，url和超时时间
  13.   baseConfig: AxiosRequestConfig = { baseURL: "/api", timeout: 60000 };
  14.  
  15.   constructor(config: AxiosRequestConfig) {
  16.     // 使用axios.create创建axios实例
  17.     this.instance = axios.create(Object.assign(this.baseConfig, config));
  18.  
  19.     this.instance.interceptors.request.use(
  20.       (config: AxiosRequestConfig) => {
  21.         // 一般会请求拦截里面加token
  22.         const token = localStorage.getItem("token");
  23.         config.headers["Authorization"] = token;
  24.  
  25.         return config;
  26.       },
  27.       (err: any) => {
  28.         return Promise.reject(err);
  29.       }
  30.     );
  31.  
  32.     this.instance.interceptors.response.use(
  33.       (res: AxiosResponse) => {
  34.         // 直接返回res，当然你也可以只返回res.data
  35.         return res;
  36.       },
  37.       (err: any) => {
  38.         // 这里用来处理http常见错误，进行全局提示
  39.         let message = "";
  40.         switch (err.response.status) {
  41.           case 400:
  42.             message = "请求错误(400)";
  43.             break;
  44.           case 401:
  45.             message = "未授权，请重新登录(401)";
  46.             // 这里可以做清空storage并跳转到登录页的操作
  47.             break;
  48.           case 403:
  49.             message = "拒绝访问(403)";
  50.             break;
  51.           case 404:
  52.             message = "请求出错(404)";
  53.             break;
  54.           case 408:
  55.             message = "请求超时(408)";
  56.             break;
  57.           case 500:
  58.             message = "服务器错误(500)";
  59.             break;
  60.           case 501:
  61.             message = "服务未实现(501)";
  62.             break;
  63.           case 502:
  64.             message = "网络错误(502)";
  65.             break;
  66.           case 503:
  67.             message = "服务不可用(503)";
  68.             break;
  69.           case 504:
  70.             message = "网络超时(504)";
  71.             break;
  72.           case 505:
  73.             message = "HTTP版本不受支持(505)";
  74.             break;
  75.           default:
  76.             message = `连接出错(${err.response.status})!`;
  77.         }
  78.         // 这里错误消息可以使用全局弹框展示出来
  79.         // 比如element plus 可以使用 ElMessage
  80.         ElMessage({
  81.           showClose: true,
  82.           message: `${message}，请检查网络或联系管理员！`,
  83.           type: "error",
  84.         });
  85.         // 这里是AxiosError类型，所以一般我们只reject我们需要的响应即可
  86.         return Promise.reject(err.response);
  87.       }
  88.     );
  89.   }
  90.  
  91.   // 定义请求方法
  92.   public request(config: AxiosRequestConfig): Promise<AxiosResponse> {
  93.     return this.instance.request(config);
  94.   }
  95.  
  96.   public get<T = any>(
  97.     url: string,
  98.     config?: AxiosRequestConfig
  99.   ): Promise<AxiosResponse<Result<T>>> {
  100.     return this.instance.get(url, config);
  101.   }
  102.   public post<T = any>(
  103.     url: string,
  104.     data?: any,
  105.     config?: AxiosRequestConfig
  106.   ): Promise<AxiosResponse<Result<T>>> {
  107.     return this.instance.post(url, data, config);
  108.   }
  109.   public put<T = any>(
  110.     url: string,
  111.     data?: any,
  112.     config?: AxiosRequestConfig
  113.   ): Promise<AxiosResponse<Result<T>>> {
  114.     return this.instance.put(url, data, config);
  115.   }
  116.  
  117.   public delete<T = any>(
  118.     url: string,
  119.     config?: AxiosRequestConfig
  120.   ): Promise<AxiosResponse<Result<T>>> {
  121.     return this.instance.delete(url, config);
  122.   }
  123. }
  124. export default Request;

到此这篇关于TypeScript利用TS封装Axios实战的文章就介绍到这了,更多相关TypeScript封装Axios内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue！

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

TypeScript热门文章

  • TypeScript利用TS封装Axios实战
  • 在Vue3+TypeScript 前端项目中使用事件总线Mitt
  • 在基于vue-next-admin的Vue3+TypeScript前端项目中，为了使用方便全局挂载对象接口
  • TS 基础及在 Vue 中的实践：TypeScript 都发布 5.0 版本啦，现在不学更待何时！
  • websocket4.0+typescript 实现热更新的方法
  • Vue3+TypeScript 项目中，配置 ESLint 和 Prettier
  • TypeScript类型声明书写详解
  • vue + typescript + video.js实现 流媒体播放 视频监控功能
  • 你可能不知道的typescript实用小技巧
  • typescript基本数据类型

    • TypeScript推荐文章

  • Figma数值输入框支持拖拽调整功能实现
  • 前端 Typescript 入门
  • 从零搭建Vue3 + Typescript + Pinia + Vite + Tailwind CSS + Element Plus开发脚手架
  • 使用命令行方式搭建uni-app + Vue3 + Typescript + Pinia + Vite + Tailwind CSS + uv-ui开发脚手架
  • Vite4+Typescript+Vue3+Pinia 从零搭建(7) - request封装
  • [学习笔记]TypeScript查缺补漏（一）：类
  • TS 基础及在 Vue 中的实践：TypeScript 都发布 5.0 版本啦，现在不学更待何时！
  • 在Vue3+TypeScript 前端项目中使用事件总线Mitt
  • Vue3+TypeScript 项目中，配置 ESLint 和 Prettier
  • 项目中使用TypeScript的TodoList实例详解

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号