axios 封装以及拦截器

axios 封装

1. 先创建 utils 文件夹
2. 创建 request.js
3. 引入 axios
4. 配置 基本路径和超时时间
5. 配置请求拦截和响应拦截
6. 在请求拦截里可以放 loading 和 token
7. 在响应拦截中 可以 清除 loading 还有处理错误编码字典
8. 最后把我们封装的 axios 实例 导出

先在src里边创建一个utils文件夹，然后在里边创建一个request.js，最后编写下边的代码
`import axios from "axios";  //引入axios
import { Toast } from "vant";  //引入vant  loading动画
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;`

// 然后在同一级在创建一个api.js文件  用做统一管理请求
import http from "./request";
async function getBanner() {
  let { data } = await http.get("/banner/list");
  return data;
}
// es7处理http请求的方法
//async 函数return的值永远是一个promise对象

// let getBanner = () => {
//   return http.get("/banner/list");
// };
//es6的处理
//没有用async 就相当于是直接把我们的http这个对象return出去

export { getBanner };

axios 拦截器

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