AbortController Web API 学习

本文主要是介绍AbortController Web API 学习，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

概念：        

        AbortController是一个用于控制和取消异步操作的 Web API。它允许在需要时中止正在进行的异步操作，比如网络请求或定时器。通过 AbortController，可以发送一个中止信号来取消异步操作，并在需要时清理资源。

        其中当调用 abort() 方法取消异步操作时，会触发一个 AbortError 错误。需要在异步操作的 catch 块中处理这个错误，以避免未捕获的异常

简单的示例：

        演示如何使用 AbortController 来取消一个 fetch请求

const controller = new AbortController();
const signal = controller.signal;fetch('https://api.example.com/data', { signal }).then(response => {if (response.ok) {return response.json();} else {throw new Error('Network response was not ok');}}).then(data => {console.log(data);}).catch(error => {if (error.name === 'AbortError') {console.log('Request aborted');} else {console.error('Error:', error.message);}});// 在需要时取消请求
controller.abort();

        在上面的示例中，我们首先创建了一个AbortController实例，并从中获取一个signal对象，然后将该signal对象传递给fetch请求的配置中。当需要取消请求时，调用 controller.abort()方法即可中止请求，并触发一个 AbortError错误。

特点：

1. 取消异步操作：AbortController 允许您发送一个中止信号来取消正在进行的异步操作，比如网络请求或定时器。
2. 简单易用：使用 AbortController 非常简单，只需创建一个实例并调用 abort() 方法即可取消操作。
3. 与Fetch API 集成：AbortController 与 Fetch API 集成良好，可以将 AbortController 实例的信号对象传递给 fetch 请求的配置中，实现请求的取消。
4. 多次使用：一个 AbortController 实例可以用于多个异步操作的取消，只需在需要时重复调用 abort() 方法。

应用场景： 

        这里主要说明其与EventSource的关系及结合使用。大家都知道EventSource只支持Get请求，但是如果想要Post请求，我们该如何实现呢？大家可以查看这篇博客查看相关情况：https://blog.csdn.net/qq_44327851/article/details/135181995 

简而言之，就是我们会引入@microsoft/fetch-event-source来解决上面所说的问题，但是在这里我还要强调一点（以上面的示例为例）：

       调用 controller.abort()方法会关闭与服务器的连接，但不会触发 EventSource 对象onclose()事件处理程序。相反，调用 controller.abort() 方法会立即关闭连接，而不会触发任何事件处理程序。但是controller.abort() 方法会导致 EventSource 对象的readyState属性变为 CLOSED。当调用 controller.abort() 方法方法关闭连接时，readyState属性会从 OPEN变为 CLOSED，表示连接已经关闭。

这篇关于AbortController Web API 学习的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---