在开发项目的时候避免不了与后端进行交互,因此我们需要使用axios插件实现发送网络请求。在开发项目的时候
我们经常会把axios进行二次封装。
目的:
1:使用请求拦截器,可以在请求拦截器中处理一些业务(开始进度条、请求头携带公共参数)
2:使用响应拦截器,可以在响应拦截器中处理一些业务(进度条结束、简化服务器返回的数据、处理http网络错误)
在根目录下创建utils/request.ts
1.
// 进行axios的二次封装:主要分为请求与响应拦截器
import axios from 'axios'
// 消息错误提示
import { ElMessage } from 'element-plus'
// 利用axios的对象的create方法,创建一个axios实例,这样可以对axios进行二次封装,可以对axios进行一些配置,比如基础路径以及超时时间
let request = axios.create({
baseURL: import.meta.env.VITE_APP_BASE_API, // 设置axios的默认的baseURL会携带/api
timeout: 5000, // 设置axios的默认的超时时间
})
// request添加请求与响应拦截器
request.interceptors.request.use(
(config) => {
// 在请求发送之前做些什么
// config.headers['token'] = 'xxx'
return config
},
(error) => {
// 对请求错误做些什么
return Promise.reject(error)
},
)
// 响应拦截器
request.interceptors.response.use(
(response) => {
// 对响应数据做点什么
return response.data
},
(error) => {
// 失败回掉处理相关http状态码
// 定义一个变量:存储错误信息
let message = ''
let status = error.response.status
switch (status) {
case 401:
message = 'token过期'
break
case 403:
message = '无权访问'
break
case 404:
message = '请求地址错误'
break
case 500:
message = '服务器出现问题'
break
default:
message = '网络出现问题'
break
}
ElMessage({
message,
type: 'error',
duration: 3000,
})
},
)
// 对外暴露request
export default request;