vue 封装一个http.js

import axios from "axios";
import Vue from "vue";
import { message } from "ant-design-vue";


const url= ***;
const token='123456'

const $http = axios.create({
  baseURL: `${url}/api`,
  timeout: 60000,
});

Vue.prototype.$http = $http;

// 拦截处理器
const errorHandler = (error) => {
  if (error.toString().includes("timeout")) {
    message.error("请求超时");
    return Promise.reject(error);
  } else {
    if (error.response) {
      const data = error.response.data;
      if (error.response.status === 403) {
        message.error(data.message);
        logout();
      }
      if (error.response.status === 401) {
        message.destroy();
        message.error("登录过期,请重新登录!");
        accessToken.remove();
        logout();
      }
    }
    return Promise.reject(error);
  }
};
[$http].forEach((item) => {
  // 添加请求拦截器
  item.interceptors.request.use((config) => {
    if (/get/i.test(config.method)) {
      // 判断get请求
      config.params = config.params || {};
      config.params._t = Date.parse(new Date()) / 1000; // 添加时间戳
    }
    config.headers["Authorization"] = `Bearer ${token}`;
    return config;
  }, errorHandler);
 //添加响应拦截器
  item.interceptors.response.use((response) => {
    if (response.status === 401) {
      logout();
    }
    let dataAxios = response.data;
    const { status } = dataAxios;
    if (status !== "complete") {
      message.error(dataAxios.errorMessage || "请求错误!");
      return Promise.reject(dataAxios);
    }
    return dataAxios;
  }, errorHandler);
});

// export { $httpyx };

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容