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_APItimeout: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.statusswitch(){case 401:message = 'token过期'breakcase 403:message = '没有权限'breakcase 404:message = '请求地址错误'breakcase 500:message = '服务器问题'breakdefault: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: stringpassword: string
}
interface dataType {token: string
}
//登录返回接口数据
export interface loginResponseData {code: numberdata: dataType
}
//用户信息接口数据
interface userinfo {userId: numberavatar: stringusername: stringpassword: stringdesc: stringroles: string[]buttons: string[]routes: string[]token: string
}
interface user {checkUser: userinfo
}
export interface userResponseData {code: numberdata: user
}
使用
imp {reLogin} from 'api/user/index'reLogin({username:'',password:''}).then((res)=>{ cl(res)})配置路由初始化........
