ts-axios封装

index.ts封装

import axios  from 'axios'
import type { AxiosInstance, AxiosError,InternalAxiosRequestConfig,AxiosResponse,AxiosRequestConfig } from 'axios'
import {ElMessage} from 'element-plus'


const URL:string = ""

enum RequestEnums {
  TIMEOUT = 20000,
  OVERDUE = 600, //登录失败
  FAIL = 999, //请求失败
  SUCCESS = 200, //登录成功的code
}


const instance:AxiosInstance = axios.create({
  baseURL:"/app",
  timeout:500000
})
instance.interceptors.request.use((config:InternalAxiosRequestConfig)=>{
  const token = localStorage.getItem("token")
   if(token){
    config.headers.Authorization = "Bearer " + token
   }
  return config
},(error:AxiosError)=>{
  return Promise.reject(error)
})

instance.interceptors.response.use((
  response:AxiosResponse
)=>{
  console.log(response);
const { status, data, message} = response.data
if(status == 200){
  return data
}else if(status == 1000){
  ElMessage.error("没有登录")
}else{
  ElMessage.error(message)
}
return Promise.reject(new Error(message))
},(error:AxiosError)=>{
  let message = ""
  let Status= error.response?.status
  if(Status){
    switch(Status){
      case 401:
        message = "token过期"
        break
      case 403:
        message = "无权访问"
        break
      case 404:
        message = "请求地址错误"
        break
      case 500:
        message = "服务器出现问题"
        break
      default:
        message = "其他错误"
    }
  }
  ElMessage.error(message)
  return Promise.reject(error)
})

const http = {
  get<T = any>(url:string,config?:AxiosRequestConfig):Promise<T>{
    return instance.get(url,config)
  },

  post<T=any>(url: string, data?: object, config?: AxiosRequestConfig): Promise<T> {
    return instance.post(url, data, config)
  }

 
}
 
 export default http
 

使用

import http from "@/request"
interface Result <T=any>{
  dept_names:number | null,
  message:string,
  timestamp:string,
  roleInfos:T,
  fullname:string | null,
}
 http.get< Result >("/cyber/user/info").then(res =>{
        console.log("res=",res);
        const store = useUserStore()
        let isShiBM = false
        for (let i in res.roleInfos) {
          let role = res.roleInfos[I]
          if (role.code == 'BMRY') { 
              for (let j in role.info_list) {
                  if (role.info_list[j].org_id === 0) {
                      isShiBM = true
                      break
                  }
              }
              break
          }
         }
        store.changeUserInfo(res,res.fullname,res.roleInfos,isShiBM)
        next()
       })

对业务接口的二次封装

WeChatabf46f9cc56d854a51669ade72875f6d.jpg

index.ts文件

// 用户有关的接口
import  http  from '@/request/index';
import type { Result } from "./types"

export function getUserInfo() {
return http.get<Result>("/cyber/user/info");
}

types.ts文件

// 用户有关的类型定义
export interface Result <T=any>{
 dept_names:number | null,
 message:string,
 timestamp:string,
 roleInfos:T,
 fullname:string | null,
}

具体使用

import { getUserInfo } from "@/assets/api/user"
router.beforeEach(async (to,from,next)=>{
  console.log(to.name);
    let token = localStorage.getItem("token")
    if(token){
      //  http.get<Result>("/cyber/user/info").then(res =>{
      //   console.log("res=",res);
      //   const store = useUserStore()
      //   let isShiBM = false
      //   for (let i in res.roleInfos) {
      //     let role = res.roleInfos[i]
      //     if (role.code == 'BMRY') { //部门人员
      //         for (let j in role.info_list) {
      //             if (role.info_list[j].org_id === 0) { //市级部门人员(里面的市教育人的角色)
      //                 isShiBM = true
      //                 break
      //             }
      //         }
      //         break
      //     }
      //    }
      //   store.changeUserInfo(res,res.fullname as string,res.roleInfos,isShiBM)
      //   next()
      //  })
      let res = await getUserInfo()
         console.log("66666=",res);
        const store = useUserStore()
        let isShiBM = false
        for (let i in res.roleInfos) {
          let role = res.roleInfos[i]
          if (role.code == 'BMRY') { //部门人员
              for (let j in role.info_list) {
                  if (role.info_list[j].org_id === 0) { //市级部门人员(里面的市教育人的角色)
                      isShiBM = true
                      break
                  }
              }
              break
          }
         }
        store.changeUserInfo(res,res.fullname as string,res.roleInfos,isShiBM)
        next()
    }
})