个人创建网站程序,软件开发管理软件,织梦修改网站背景颜色,第一次做怎么放进去视频网站在 TypeScript 中使用 AbortController 来取消异步请求#xff0c;尤其是像 fetch 这样的请求#xff0c;可以提供一种优雅的方式来中止长时间运行的操作。下面是一个详细的步骤说明#xff0c;展示如何在 TypeScript 中使用 AbortController 取消 fetch 请求。
步骤 1尤其是像 fetch 这样的请求可以提供一种优雅的方式来中止长时间运行的操作。下面是一个详细的步骤说明展示如何在 TypeScript 中使用 AbortController 取消 fetch 请求。
步骤 1创建 AbortController 实例
首先你需要创建一个 AbortController 实例并从中获取 signal 对象。这个 signal 对象将在请求中使用以便在需要时取消请求。
const controller new AbortController();
const signal controller.signal;步骤 2发送带有 signal 的请求
当使用 fetch 发送请求时传递 signal 作为选项的一部分。如果请求被取消fetch 将会抛出一个带有 name 属性为 AbortError 的错误。
fetch(/api/data, { signal }).then(response {if (!response.ok) {throw new Error(HTTP error! Status: ${response.status});}return response.json();}).then(data {console.log(data);}).catch(error {if (error.name AbortError) {console.log(Fetch operation was aborted);} else {console.error(Fetch operation failed:, error);}});步骤 3取消请求
在某个时刻如果你决定要取消请求只需调用 controller.abort() 方法即可。
setTimeout(() {controller.abort();
}, 3000); // 取消请求将在3秒后发生示例完整的代码示例
下面是一个完整的示例展示了如何使用 AbortController 来取消一个 fetch 请求
// 示例使用 AbortController 取消 fetch 请求
const controller new AbortController();
const signal controller.signal;// 在3秒后取消请求
setTimeout(() {controller.abort();
}, 3000);// 发送带有 signal 的请求
fetch(/api/data, { signal }).then(response {if (!response.ok) {throw new Error(HTTP error! Status: ${response.status});}return response.json();}).then(data {console.log(Received data:, data);}).catch(error {if (error.name AbortError) {console.log(Fetch operation was aborted);} else {console.error(Fetch operation failed:, error);}});在使用 AbortController 取消请求后如果需要重新尝试发送请求可以采用几种不同的策略。下面将介绍如何在 TypeScript 中实现重新尝试的逻辑。
1. 手动重新尝试
最简单的方法是在请求被取消后手动重新触发请求。这种方法适用于你知道何时应该重新尝试的情况比如在某些用户操作之后。
const controller new AbortController();
const signal controller.signal;// 发送带有 signal 的请求
fetch(/api/data, { signal }).then(response {if (!response.ok) {throw new Error(HTTP error! Status: ${response.status});}return response.json();}).then(data {console.log(Received data:, data);}).catch(error {if (error.name AbortError) {console.log(Fetch operation was aborted);// 手动重新尝试setTimeout(() {controller new AbortController();signal controller.signal;fetch(/api/data, { signal }).then(response {if (!response.ok) {throw new Error(HTTP error! Status: ${response.status});}return response.json();}).then(data {console.log(Retried and received data:, data);}).catch(error {console.error(Retry failed:, error);});}, 5000); // 5秒后重新尝试} else {console.error(Fetch operation failed:, error);}});2. 使用重试库
另一种方法是使用重试库例如 p-retry 或者 retry它们可以自动处理重试逻辑并提供灵活的配置选项。
示例使用 p-retry
首先安装 p-retry
npm install p-retry然后在代码中使用它
import retry from p-retry;async function fetchData(signal: AbortSignal): Promiseany {return fetch(/api/data, { signal }).then(res res.json());
}retry(() fetchData(signal),{ retries: 3, factor: 2, minTimeout: 1000, maxTimeout: 3000 }
).then(data {console.log(Received data:, data);}).catch(error {console.error(Fetch operation failed:, error);});3. 自定义重试逻辑
你也可以自己编写重试逻辑根据需要调整重试次数、间隔时间等参数。
const MAX_RETRIES 3;
const RETRY_INTERVAL 1000; // 间隔时间毫秒async function fetchData(signal: AbortSignal): Promiseany {return fetch(/api/data, { signal }).then(res res.json());
}async function retryFetch(signal: AbortSignal, retriesLeft: number MAX_RETRIES): Promiseany {try {return await fetchData(signal);} catch (error) {if (error.name AbortError retriesLeft 0) {console.log(Fetch operation was aborted, retrying... (${retriesLeft} attempts left));await new Promise(resolve setTimeout(resolve, RETRY_INTERVAL));return retryFetch(signal, retriesLeft - 1);} else {throw error;}}
}retryFetch(signal).then(data {console.log(Received data:, data);}).catch(error {console.error(Fetch operation failed:, error);});4. 使用 AbortController 的组合策略
你还可以结合使用 AbortController 和重试逻辑以实现更复杂的场景。例如在某些条件下取消请求并在满足一定条件时重新尝试。
const controller new AbortController();
const signal controller.signal;// 在满足某些条件下取消请求
setTimeout(() {if (/* 某些条件 */) {controller.abort();}
}, 3000);// 发送带有 signal 的请求
fetch(/api/data, { signal }).then(response {if (!response.ok) {throw new Error(HTTP error! Status: ${response.status});}return response.json();}).then(data {console.log(Received data:, data);}).catch(error {if (error.name AbortError) {console.log(Fetch operation was aborted);// 根据条件重新尝试if (/* 满足重新尝试的条件 */) {const newController new AbortController();const newSignal newController.signal;fetch(/api/data, { signal: newSignal }).then(response {if (!response.ok) {throw new Error(HTTP error! Status: ${response.status});}return response.json();}).then(data {console.log(Retried and received data:, data);}).catch(error {console.error(Retry failed:, error);});}} else {console.error(Fetch operation failed:, error);}});注意事项
兼容性请确保你的浏览器或 Node.js 版本支持 AbortController。对于不支持的环境你可能需要考虑使用 polyfills。信号传播如果你在请求中使用了中间件例如代理服务器请注意 AbortController 的信号可能不会被正确传播。在这种情况下你可能需要手动处理信号的传播。资源释放取消请求后确保适当释放资源。例如如果请求涉及文件上传取消请求后应确保删除临时文件。
使用 AbortController 的好处
更好的用户体验用户可以在长时间的请求未完成前取消请求减少无响应的情况。资源管理可以避免因长时间未完成的请求而导致的资源浪费。灵活性为异步操作提供了一种灵活的控制机制。
通过这种方式你可以有效地在 TypeScript 中使用 AbortController 来管理异步请求的生命周期。
