axios请求的再次封装

import axios from "axios";
import Vue from "vue";
import { baseUrl } from "./assets/js/baseUrl";
import { loading } from "./views/common/Loading";
import { Toast } from "vant";
const instance = axios.create({
  baseURL: baseUrl
});
// 添加请求拦截器
instance.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    let loginToken = sessionStorage.getItem("loginToken_m");
    config.headers.tokenID = loginToken;
    return config;
  },
  function(error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器
instance.interceptors.response.use(
  function(response) {
    // 对响应数据做点什么
    return response;
  },
  function(err) {
    if (err && err.response) {
      switch (
        err.response.status // 请求错误处理
      ) {
        case 400:
          err.message = "请求错误(400)";
          break;
        case 401:
          err.message = "未授权,请重新登录(401)";
          break;
        case 403:
          err.message = "拒绝访问(403)";
          break;
        case 404:
          err.message = "请求出错(404)";
          break;
        case 408:
          err.message = "请求超时(408)";
          break;
        case 500:
          err.message = "服务器错误(500)";
          break;
        case 501:
          err.message = "服务未实现(501)";
          break;
        case 502:
          err.message = "网络错误(502)";
          break;
        case 503:
          err.message = "服务不可用(503)";
          break;
        case 504:
          err.message = "网络超时(504)";
          break;
        case 505:
          err.message = "HTTP版本不受支持(505)";
          break;
        default:
          err.message = `连接出错(${err.response.status})!`;
      }
    } else {
      err.message = "连接服务器失败!"; // 断网处理
    }
    // 对响应错误做点什么
    Toast(err.message);
    return Promise.reject(err);
  }
);
let apiObj = {
  async get(url: string, data = {}) {
    loading.open();
    try {
      let res = await instance.get(url, data);
      loading.close();
      return res;
    } catch (error) {
      loading.close();
    }
  },
  async post(url: string, data = {}, config = {}) {
    loading.open();
    try {
      let res = await instance.post(url, data, config);
      loading.close();
      return res;
    } catch (error) {
      loading.close();
    }
  }
};
Vue.prototype.$http = apiObj;
export { instance };

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值