解决vue中axios设置超时(超过5分钟)没反应的问题

问题描述

在使用vue.js中的axios发送请求时，如果设置的超时时间超过了5分钟，在等待过程中无论服务器是否正常响应，axios都不会有任何反应，这就会导致页面一直处于等待状态，用户无法获得相应的反馈信息。此时，怎样才能解决axios设置超时的问题呢？下面提供一些解决方案。

解决方法

方案一：在axios拦截器中添加timeout属性

可以在axios的请求拦截器中增加timeout属性，手动实现超时功能。下面是代码示例：

import axios from 'axios';

const service=axios.create({
  timeout: 5*60*1000 // 设置5分钟超时时间
});

// 添加请求拦截器
service.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    config.timeout = 5*60*1000; // 设置超时时间
    return config;
  },
  error => {
    // 对请求错误做些什么
    Promise.reject(error);
  }
);

// 添加响应拦截器
service.interceptors.response.use(
  response => {
    // 对响应数据做点什么
    return response;
  },
  error => {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

export default service;

方案二：使用XMLHttpRequest对象实现超时

可以使用XMLHttpRequest对象来手动实现axios的超时功能。下面是代码示例：

import axios from 'axios';

let request = axios.create({});

function axiosWithTimeout(config) {
  return new Promise((resolve, reject) => {
    let timeoutId = setTimeout(() => {
      // 超时处理
      clearTimeout(timeoutId);
      reject(new Error('请求超时，请稍后再试！'));
    }, 5*60*1000); // 设置5分钟超时时间，单位为毫秒

    request(config)
      .then(response => {
        clearTimeout(timeoutId);
        resolve(response);
      })
      .catch(err => {
        clearTimeout(timeoutId);
        reject(err);
      });
  });
}

export default axiosWithTimeout;