vue3后台管理框架之axios二次封装_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;