异步编程与 Promise

异步编程的作用

它允许我们在执行一个耗时的长时间任务时，程序不需要进行等待，而是立刻继续执行之后的代码，直到这些任务完成之后，再回溯到回调函数处理结果。

Promise的诞生

而有时这样的异步操作不止一个，可能会有很多个；而 Promise 就是为了解决需要依次执行多个异步操作而设计的。

Promise的优点

而Promisre的优点在于它可以用一种链式结构将多个异步操作串联起来,即链式调用，避免了代码层层嵌套，提升代码可读性

操作A→操作B→操作C

解决了回调地狱的问题

回调地狱

原因

当需要依次执行多个依赖的异步操作时，回调函数层层嵌套

形式

操作A (() => {
    操作B (() => {
        操作C
    })
})

缺点

代码可读性差、难以维护等

例子

fetch("https://jisonplaceholder.typicode.com/posts/1")
     .then((response) => {response.json()})

这里的response.json()方法会返回一个promise，它代表在未来的某个时刻将返回的数据转换成JSON格式

如果你想完成以后再追加别的操作，可以直接在后面追加

fetch("https://jsonplaceholder.typicode.com/posts/1")
     .then((response) => {response.json()})
     .then((json) => console.log(json))

这就是Promisre的链式调用

实际操作

在执行异步操作时我们也会遇见一些错误（例如：网络问题、返回数据格式不正确...），想捕获这些错误的话，可以在链式结构末尾附加一个catch

fetch("https://api.github.com/users/octocat")
     .then((response) => {response.json()})
     .then((json) => console.log(json))
     .catch((error) => {
         console.error(error)
     })

这样在任意一个阶段发生错误，那么catch将会触发，后面的then将不会执行，与同步编程中的try...catch类似

类似promise还提供finally方法，它会在Promisre链结束之后调用，无论失败与否，我们都可以在这执行清理操作等

fetch("https://api.github.com/users/octocat")
     .then((response) => {response.json()})
     .then((json) => console.log(json))
     .catch((error) => {
         console.error(error)
     })
     .finally(() => {
         // 执行清理操作等等 
     })