按照官网的使用案例简单记下笔记
1：安装
npm install axios2：案例
一个简单的config配置信息
// 发起一个post请求
axios({method: 'post',url: '/user/12345',data: {firstName: 'Fred',lastName: 'Flintstone'}
});case
// 在 node.js 用GET请求获取远程图片
axios({method: 'get',url: 'http://bit.ly/2mTM3nY',responseType: 'stream'
}).then(function (response) {response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))});上面都是官网的案例
在实际的项目中，在使用axios请求时，都会进行数据封装。
3：创建实例
封装一些耦合度高的请求配置
config.ts文件
封装一个基础的请求头配置，使用axios中内置的ts类型 AxiosRequestConfig属性限制
import { API_BASE_URL } from '@/utils/env'
import { AxiosRequestConfig } from 'axios'const baseURL = API_BASE_URLconst axiosConfig: AxiosRequestConfig = {baseURL,// 请求超时时间timeout: 30 * 1000,// 跨域是否带tokenwithCredentials: true,showMessageOnReject: true,
}
export default axiosConfig创建实例
import config from './config'
const axiosInstance = axios.create(config)4：发起请求前的处理
axiosInstance.interceptors.request.use((config) => {const token = getToken()if (token) {;(config.headers as AxiosRequestHeaders).Authorization = `Bearer ${token}`;(config.headers as AxiosRequestHeaders)['X-ECAPI-UserAgent'] = getUserAgent()}return config},(error) => {return Promise.reject(error)}
)在发起请求前，添加headers,配置身份信息
在请求头部添加UserAgent：X-ECAPI-UserAgent
在使用Akamai的API时，通常需要设置
X-ECAPI-UserAgent头部来标识API的调用者。这样做可以帮助Akamai识别是谁在调用API，并可能用于日志记录或者访问控制。
5：接口返回值
// @TODO: 两处reject的reason做个包装，通过一个标识符，使得业务代码可以区分走的是哪个reject
axiosInstance.interceptors.response.use((res: AxiosResponse<BaseResponse>) => {console.log('router', router)console.log('location.href', location.href)if (res.data.code !== ResponseCode.Success) {// 2. HTTP状态码200,但业务code !== ResponseCode.Success, promise 会被 rejectif (res.data.code === ResponseCode.InvalidToken) {// 业务代码} else if (res.data.code === ResponseCode.appDisabled) {// 业务代码router.push('/404')} else {// 业务代码}return Promise.reject(res)}// 1. 当且仅当业务code === ResponseCode.Success的情况下, promise 才会被 resolvereturn res},(error: AxiosError) => {// 3. HTTP状态码非200 || 网络异常 || 其它未被捕获的错误, promise会被 rejectif (error.config && error.config.showMessageOnReject) {if (error.response?.status === 500) {Toast('服务异常，请稍后重试')} else {Toast('网络异常，请稍后重试')}}return Promise.reject(error)}
)这里的ResponseCode和BaseResponse是项目自定义的类型限制，不是axios中内置的；
6：AbortController的简单介绍
这里有一个中止请求的方法，使用AbortController，在网上看到别人说的使用方法：
认识 AbortController控制器对象 及其应用-CSDN博客
案例
type EnhancedPromise<T> = Promise<T> & {abortController: AbortController
}export const get = (url: string, params: Recordable = {}, config?: AxiosRequestConfig) => {const controller = new AbortController()const promise = new Promise((resolve, reject) => {axiosInstance.get<BaseResponse, AxiosResponse<BaseResponse, Recordable>, Recordable>(url, {params,signal: controller.signal,...config,}).then((res) => {resolve(res)}).catch((err: AxiosError) => {reject(err)})}) as EnhancedPromise<AxiosResponse<BaseResponse, Recordable>>promise.abortController = controllerreturn promise
}export const post = (url: string, data: Recordable = {}, config?: AxiosRequestConfig) => {const controller = new AbortController()const promise = new Promise((resolve, reject) => {axiosInstance.post<BaseResponse, AxiosResponse<BaseResponse, Recordable>, Recordable>(url, data, {signal: controller.signal,...config,}).then((res) => {resolve(res)}).catch((err: AxiosError) => {reject(err)})}) as EnhancedPromise<AxiosResponse<BaseResponse, Recordable>>promise.abortController = controllerreturn promise
}
覆盖axios原有的post和get方法
7：使用
7.1 没有覆盖post和get方法的使用方式
使用axios原有的post和get方式发起请求
import request from '@/request'// 查询export const findCategoryTree = ({ categoryId = 0 }: Recordable) => {return request.post(`/manager`, { categoryId })}7.2覆盖了post和get方法的使用方式
import { get, post } from '@/http'
import { AxiosRequestConfig } from 'axios'// 短信验证码登录
export const signin = (data: Recordable, config?: AxiosRequestConfig) => {return post(`/member/login`, data, config)
}8：typescript的介绍
axios提供的内置类型声明，查看路径node_modules/axios/index.d.ts
import axios, { AxiosRequestConfig, AxiosResponse, AxiosError, AxiosRequestHeaders } from 'axios'- AxiosResponse：接口响应值类型限制
-
AxiosError：接口响应失败情况下的类型限制处理
-
AxiosRequestHeaders 接口请求头类型限制
-
AxiosRequestConfig 接口请求的基本配置类型限制
简单记录下vue3 + axios + ts 的基本封装
