昆明快速做网站,兰州网页设计最新招聘信息,网站开发与技术分析,WordPress 类型 网页在开发项目的时候避免不了与后端进行交互,因此我们需要使用axios插件实现发送网络请求。在开发项目的时候
我们经常会把axios进行二次封装。
目的:
1:使用请求拦截器#xff0c;可以在请求拦截器中处理一些业务(开始进度条、请求头携带公共参数)
2:使用响应拦截器#xf…
在开发项目的时候避免不了与后端进行交互,因此我们需要使用axios插件实现发送网络请求。在开发项目的时候
我们经常会把axios进行二次封装。
目的:
1:使用请求拦截器可以在请求拦截器中处理一些业务(开始进度条、请求头携带公共参数)
2:使用响应拦截器可以在响应拦截器中处理一些业务(进度条结束、简化服务器返回的数据、处理http网络错误)
安装依赖
pnpm add axios0.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;
