【web】3、封装axios

1、安装axios

pnpm install axios

2、封装

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

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

目的:

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

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

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

import axios from 'axios';
import { ElMessage } from 'element-plus';
//创建axios实例
let 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 = '',
    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;