Vue3-Axios二次封装与Api接口统一管理

一、安装axios

npm i axios

二、创建utils工具文件夹

创建request.ts文件

import axios from 'axios'
//引入element-plus消息提示
import { ElMessage } from 'element-plus'
//引入用户相关的仓库
import useUserStore from '@/store/modules/user'
//使用axios对象create方法,创建axios实例(其他配置:基础路径、超时时间)
const request = axios.create({//基础路径baseURL:'http://127.0.0.1:3007',timeout: 5000, 
})
//添加请求与响应拦截器
request.interceptors.request.use((config) => {//获取用户相关的小仓库:获取仓库内部token,登录成功以后携带给服务器const userStore = useUserStore()if (userStore.token) {config.headers.token = userStore.token}//config配置对象,headers属性请求头会给服务器端携带公共参数//返回配置对象return config
},(error)=>{//对请求错误做什么return Promise.reject(error)
})
//响应拦截器
request.interceptors.response.use((response) => {//成功回调//简化数据return response.data},(error) => {//失败回调:处理http网络错误//定义一个变量:存储网络错误信息let message = ''//http状态码const status = error.response.statusswitch (status) {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

三、Api接口统一管理

创建api文件夹

创建user文件夹-1.创建type.ts文件定义数据类型

//用户登录接口携带参数的ts类型
export interface loginFormData {username: stringpassword: string
}

2.创建login.ts文件

import request from '@/utils/request'
import type {loginFormData} from './type'
// 登录
export const login = (data:loginFormData)=> {const {account,password} = datareturn request({url: '/api/login',method: 'POST',data: {account,password}})
}