axios 封装

1. 先创建 utils 文件夹

2. 创建 request.js

3. 引入 axios

4. 配置 基本路径和超时时间

5. 配置请求拦截和响应拦截

6. 在请求拦截里可以放 loading 和 token

7. 在响应拦截中 可以 清除 loading 还有处理错误编码字典

8. 最后把我们封装的 axios 实例 导出

9. axios 拦截器

   拦截器有两种 一个是请求拦截一个是响应拦截 拦截器不需要手动调用而是每次发送 http 请求的时候都会自动触发 我们一般在请求拦截中 放全局的 loading 和 token 在响应拦截中关闭全局的 loading 和对 token 进行过期处理 还可以处理错误编码字典

10. import axios from "axios";
    import { Toast } from "vant";
    import router from "../router";
    
    const instance = axios.create({
      baseURL: "https://api.it120.cc/small4",
      timeout: 5000,
    });
    
    instance.interceptors.request.use(
      (config) => {
        Toast.loading({
          message: "加载中",
          duration: 0, // toast不消失
        });
        config.headers.Authorization = localStorage.getItem("token");
        //给请求的头信息 配置一个Authorization（这个名字是根据后端给的接口文档定一般叫这个又的时候也叫token）字段是我们的token
    
        return config;
      },
      (err) => {
        Promise.reject(err);
      }
    );
    //请求拦截 请求拦截的成功和失败的回调函数
    
    instance.interceptors.response.use(
      (res) => {
        Toast.clear();
        // if (res.msg == "无效token") router.push("/login");
        // if (res.code == 404) router.push("/notfount");
        //这里的错误编码字典不是固定的需要后端给我们的数据判断
    
        return res;
      },
      (err) => {
        Promise.reject(err);
      }
    );
    //相应拦截的成功和失败
    
    export default instance;