使用TS对axios进行简单封装

最新推荐文章于 2025-06-23 23:47:41 发布

Get_Obj956

最新推荐文章于 2025-06-23 23:47:41 发布

阅读量790

点赞数 2

CC 4.0 BY-SA版权

文章标签： typescript react.js 前端

本文链接：https://blog.youkuaiyun.com/Get_Obj/article/details/136461594

本文介绍了如何在项目中安装和使用axios库，创建axios实例，以及如何进行基本的封装和添加全局请求和响应拦截器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装axios

npm i axios

2.在合适路径下新建文件（名称可随意），例如可以在项目的src下创建utils文件夹创建request.ts

3.导入axios并创建axios实例

//引入axios
import axios from 'axios'

//使用指定配置创建axios实例
const instance = axios.create({
  // 基础路径
  baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net/',
  // 请求超时时间
  timeout: 5000,
  // ....其他配置
})

基本封装

import axios from 'axios'
import type { AxiosInstance, AxiosRequestConfig } from 'axios'

class Request {
  // axios 实例
  instance: AxiosInstance

  constructor(config: AxiosRequestConfig) {
    this.instance = axios.create(config)
  }
  request(config: AxiosRequestConfig) {
    return this.instance.request(config)
  }
}

export default Request

拦截器封装

// index.ts
constructor(config: AxiosRequestConfig) {
  this.instance = axios.create(config)
  
  this.instance.interceptors.request.use(
    (res: AxiosRequestConfig) => {
      console.log('全局请求拦截器')
      return res
    },
    (err: any) => err,
  )
  this.instance.interceptors.response.use(
    // 因为我们接口的数据都在res.data下，所以我们直接返回res.data
    (res: AxiosResponse) => {
      console.log('全局响应拦截器')
      return res.data
    },
    (err: any) => err,
  )
}