一盏茶的功夫帮你彻底搞懂JavaScript异步编程从回调地狱到async/await

一时失言乱红尘 2024-04-25 20:14 2阅读 0赞

![cd36113cf50b4c3bb4a7b3edd4e78d0e.gif][]

**🎬 江城开朗的豌豆**：[个人主页][Link 1]

**🔥 个人专栏**:[《 VUE 》][VUE] [《 javaScript 》][javaScript]

**⛺️ 生活的理想，就是为了理想的生活 !**

![在这里插入图片描述][7a8de4d12e20434eb29590366872b046.gif_pic_center]

**目录**

📘 1. 引言

📘 2. 使用方法

📘 3. 实现原理

📘 4. 写到最后

--------------------

### 📘 1. 引言 ###

> 在深入讨论 async/await 之前，我们需要了解一下 JavaScript 的单线程和非阻塞的特性。JavaScript 是单线程的，也就是说在任何给定的时间点，只能执行一个操作。然而，对于需要大量时间的操作（例如从服务器获取数据），如果没有适当的管理机制，这种单线程特性可能会导致应用程序的阻塞。为了解决这个问题，JavaScript 引入了回调函数和后来的 Promise，用来管理这些异步操作。

> 然而，回调函数和 Promise 还是存在一些问题。回调函数很容易导致 "回调地狱"，因为每个异步操作都需要一个回调函数，如果有很多这样的操作，代码就会变得非常混乱。Promise 解决了这个问题，让异步代码更加直观，但是，Promise 的链式调用有时候还是显得不够直观。
> 
> 为了结合Promise和生成器的优势，Async/await在ECMAScript 2017（ES8）中被引入。它通过async函数和await表达式提供了一种更加直观和简洁的方式来编写异步代码，消除了回调函数和手动管理Promise的需要。

### 📘 2. 使用方法 ###

Async/await的使用方法非常简单明了，主要涉及两个关键字：async和await。

>  *  `async`关键字：用于声明一个async函数，它返回一个Promise对象。在async函数内部，我们可以使用await关键字来暂停函数的执行，等待一个异步操作的完成，并获得其结果。在这个过程中，async函数会暂时释放线程的控制权，使其他代码可以继续执行。
>  *  `await`关键字：用于暂停async函数的执行，等待一个Promise对象的完成，并返回其解析的值。它只能在async函数内部使用。当使用await表达式时，代码的执行会暂停，直到Promise对象被解析或拒绝。

下面是一个示例，展示了Async/await的使用方法：

async function getData() {
      try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        return data;
      } catch (error) {
        console.error('Error:', error);
        throw error;
      }
    }
    
    getData()
      .then(data => console.log('Data:', data))
      .catch(error => console.error('Error:', error));

> 在上面的示例中，`getData`函数是一个async函数，它等待`fetch`函数返回的Promise对象，并使用await关键字获取响应的数据。最后，我们使用`.then`方法处理返回的数据，或使用`.catch`方法处理可能发生的错误。

### 📘 3. 实现原理 ###

> Async/Await 的实现原理其实就是 Generator + Promise。我们知道 Generator 可以在 yield 关键字处暂停和恢复执行，Promise 可以处理异步操作，两者结合在一起，就可以实现一个类似于 async/await 的功能。

> 在上述代码中，我们首先创建了一个 promiseFn 函数，该函数返回一个在 2 秒后解析的 Promise。然后，我们创建了一个 Generator 函数 genFn，在该函数内部，我们使用 yield 关键字暂停执行并等待 promiseFn 的结果。最后，我们创建了一个 asyncToGenerator 函数，该函数接受一个 Generator 函数作为参数，并返回一个新的 Promise，这个 Promise 的解析值就是 Generator 函数的返回值。

### 📘 4. 写到最后 ###

> 总的来说，Async/await是一种使得JavaScript异步编程变得更加友好和易用的语法特性。它帮助开发者以一种更加清晰和简洁的方式处理异步操作，提升了代码的可读性和维护性。对于那些曾经苦于回调地狱的开发者来说，Async/await是一种令人期待的改变，它让我们可以更加舒心地编写异步代码。

> 请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.
> 
> ✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式
> 
> ✅ 认为我部分代码过于老旧,可以提供新的API或最新语法
> 
> ✅ 对于文章中部分内容不理解
> 
> ✅ 解答我文章中一些疑问
> 
> ✅ 认为某些交互,功能需要优化,发现BUG
> 
> ✅ 想要添加新功能,对于整体的设计,外观有更好的建议
> 
> 最后感谢各位的耐心观看，既然都到这了，点个 👍赞再走吧

###  ###

![5a94c4773709473697bc29a771e89374.gif][]

[cd36113cf50b4c3bb4a7b3edd4e78d0e.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/97f426aaa80c4415b0b2be1e1f52cb27.gif
[Link 1]: https://blog.csdn.net/qq_48652579?type=blog
[VUE]: https://blog.csdn.net/qq_48652579/category_12294321.html
[javaScript]: https://blog.csdn.net/qq_48652579/category_12275821.html
[7a8de4d12e20434eb29590366872b046.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/de0f7ef3bba74e8dbad0e10fca2ac8f6.gif
[5a94c4773709473697bc29a771e89374.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/4e3dd5fc6cd44a7e9216c57179a37a09.gif