异步编程 Promise、async、await 的概念、作用与区别

---

一、异步编程是什么？

异步编程可以使我们在进行一个长时间任务时，不需要等待，而是直接执行之后的代码，直到这些任务完成之后，再返回来通知你，而这通常是以回调函数（callback）的方式。
这种编程模式可以避免程序的阻塞，大大提高了cpu的效率，尤其适用于IO密集的，例如需要经常进行网络操作、数据库访问的应用。

二、实现异步的方式

1、传统的回调函数

例如下面的计时器，通过回调函数让我们的函数在指定的时间后执行，这个函数本身会立刻返回，程序会紧接着执行之后的代码，而我们传入的回调函数则会等到预定的时间才会执行

setTimeout(() => {
    console.log("学不会咋办");
},3000)

console.log("那就不学了");

需要注意的是，JAVAScript是一个单线程的编程语言，即便看上去这里的回调函数和主程序是在并发执行，但他们都运行在同一个主线程中。

回调函数虽然简单好理解，但是有个明显的缺点，如果我们需要依次执行多个异步操作，我们的程序可能会变成下面这样

setTimeout(() => {
    console.log("学不会咋办");
    setTimeout(() => {
        console.log("我不道啊");
        setTimeout(() => {
            console.log("我也不道啊");
        },3000)
    },3000)
},3000)

当第一个任务执行完毕之后，在回调函数里再去执行第二个任务，然后第三个第四个，这样嵌套下去，代码的可读性会变的很差，这种情况也叫函数的 “回调地狱” ，为了解决这个问题，Promise应运而生。

2、Promise

Promise 是一种异步编程的解决方案，用于处理回调地狱问题。Promise 对象表示一个异步操作的最终完成或失败状态，可以在操作完成后通过 then() 或 catch() 方法获取其结果。

Promise 有三种状态：Pending（进行中）、Resolved（已完成）和 Rejected（已失败）。Promise 对象一旦变为 Resolved 或 Rejected 状态，就会停止执行，直到通过 then() 或 catch() 方法获取结果。

JAVAScript中使用Promise的API，fetch()就是一个很好的例子，它用来发起一个请求来获取服务器数据，我们可以用它动态更新页面的内容，也就是我们常用的Ajax技术

fetch("https://")
    .then((response) => {
        //……
    })

我们可以通过调用它的then方法来传递一个回调函数，如果这个请求在未来成功完成，那么回调函数就会被调起，请求的结果也会以参数的形式传递进来。
而Promise与回调函数的不同就在于，Promise可以用一种链式结构将多个异步函数串联起来。

fetch("https://")
    .then((response) => response.json())

比如上面的response.json()方法也会返回一个Promise，其代表在未来的某个时刻，将返回的数据转换成JSON格式，如果我们想等它完成之后再执行其它的操作。可以在其后面追加一个then，然后执行接下来的代码

fetch("https://")
    .then((response) => response.json()).then((json) => console.log(json));

Promise这样的链式调用避免了像之前的代码那种层层嵌套的情况。可读性会高很多

3、async / await

async / await 它们是基于Promise之上的一个语法糖，可以让异步操作更加的简单明了。
首先我们需要使用async关键字将函数标记为异步函数。
异步函数就是指返回值为Promise对象的函数，比如之前用到的fetch，就是一个异步函数。

async function fun(){
    fetch("http://...");
}

fun()

在异步函数中我们可以调用其它的异步函数，不过我们不再需要使用then，而是可以使用一个更加简洁的await语法。
await 只能在 async 函数内部使用，并且只能用于等待 Promise 对象或其它支持 then() 方法的对象。

await会等待Promise完成之后直接返回最终的结果，所有下面的response已经是服务器返回的响应数据了。

async function fun(){
   const response = await fetch("http://...");
}

fun()

需要注意的是，await虽然看上去像是会暂停函数的执行，但是在等待的过程中，JavaScript同样可以处理其它的任务，这是因为await底层是基于Promise和事件循环机制实现的。

async function fun(){
   const response = await fetch("http://...");
   const json = await response.json();
   console.log(json);
}

fun()

---

本文借鉴学习于：https://www.bilibili.com/video/BV1WP4y187Tu/?spm_id_from=333.1007.top_right_bar_window_history.content.click&vd_source=b62201978dbe268b38c0a08a6e3a9e1c