美文网首页
vue 封装一个http.js

vue 封装一个http.js

作者: 蜗牛的学习方法 | 来源:发表于2023-12-20 14:04 被阅读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 };
    
    

    相关文章

      网友评论

          本文标题:vue 封装一个http.js

          本文链接:https://www.haomeiwen.com/subject/pcgtndtx.html