vue3 通用请求拦截axios（接口调用函数）

 

 调用接口的时候

  const documentPublishFn = async () => {
    showElLoading();
    let pam = {
      documentInfoId: currentData.value.id,
    };

    const [err, res] = await promiseToArr(documentPublishApi(pam));
    showElLoading(false);
    if (err) return ElMessage.error(err.message || '发布失败');
    return ElMessage.success(res.message || '发布成功');
  };

 login.js 文件

import $axios from './axios.js';

//登录
export const loginApi = (params) => {
  return $axios.post(`/ndm/login`, params);
};

 axios.js 文件

import Axios from 'axios';
import { ElMessage } from 'element-plus';
import store from '@/store/index';

const baseURL = import.meta.env.VITE_BASEURL;
const axios = Axios.create({
  baseURL,
  timeout: 20000, // 请求超时 20s
});

// 前置拦截器（发起请求之前的拦截）
axios.interceptors.request.use(
  (config) => {
    config.headers['token'] = store.state.token;
    return config;
  },
  (error) => {
    return Promise.reject(error);
  },
);

// 后置拦截器（获取到响应时的拦截）
axios.interceptors.response.use(
  (response) => {
    /**
     * 根据你的项目实际情况来对 response 和 error 做处理
     * 这里对 response 和 error 不做任何处理，直接返回
     */
    const { headers, data } = response;
    const { code } = response.data;
    const contentType = headers['content-type'];
    if (contentType.includes('force-download')) {
      let obj = {
        code: 200,
        data: { headers, data },
        message: '',
      };
      return obj;
    }

    if (code === 200) {
      return response.data;
    } else {
      return Promise.reject(response.data);
    }
  },
  (error) => {
    if (error.response && error.response.data) {
      const code = error.response.status;
      const msg = error.response.data.message;
      ElMessage.error(`Code: ${code}, Message: ${msg}`);
      console.error(`[Axios Error]`, error.response);
    } else {
      ElMessage.error(`${error}`);
    }
    return Promise.reject(error);
  },
);

export default axios;

上面用到的工具点击进入工具函数https://blog.csdn.net/qq_39523111/article/details/128440321