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

setTimeOut

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

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

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

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)
})
]);
```

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

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

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

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

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);

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

定时器

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

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

楼主是不是想让外部的 API 延迟发出， 假如外部 API 是打包好的那么只能拦截 XMLHttpRequest 和 send 方法 5 秒钟了...

下面代码只是示例，还不能运行

var sendFunc = XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.send = function (data) {

console.log("wait for 5 seconds before sending a request")
setTimeout(function () {
console.log("sending data now");
sendFunc(data);
}, 5000);
};