axios 二次封装、请求拦截、响应拦截

骑猪看日落 2021-09-19 00:12 660阅读 0赞

实际开发中，直接用axios的api方法比较麻烦，二次封装一下，要好用很多  
**请求拦截**：就是调接口之前，可以添加一些请求配置，headers token等等  
**响应拦截**：就是服务器返回之后，可以根据约定的状态，做一些全局的提示等的  
完整代码：

import axios from "axios";
    import qs from "qs";
    import { Message } from "element-ui";
    import router from "@/router";
    const ajax = axios.create({
      baseURL: process.env.VUE_APP_BASE_URL,
      timeout: 50000,
      withCredentials: false,
      headers: {
        "Content-Type": "application/json;charset=utf-8"
      }
    });
    // 请求拦截
    ajax.interceptors.request.use(
      config => {
        // 在请求头添加token
        config.headers["access-token"] = localStorage.getItem("token");
        return config;
      },
      error => {
        console.error("请求拦截捕获到错误", error);
      }
    );
    // 响应拦截
    ajax.interceptors.response.use(
      res => {
        if (res.status === 200) {
          if (res.data.code === 200) {
            return res;
          } else if ([10006, 10007].includes(res.data.code)) {
            // 登录失效
            Message.closeAll();
            Message.error("登录已过期");
            router.push({ name: "login" });
          } else {
            Message.error(res.data.message);
            return res;
          }
        } else {
          Message.error("服务器错误");
          return;
        }
      },
      error => {
        return Promise.reject(error);
      }
    );
    export default {
      get: (urlName = "", params = {}, config = {}) => {
        return ajax
          .get(urlName, { params, ...config })
          .then(res => {
            return res.data;
          })
          .catch(error => {
            throw new Error(error);
          });
      },
      // json格式的post
      post: (urlName = "", params = {}, config = {}) => {
        return ajax
          .post(urlName, params, config)
          .then(res => {
            return res.data;
          })
          .catch(error => {
            throw new Error(error);
          });
      },
      // form格式的post
      postForm: (urlName = "", params = {}, config = {}) => {
        return ajax
          .post(urlName, qs.stringify(params), {
            ...config,
            headers: {
              "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
            }
          })
          .then(res => {
            return res.data;
          })
          .catch(error => {
            throw new Error(error);
          });
      }
    };