vue封装的请求拦截器

这段代码展示了如何在Vue应用中配置和使用axios库进行HTTP请求。它设置了请求的基础URL,根据环境变量调整,并添加了请求和响应拦截器。请求拦截器用于在每个请求中添加token和userId,而响应拦截器处理错误并显示警告消息。
摘要由CSDN通过智能技术生成
import axios from "axios"; //引入axios
import QS from "qs";
import Vue from "vue";
import { Loading } from 'element-ui';
import i18n from "@/locales"

var loading = null;

if (localStorage.getItem("URL") == null) {
  localStorage.setItem("URL", "http://linkstec.ltd:3000");
  if (process.env.NODE_ENV !== "production") {
    localStorage.setItem("URL", "http://localhost:3000");
  }
}

const service = axios.create({
  baseURL: localStorage.getItem(".URL")
  headers: { "Content-Type": "application/json;charset=UTF-8" },"multipart/form-data;charset=UTF-8"
});

service.defaults.withCredentials = true;

// request拦截器
service.interceptors.request.use(
  (config) => {
    if (sessionStorage.getItem("TOKEN") != null) {
      config.headers.common["token"] = sessionStorage.getItem("TOKEN");
      config.headers.common["userId"] = sessionStorage.getItem("USERID");
    }
    //这里是每个请求的设置,比如每个请求都携带一个token,或者当为post请求时,引入qs格式化参数。

    loading = Loading.service({
      lock: true,
      text: i18n.t("LOADING"),
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    });

    return config;
  },
  (error) => {
    console.log("请求失败:" + error);
    loading.close();
    Promise.reject(error);
  }
);

// response 拦截器
service.interceptors.response.use(
  (response) => {
    loading.close();
    if (response.data.code == "0") {
      return response.data;
    } else {
      Vue.prototype.showCommonAlert(response.data.msg);
      return Promise.reject(response);
    }
  },
  (error) => {
    loading.close();
    if (error.response == null) {
      Vue.prototype.showCommonAlert("WRN0004");
    }
    Vue.prototype.showCommonAlert(error.response.data.msg);
    return Promise.reject(error);
  }
);

export default service;

export function get(url, params, config) {
  params = Object.assign({}, params, {});
  if (config == null || config == undefined) {
    config = { "Content-Type": "application/json;charset=UTF-8" };
  }
  return new Promise((resolve, reject) => {
    service
      .get(url, { params }, config)
      .then((res) => {
        resolve(res);
      })
      .catch((err) => {
        reject(err);
      });
  });
}

export function post(url, params, config) {
  if (params instanceof FormData) {
  
  } else {
    params = Object.assign({}, params, {
     
    });
  }
  if (config == null) {
    config = { "Content-Type": "application/json;charset=UTF-8" };
    params = QS.parse(params);
  }
  return new Promise((resolve, reject) => {
    service
      .post(url, params, config)
      .then((res) => {
        resolve(res);
      })
      .catch((err) => {
        reject(err);
      });
  });
}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值