vue3后台管理框架之axios二次封装

在开发项目的时候避免不了与后端进行交互,因此我们需要使用axios插件实现发送网络请求。在开发项目的时候

我们经常会把axios进行二次封装。

目的:

1:使用请求拦截器，可以在请求拦截器中处理一些业务(开始进度条、请求头携带公共参数)

2:使用响应拦截器，可以在响应拦截器中处理一些业务(进度条结束、简化服务器返回的数据、处理http网络错误)

安装依赖

pnpm add axios@0.21.3 -S

在根目录下创建utils/request.ts

import axios from "axios";import { ElMessage } from "element-plus";//创建axios实例const request = axios.create({baseURL: import.meta.env.VITE_APP_BASE_API,timeout: 5000})//请求拦截器request.interceptors.request.use(config => {return config;});//响应拦截器request.interceptors.response.use((response) => {return response.data;}, (error) => {//处理网络错误let msg = '';const status = error.response.status;switch (status) {case 401:msg = "token过期";break;case 403:msg = '无权访问';break;case 404:msg = "请求地址错误";break;case 500:msg = "服务器出现问题";break;default:msg = "无网络";}ElMessage({type: 'error',message: msg})return Promise.reject(error);});export default request;