JS 怎么在页面实现延时提醒？（外部 API 请求慢 2~3 秒返回数据 | 也可能失连：让用户重新加载一下）

• 資深大佬 : ferock

  setTimeOut

• 主 資深大佬 : liudaqi

  @ferock setTimeOut 不行，只是把错误的提示延时出现了，还是会出现。

  期望的情况是：5 秒内网络数据加载完了，就不提示；没加载好就提示。

• 資深大佬 : Zhuzhuchenyan

  可以在加载完了 clear timeout https://developer.mozilla.org/zh-CN/docs/Web/API/WindowTimers/clearTimeout

• 資深大佬 : Rocketer

  Promise.race 会返回第一个执行完成的结果，所以你可以用它同时执行一个 5 秒钟延时的 reject 。如果请求成功了就会忽略这个 reject，如果 5 秒还没成功，就会收到这个 reject 。

  示例代码：

  “`Javascript
  const result = await Promise.race([
  fetch(‘/your-request-api’),
  new Promise((resolve, reject) => {
  setTimeout(() => reject(‘Timeout’), 5000)
  })
  ]);
  “`

• 資深大佬 : a570295535

  @liudaqi 前台弄一个 3 个点的 gif 动图显示加载中，ajax 请求地图 api 判断是否返回 200，超时时间设置 5 秒，超时就返回刷新提示

• 資深大佬 : SilencerL

  上 Promise.race 正解, 话说这不是前端基础知识了吗..

• 資深大佬 : learningman

  你请求的时候设 timeout，然后把显示提示的代码放 catch 里不就好了

• 資深大佬 : molvqingtai

  让用户主动刷新体验不好，请求失败了就自动重试，中途一直显示 loading

• 資深大佬 : xstmjh

  new Promise(function (resolve, reject) {
  asyncFn(param, function (err, result) {
  if (error) {
  return reject(error);
  }
  return resolve(result);
  });

  setTimeout(function () {
  reject(‘timeout’);
  }, 5000);
  }).then(doSomething);

• 資深大佬 : ljpCN

  建议主详细说说这个错误提示是在什么情形下抛出的。看你的描述，并不是在网络请求失败时抛出的，如果是应该就不存在需要添加延时的问题了。

• 資深大佬 : Reapper

  定时器

• 資深大佬 : Roger006

  1 发送请求的时候，同时设置 settimeout [记得保存句柄，清除延时时要用到] ，timer
  2 延时要进行的操作就是提示用户刷新的弹窗方法，此处假设方法名为 waringFn
  3 写一个清理延时的方法，比如 clearTimerFn = ()=>{clearTimeout(timer); timer = null;}
  4 请求本身设定 5 秒超时，catch 里边 [此处捕获异常包含超时、网络问题、端口拒绝等] 调用 waringFn 和 cleaerTimerFn （ catch 里边的操作需要一个判断，判断 timer 是否为 null ）

• 資深大佬 : John60676

  如果是用 vue3 写的话，可以考虑一下用 vue-request https://github.com/AttoJS/vue-request 来处理，里面有个 错误重试 的模块，应该能解决你面临的问题。