axios和ts的简单使用

按照官网的使用案例简单记下笔记
1：安装

1. npm install axios

复制代码

2：案例

一个简单的config配置信息

1. // 发起一个post请求
2. axios({
3.   method: 'post',
4.   url: '/user/12345',
5.   data: {
6.     firstName: 'Fred',
7.     lastName: 'Flintstone'
8.   }
9. });

复制代码

case 

1. // 在 node.js 用GET请求获取远程图片
2. axios({
3.   method: 'get',
4.   url: 'http://bit.ly/2mTM3nY',
5.   responseType: 'stream'
6. })
7.   .then(function (response) {
8.     response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
9.   });

复制代码

上面都是官网的案例
在实际的项目中，在使用axios哀求时，都会进行数据封装。
3：创建实例

封装一些耦合度高的哀求配置
config.ts文件
封装一个底子的哀求头配置，使用axios中内置的ts类型 AxiosRequestConfig属性限制

1. import { API_BASE_URL } from '@/utils/env'
2. import { AxiosRequestConfig } from 'axios'
4. const baseURL = API_BASE_URL
6. const axiosConfig: AxiosRequestConfig = {
7.   baseURL,
8.   // 请求超时时间
9.   timeout: 30 * 1000,
10.   // 跨域是否带token
11.   withCredentials: true,
12.   showMessageOnReject: true,
13. }
14. export default axiosConfig

复制代码

创建实例

1. import config from './config'
2. const axiosInstance = axios.create(config)

复制代码

4：发起哀求前的处理

1. axiosInstance.interceptors.request.use(
2.   (config) => {
3.     const token = getToken()
4.     if (token) {
5.       ;(config.headers as AxiosRequestHeaders).Authorization = `Bearer ${token}`
6.       ;(config.headers as AxiosRequestHeaders)['X-ECAPI-UserAgent'] = getUserAgent()
7.     }
8.     return config
9.   },
10.   (error) => {
11.     return Promise.reject(error)
12.   }
13. )

复制代码

在发起哀求前，添加headers,配置身份信息
在哀求头部添加UserAgent：X-ECAPI-UserAgent
   在使用Akamai的API时，通常需要设置X-ECAPI-UserAgent头部来标识API的调用者。这样做可以帮助Akamai辨认是谁在调用API，并可能用于日记记录或者访问控制。
   5：接口返回值

1. // @TODO: 两处reject的reason做个包装，通过一个标识符，使得业务代码可以区分走的是哪个reject
2. axiosInstance.interceptors.response.use(
3.   (res: AxiosResponse<BaseResponse>) => {
4.     console.log('router', router)
5.     console.log('location.href', location.href)
6.     if (res.data.code !== ResponseCode.Success) {
7.       // 2. HTTP状态码200,但业务code !== ResponseCode.Success, promise 会被 reject
8.       if (res.data.code === ResponseCode.InvalidToken) {
9.         // 业务代码
10.       } else if (res.data.code === ResponseCode.appDisabled) {
11.         // 业务代码
12.         router.push('/404')
13.       } else {
14.        // 业务代码
15.       }
16.       return Promise.reject(res)
17.     }
18.     // 1. 当且仅当业务code === ResponseCode.Success的情况下, promise 才会被 resolve
19.     return res
20.   },
21.   (error: AxiosError) => {
22.     // 3. HTTP状态码非200 || 网络异常 || 其它未被捕获的错误, promise会被 reject
23.     if (error.config && error.config.showMessageOnReject) {
24.       if (error.response?.status === 500) {
25.         Toast('服务异常，请稍后重试')
26.       } else {
27.         Toast('网络异常，请稍后重试')
28.       }
29.     }
30.     return Promise.reject(error)
31.   }
32. )

复制代码

这里的ResponseCode和BaseResponse是项目自界说的类型限制，不是axios中内置的；
6：AbortController的简单先容

这里有一个中止哀求的方法，使用AbortController，在网上看到别人说的使用方法：
熟悉 AbortController控制器对象 及其应用-CSDN博客
案例

1. type EnhancedPromise<T> = Promise<T> & {
2.   abortController: AbortController
3. }
5. export const get = (url: string, params: Recordable = {}, config?: AxiosRequestConfig) => {
6.   const controller = new AbortController()
7.   const promise = new Promise((resolve, reject) => {
8.     axiosInstance
9.       .get<BaseResponse, AxiosResponse<BaseResponse, Recordable>, Recordable>(url, {
10.         params,
11.         signal: controller.signal,
12.         ...config,
13.       })
14.       .then((res) => {
15.         resolve(res)
16.       })
17.       .catch((err: AxiosError) => {
18.         reject(err)
19.       })
20.   }) as EnhancedPromise<AxiosResponse<BaseResponse, Recordable>>
21.   promise.abortController = controller
22.   return promise
23. }
25. export const post = (url: string, data: Recordable = {}, config?: AxiosRequestConfig) => {
26.   const controller = new AbortController()
27.   const promise = new Promise((resolve, reject) => {
28.     axiosInstance
29.       .post<BaseResponse, AxiosResponse<BaseResponse, Recordable>, Recordable>(url, data, {
30.         signal: controller.signal,
31.         ...config,
32.       })
33.       .then((res) => {
34.         resolve(res)
35.       })
36.       .catch((err: AxiosError) => {
37.         reject(err)
38.       })
39.   }) as EnhancedPromise<AxiosResponse<BaseResponse, Recordable>>
40.   promise.abortController = controller
41.   return promise
42. }

复制代码

覆盖axios原有的post和get方法
7：使用

7.1 没有覆盖post和get方法的使用方式

使用axios原有的post和get方式发起哀求

1. import request from '@/request'
3. // 查询
5. export const findCategoryTree = ({ categoryId = 0 }: Recordable) => {
7.   return request.post(`/manager`, { categoryId })
9. }

复制代码

7.2覆盖了post和get方法的使用方式 

1. import { get, post } from '@/http'
2. import { AxiosRequestConfig } from 'axios'
4. // 短信验证码登录
5. export const signin = (data: Recordable, config?: AxiosRequestConfig) => {
6.   return post(`/member/login`, data, config)
7. }

复制代码

8：typescript的先容

axios提供的内置类型声明，查看路径node_modules/axios/index.d.ts

1. import axios, { AxiosRequestConfig, AxiosResponse, AxiosError, AxiosRequestHeaders } from 'axios'

复制代码

• AxiosResponse：接口响应值类型限制
  
• AxiosError：接口响应失败情况下的类型限制处理
  
• AxiosRequestHeaders 接口哀求头类型限制
  
• AxiosRequestConfig 接口哀求的基本配置类型限制
  

简单记录下vue3 + axios + ts 的基本封装

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。