Axios超时后如何返回值以通知用户请求中止？

嘿，我来帮你搞定这个axios超时返回值的问题！

首先你已经正确设置了axios实例的超时时间，接下来只需要在请求的catch分支里识别超时错误，然后返回你想要的提示内容就可以了——因为axios请求超时的时候会抛出特定的错误，我们可以通过错误的code或者message来判断。

方案一：保留你原有的Promise封装写法 #

_post(url, body, token) {
  return new Promise((resolve, reject) => {
    instance.post(url, body, {
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        // 顺便帮你加了token的可选处理，有需要就用
        ...(token && { Authorization: `Bearer ${token}` })
      }
    })
    .then(data => {
      // 统一返回带状态的格式，方便上层处理
      resolve({ success: true, data: data });
    })
    .catch(error => {
      // 判断是否为超时错误：axios超时错误的code是ECONNABORTED，message也会包含timeout关键词
      if (error.code === 'ECONNABORTED' || error.message.includes('timeout')) {
        // 超时后返回自定义提示，让上层能拿到这个值通知用户
        resolve({ 
          success: false, 
          message: '请求因超时中止，请检查网络或稍后重试' 
        });
      } else {
        // 其他错误可以选择reject，或者也返回自定义错误信息，看你业务需求
        reject({ 
          success: false, 
          message: '请求失败：' + (error.message || '未知错误') 
        });
      }
    });
  });
}

方案二：简化代码（去掉多余的Promise封装） #

其实axios的post本身就返回Promise，没必要再手动包一层，这样代码更简洁：

_post(url, body, token) {
  return instance.post(url, body, {
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
      ...(token && { Authorization: `Bearer ${token}` })
    }
  })
  .then(data => ({ success: true, data: data }))
  .catch(error => {
    if (error.code === 'ECONNABORTED' || error.message.includes('timeout')) {
      return { 
        success: false, 
        message: '请求因超时中止，请检查网络或稍后重试' 
      };
    }
    // 其他错误可以选择抛出，或者返回错误对象
    return Promise.reject({ 
      success: false, 
      message: '请求失败：' + (error.message || '未知错误') 
    });
  });
}

不管用哪个方案，上层调用的时候都可以轻松处理结果：

_post('/your-api-url', { key: 'value' }, 'user-token')
.then(result => {
  if (result.success) {
    // 请求成功，处理返回数据
    console.log('请求成功：', result.data);
  } else {
    // 请求超时或其他主动返回的错误，提示用户
    alert(result.message);
  }
})
.catch(error => {
  // 这里捕获的是我们主动reject的非超时错误（如果用了方案里的reject逻辑）
  alert(error.message);
});

小提示 #

• 你原本的axios实例初始化代码const instance = axios.create(); instance.defaults.timeout = 2500;是完全没问题的，不用改；
• 如果业务上希望所有错误都用resolve返回（不触发catch），可以把catch里的reject改成resolve对应的错误对象就行。

内容的提问来源于stack exchange，提问作者sajithneyo