axios 封装及接口管理

utils/request.js 封装 axios , 开发者需要根据后台接口做修改。

service.interceptors.request.use 里可以设置请求头，比如设置 token
config.hideloading 是在 api 文件夹下的接口参数里设置，下文会讲
service.interceptors.response.use 里可以对接口返回数据处理，比如 401 删除本地信息，重新登录

javascript

import axios from "axios";
import store from "@/store";
import { showToast，closeToast } from 'vant';
// 根据环境不同引入不同api地址
import { baseApi } from "@/config";

// create an axios instance
const service = axios.create({
  baseURL: import.meta.env.VITE_APP_API_BASEURL,, // url = base api url + request url
  withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000, // request timeout
});

// request 拦截器 request interceptor
service.interceptors.request.use(
  (config) => {
    // 不传递默认开启loading
    if (!config.hideloading) {
      // loading
    showLoadingToast({
      message: '加载中...',
      forbidClick: true,
      loadingType: 'spinner',
    });
    }
    if (store.getters.token) {
      config.headers["X-Token"] = "";
    }
    return config;
  },
  (error) => {
    // do something with request error
    console.log(error); // for debug
    return Promise.reject(error);
  }
);
// respone拦截器
service.interceptors.response.use(
  (response) => {
    Toast.clear();
    const res = response.data;
    if (res.status && res.status !== 200) {
      // 登录超时,重新登录
      if (res.status === 401) {
        store.dispatch("FedLogOut").then(() => {
          location.reload();
        });
      }
      return Promise.reject(res || "error");
    } else {
      return Promise.resolve(res);
    }
  },
  (error) => {
    closeToast();
    console.log("err" + error); // for debug
    return Promise.reject(error);
  }
);
export default service;

axios 封装及接口管理 ​

axios 封装及接口管理