用v3和ts快速封装一个的axios

 

封装一个简单的axios,以下是request文件代码:

import { useUserStore } from '@/stores'
import router from '@/router'
//在axios中导入Method
import axios, { type Method } from 'axios'

// 1. 新 axios 实例，基础配置
const baseURL = '基地址'
const instance = axios.create({
  baseURL,
  timeout: 10000
})

// 2. 请求拦截器，携带 token
instance.interceptors.request.use(
  (config) => {
    const store = useUserStore()
 

    if (store.user?.token && config.headers) {
      config.headers['Authorization'] = `Bearer ${store.user?.token}`

    }

    return config
  },
  (err) => Promise.reject(err)
)

// 3. 响应拦截器，剥离无效数据，401 拦截
instance.interceptors.response.use(
  (res) => {
    // 后台约定，响应成功，但是 code 不是 10000，是业务逻辑失败
    if (res.data?.code !== 10000) {
      return Promise.reject(res.data)
    }
    // 业务逻辑成功，返回响应数据，作为 axios 成功的结果
    return res.data
  },
  (err) => {
    if (err.response.status === 401) {
      // 删除用户信息
      const store = useUserStore()
      store.delUser()
      // 跳转登录，带上接口失效所在页面的地址，登录完成后回跳使用
      router.push(`/login?returnUrl=${router.currentRoute.value.fullPath}`)
    }
    return Promise.reject(err)
  }
)
const request = <T>(
  url: string,
  method: Method = 'get',
  submitData?: object
) => {
  // return instance.request<T, { code: number; message: string; data: T }>({
  return instance<T, { code: number; data: T; message: string }>({
    url,
    method,
    // [method.toLowerCase() === 'get' ? 'params' : 'data']: submitData
    // data, params
    //toUpperCase将小写字母转换成大写
    [method.toUpperCase() === 'GET' ? 'params' : 'data']: submitData
  })
}

export { baseURL, instance, request }

1. 首先导入了 useUserStore 和 router，它们可能是你项目中的自定义模块。

2. 导入了 axios 和 Method（来自 axios 库的类型定义）。axios 是一个 HTTP 客户端库，Method 是一个用于描述 HTTP 请求方法的类型。

3. 创建了一个新的 Axios 实例 instance，并配置了基础的请求设置，包括 baseURL 和 timeout（超时时间）。

4. 添加了一个请求拦截器，用于在每个请求中携带 token。在请求被发送之前，会调用这个拦截器的回调函数。在回调函数中，首先获取了 useUserStore 的实例，并检查是否存在用户的 token。如果存在，则将 token 添加到请求的 Authorization 头部中。

5. 添加了一个响应拦截器，用于处理响应数据。在拦截器的回调函数中，首先检查响应的 code 是否为 10000。如果不是，表示业务逻辑失败，将会通过 Promise.reject 抛出一个错误，这样调用该请求的代码可以通过 catch 方法来处理该错误。如果 code 是 10000，表示业务逻辑成功，将会将响应数据作为 Axios 请求的成功结果返回。

6. 如果出现错误，响应拦截器中的回调函数会被调用。如果错误的 HTTP 状态码为 401（未授权），则会删除用户信息并将用户重定向到登录页面，并在重定向时携带当前页面的地址，以便在登录后回跳到原来的页面。

7. request 函数是一个封装了 Axios 请求的函数，用于发送具体的请求。它接受三个参数：url（请求的 URL 地址），method（请求方法，默认为 'get'），submitData（要提交的数据，可选）。在函数内部，使用 instance.request 方法发送请求，并根据请求方法动态选择是将数据放在 params（GET 请求）还是 data（POST 请求）中。

8. 最后，通过 export 将 baseURL、instance 和 request 导出，以便在其他文件中使用。

总的来说，这段代码封装了一个基于 Axios 的 HTTP 请求模块，提供了请求拦截器、响应拦截器和发送请求的方法，使得在项目中发送 HTTP 请求更加方便和统一化。