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

下面就是我在项目中使用的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);
      });
  });
}

 

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐