Vue企业级项目开发axios

axios二次封装

import axios from 'axios'
导入element-plus的信息弹窗
imort {elMessage} from 'element-plus'

//利用axios的create方法创建实例，配置默认请求头和请求超时时间
const request = axios.create({
    url:'/api',可以使用已经配置好的环境变量import.meta.env.VITE_APP_BASE_API
    timeout:4000,
})

//配置axios的请求拦截器和响应拦截器
request.interceptors.request((config)=>{
//可以利用config配置请求头
    return config
})
//配置axios响应拦截器
request.interceptors.response((response)=>{
//简化响应数据
return response.data
},(error)=>{
  //配置错误返回，导入element-plus的信息弹窗
    let message=''
    let status=error.response.status
    switch(){
    case 401:
        message = 'token过期'
        break
      case 403:
        message = '没有权限'
        break
      case 404:
        message = '请求地址错误'
        break
      case 500:
        message = '服务器问题'
        break
      default:
        message = '网络错误'
        break
}
elMessage({
type: 'error',
      message,
})
return Promise.reject(error)
})

//向外暴露
export default request

使用

import request from 'request.ts'
import {onMounted} from 'vue'
onMounted(()=>{
    request({
    url:'/user/login',
    method:'post',
    data:{
    username:''
    password:''
}
}).then((res)=>{
cl(res)
})
})

API接口统一管理

src/api/user/index.ts

// 引入二次封装的axios
import request from '@/utils/request'
// 引入ts接口
import type { loginForm, loginResponseData, userResponseData } from './type'
// 统一管理API URL的枚举
enum API {
  LOGIN_URL = '/user/login',
  USERINFO_URL = '/user/info',
}
//暴露请求函数
//登录接口
export const reLogin = (data: loginForm) =>
  request.post<any, loginResponseData>(API.LOGIN_URL, data)
//获取用户信息
export const reUserInfo = () =>
  request.get<any, userResponseData>(API.USERINFO_URL)

配置当前文件下的type接口

//登录请求接口数据
export interface loginForm {
  username: string
  password: string
}
interface dataType {
  token: string
}
//登录返回接口数据
export interface loginResponseData {
  code: number
  data: dataType
}
//用户信息接口数据
interface userinfo {
  userId: number
  avatar: string
  username: string
  password: string
  desc: string
  roles: string[]
  buttons: string[]
  routes: string[]
  token: string
}
interface user {
  checkUser: userinfo
}
export interface userResponseData {
  code: number
  data: user
}

使用

imp {reLogin} from 'api/user/index'

reLogin({username:'',password:''}).then((res)=>{ cl(res)})

配置路由初始化........