当前位置: 首页> 健康> 美食 > axios和ts的简单使用

axios和ts的简单使用

时间:2025/7/8 11:11:58来源:https://blog.csdn.net/weixin_42400404/article/details/139265587 浏览次数:0次

按照官网的使用案例简单记下笔记

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_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)}
)

这里的ResponseCodeBaseResponse是项目自定义的类型限制,不是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 的基本封装

关键字:axios和ts的简单使用

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: