【面试题】发起一次网络请求，当请求＞=1s，立马中断

首先这是一个大厂的面试题，是我一个同事跟我说的，具体什么业务场景面试官没说，但我猜测可能是以下几种业务场景：

表单提交：在用户提交表单时，如果请求处理时间过长，可以中断请求并提示用户检查网络连接或重试。
社交媒体应用：在用户查看动态或消息时，如果请求超时，可能会选择中断请求以避免显示过时的信息。
在线游戏：在多人在线游戏中，玩家的操作需要快速响应。如果请求延迟过长，可能会影响游戏体验。
金融交易系统：在股票交易或加密货币交易中，快速的响应时间至关重要，延迟可能导致错失交易机会。

于是怀着钻研的精神，我自己本地起了个服务，自己写了个demo测试一下，首选使用express搭建本地服务器，具体代码如下：

// http.js文件const express = require("express");const app = express();app.use((req, res, next) => {res.setHeader("Access-Control-Allow-Origin", "*");next();
});app.get("/", (req, res) => {//   setTimeout(() => {//     res.send("这是延迟返回的响应");//   }, 2000);res.send("这是正常返回的响应");
});app.listen(3010, () => {console.log("服务已启动");
});

以上代码：需要使用npm install express, 再使用node http.js启动服务；

编写html代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>接口如果在1s之后(包含1s)请求完成，中断网络请求</title>
</head><body>
</body>
<script>async function requestAbort() {let timer = nullconst controller = new AbortController()const signal = controller.signal;timer = setTimeout(() => {controller.abort()}, 1000)try {const response = await fetch('http://localhost:3010', {mode: 'no-cors',signal})const text = await response.text();console.log(text);clearTimeout(timer)} catch (error) {console.log(error);}}requestAbort();
</script></html>

我分别测试了正常响应和延迟2s响应的结果：

正常响应：