Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >使用Promise.race后,如何区分超时和服务器返回错误?

使用Promise.race后,如何区分超时和服务器返回错误?

作者头像
王小婷
发布于 2025-05-25 08:02:14
发布于 2025-05-25 08:02:14
14300
代码可运行
举报
文章被收录于专栏:编程微刊编程微刊
运行总次数:0
代码可运行

在使用 Promise.race 处理超时和服务器返回错误时,可以通过对错误对象的类型进行区分来判断是超时还是其他请求错误。下面是具体的实现方法。

1. 实现逻辑

  • 上传成功:正常返回数据。
  • 上传失败:请求失败,可能是服务器返回错误。
  • 超时:当请求超过设定的时间限值时,触发超时错误。

2. 示例代码

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function uploadFile(file) {
  const formData = new FormData();
  formData.append('file', file); // 添加文件
  formData.append('otherData', 'value'); // 添加其他数据

  const requestTimeout = 5000; // 设置超时时间为 5 秒

  // 创建上传文件的 Promise
  const uploadPromise = new Promise((resolve, reject) => {
    uni.request({
      url: 'https://example.com/upload', // 服务器上传接口
      method: 'POST',
      header: {
        'Content-Type': 'multipart/form-data' // 设置请求头
      },
      data: formData,
      success: (res) => {
        // 判断状态码来确认是否成功
        if (res.statusCode === 200) {
          resolve(res.data);
        } else {
          // 服务器返回错误
          reject(new Error('服务器错误: ' + res.statusCode));
        }
      },
      fail: (error) => {
        // 网络错误或者请求失败
        reject(new Error('请求失败: ' + error.errMsg));
      }
    });
  });

  // 创建超时的 Promise
  const timeoutPromise = new Promise((_, reject) => {
    setTimeout(() => {
      reject(new Error('上传超时'));
    }, requestTimeout);
  });

  // 使用 Promise.race 来处理超时和成功/失败
  Promise.race([uploadPromise, timeoutPromise])
    .then((data) => {
      console.log('上传成功:', data);
    })
    .catch((error) => {
      if (error.message === '上传超时') {
        console.error('请求超时');
      } else {
        console.error('请求失败或服务器错误:', error.message);
      }
    });
}

3. 解释

  • 上传 Promise
    • 成功处理:检查 res.statusCode,如果是 200,表示成功,解析数据;如果不是,拒绝并返回服务器错误信息。
    • 失败处理:直接拒绝并返回请求失败的错误信息。
  • 超时 Promise:设定的超时时间后拒绝,并返回超时错误。
  • Promise.race:同时执行两个 Promise,首先完成的 Promise 决定最终的结果。
    • 如果是上传成功,输出成功信息。
    • 如果是超时或上传失败,根据 error.message 判断具体错误类型,分别处理。

4. 总结

通过这种方式,你可以清晰地区分超时和服务器返回的错误信息,从而在用户界面上提供相应的反馈。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2025-02-13,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
LV.3
这个人很懒,什么都没有留下~
交个朋友
加入腾讯云官网粉丝站
蹲全网底价单品 享第一手活动信息
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验