Vue项目请求超时处理

现在网页项目大多采用前后端分离模式,这种模式优点有很多,但是也会带来不少问题,比如:请求后端接口时会受网络因素影响,导致请求超时;这就需要我们在请求方法中设置拦截,对请求超时做处理;

下面就是我在项目中使用的axios封装方法,设置网络请超时拦截处理

import axios from "axios";
import { get } from "http";
import { Toast } from 'vant';


// api 路径
// const server = "https://operator-app.funenc.com";
const httpAxios = axios.create();//创建实例
let Config = {
	TIMEOUT: 6000,//设置超时时间为6秒
	baseURL: {
		dev: window.BASEURL_01,
		prod: ''
	}
};
// axios 配置
httpAxios.defaults.timeout = Config.TIMEOUT;
httpAxios.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    if(error.message.includes('timeout')){   // 判断请求异常信息中是否含有超时timeout字符串
      Toast('请求超时,请稍后再试')
      return Promise.reject(error);          // reject这个错误信息
    }
    Toast('网络连接失败,请稍后再试')
    return Promise.reject(error);
  });
export function fetch(url, method = "GET", params, query) {
  if (sessionStorage.app_token && sessionStorage.device_id) {
    httpAxios.defaults.headers["app-token"] = sessionStorage.app_token;
  }
  return new Promise((resolve, reject) => {
    httpAxios({
        method: method,
        url: global["G_SERVER_URL"] + url,
        data: params,
        params: query
      })
      .then(response => {
        resolve(response.data);
      })
      .catch(error => {
        reject(error);
      });
  });
}

 

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值