vue 封装一个http.js

2023-12-20  本文已影响0人  蜗牛的学习方法
import axios from "axios";
import Vue from "vue";
import { message } from "@wpg/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 };

上一篇下一篇

猜你喜欢

热点阅读