vue3+ts+axios请求封装使用

请求封装

实际使用中可以根据项目修改，比如RESTful api中可以自行添加put和delete请求,ResType也可以根据后端的通用返回值动态的去修改

//http.ts
import axios from "axios"
import NProgress from "nprogress"
import type {
      App } from "vue"
// const CancelToken = axios.CancelToken
// const source = CancelToken.source()

// 设置请求头和请求路径
axios.defaults.baseURL = "/api"
axios.defaults.timeout = 10000
axios.defaults.headers.post["Content-Type"] = "application/json;charset=UTF-8"
axios.interceptors.request.use(
  (config) => {
     
    const token = window.sessionStorage.getItem("token")
    if (token) {
     
      config.headers.token = token
    }
    return config
  },
  (error) => {
     
    return error
  }
)
// 响应拦截
axios.interceptors.response.use((res) => {
     
  if (res.data.code === 111) {
     
    sessionStorage.setItem("token", "")
    // token过期操作
  }
  return res
})

interface ResType<T> {
     
  code: number
  data?: T
  msg: string
  err?: string
}
interface Http {
     
  get<T>(url: string, params?: unknown): Promise<ResType<T>>
  post<T>(url: string, params?: unknown): Promise<ResType<T>>
  upload<T>(url: string, params: unknown): Promise<ResType<T>>
  download(url: string): void
}

const http: Http = {
     
  get(url, params) {
     
    return new Promise((resolve, reject) => {
     
      NProgress.start()
      axios
        .get(url, {
      params })
        .then((res) => {
     
          NProgress.done()
          resolve(res.data)
        })
        .catch((err) => {
     
          NProgress.done()
          reject(err.data)
        })
    })
  },
  post(url, params) {
     
    return new Promise((resolve, reject) => {
     
      NProgress.start()
      axios
        .post(url, JSON.stringify(params))
        .then((res) => {
     
          NProgress.done()
          resolve(res.data)
        })
        .catch((err) => {
     
          NProgress.done()
          reject(err.data)
        })
    })
  },
  upload(url, file) {
     
    return new Promise((resolve, reject) => {
     
      NProgress.start()
      axios
        .post(url, file, {
     
          headers: {
      "Content-Type": "multipart/form-data" },
        })
        .then((res) => {
     
          NProgress.done()
          resolve(res.data)
        })
        .catch((err) => {
     
          NProgress.done()
          reject(err.data)
        })
    })
  },
  download(url) {
     
    const iframe = document.createElement("iframe")
    iframe.style.display = "none"
    iframe.src = url
    iframe.onload = function () {
     
      document.body.removeChild(iframe)
    }
    document.body.appendChild(iframe)
  }
}
export default http

调用请求

请求的时候需要在泛型中传入返回值data的类型，下面是一个示例请求调用

//login.ts
import http from "@/utils/http"
const res = await http.post<{
        user: UserState; token: string }>(
        "/user/login",
        formData
      )
      if (res.code === 1) {
     
        store.commit("user/setUser", res.data?.user)
        sessionStorage.setItem("token", res.data?.token as string)
      } else {
     
        ElMessage.error(res.msg)
      }