axios和ts的简单使用
按照官网的使用案例简单记下笔记1：安装
npm install axios 2：案例
一个简单的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_URL
const axiosConfig: AxiosRequestConfig = {
baseURL,
// 请求超时时间
timeout: 30 * 1000,
// 跨域是否带token
withCredentials: 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 会被 reject
if (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 才会被 resolve
return res
},
(error: AxiosError) => {
// 3. HTTP状态码非200 || 网络异常 || 其它未被捕获的错误, promise会被 reject
if (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 = controller
return 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 = controller
return 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
https://img-blog.csdnimg.cn/direct/fd6840896b8c4a1cb17a7e8cdcfb63cb.png
import axios, { AxiosRequestConfig, AxiosResponse, AxiosError, AxiosRequestHeaders } from 'axios'
[*]AxiosResponse：接口响应值类型限制
[*] AxiosError：接口响应失败情况下的类型限制处理
[*] AxiosRequestHeaders 接口哀求头类型限制
[*] AxiosRequestConfig 接口哀求的基本配置类型限制
简单记录下vue3 + axios + ts 的基本封装
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]