vue使用axios拦截配置(涵盖fecth及多样拦截配置)

本文详细介绍了在Vue项目中如何配置axios和fetch的拦截器,包括post单参数、多参数对象含嵌套、普通get和拼接式get等不同场景的拦截设置,旨在提供实际操作指导,避免代码冗余。
摘要由CSDN通过智能技术生成
import axios from 'axios'
import {
   Message} from 'iview'

let util = {
   };
axios.defaults.withCredentials = true;


util.ajax = axios.create({
   
  // baseURL: ajaxUrl,
  timeout: 120000,
  withCredentials: true
});

axios.interceptors.request.use(
  config => {
   
    config.headers = {
   
      'Content-Type':'application/json'
    };
    return config;
  },
  error => {
   
    return Promise.reject(error)
  }
);

util.request = function (options) {
   
  axios.request({
   
    // baseURL: ajaxUrl,
    withCredentials: true,
    method: options.method || 'post',
    url: `${
   options.url}`,
    headers: {
   'X-Requested-With': 'XMLHttpRequest'},
    params: options.params,
    data: options.data,
    transformRequest: [function (data) {
   
      // 这里可以在发送请求之前对请求数据做处理,比如form-data格式化等,这里可以使用开头引入的Qs(这个模块在安装axios的时候就已经安装了,不需要另外安装)
      if (null !== data && '' !== data && typeof(data) !== 'undefined') {
   
        data = JSON.stringify(data)
      }
      return data
    }],
    timeout: options.timeout || 120 * 1000
  }).then(function (response) {
   
    // 登陆成功
    let responseData = response.data;
    options.success && options.success(responseData)
  }).catch(function (error) {
   
    let response = error.response;
    let errorData = '';
    if (null !== response && '' !== response && typeof(response) !== 'undefined') {
   
      errorData = error.response.data;
      let code = response.status;
      if (code === 401) {
   
        Message.error('登陆会话超时,请重新登录!');
        options.error && options.error(error);
        setTimeout(jumpLogin, 2000);
      } else if (code === 504) {
   
        Message.error('服务器未连接,请重新登录!');
        options.error && options.error(error);
        setTimeout(jumpLogin, 2000);
      } else {
   
        if (null !== errorData && '' 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值