我相信，Promise对于我们前端工程师已经很熟悉了，在平常的工作中，也经常会使用它来进行异步流程的控制

它相较于回调函数，最大的优点就是可以 链式调用，从而可以让我们远离回调地狱，使我们的异步流程代码更加清晰可读，本篇文章就准备好好聊聊关于它的链式调用的相关知识，废话不多说，开搞！

ppx2.jpg

什么是Promise

在开始讲解链式调用前，我们还是先回顾下什么是promise？

qidai.jpeg

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。

所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理

它有两个特点：

  1. 对象的状态不受外界影响
  2. 一旦状态改变，就不会再变，任何时候都可以得到这个结果

链式调用

Promise的链式调用，让它彻底取代了旧时代的回调函数，下面我们就来看看具体是如何使用链式调用的吧

xuexi.jpg

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function test1(name) {
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve(name)
        },1000)
    })
}
 function test2(name) {
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve(name + ' ' + 'test2')
        },1000)
    })
}
 function test3(name) {
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve(name + ' ' + 'test3')
        },1000)
    })
}

test1('test1').then(test2).then(test3).then(console.log)

上述代码会在三秒后打印出 test1 test2 test3,最终结果是根据前三个返回promise的函数resolve出来的结果拼接而成，可以看到整个调用流程非常清晰易懂，完全避免了回调嵌套的问题

666.jpg

需要注意的是，如果我们在函数中直接返回 非promise 的值，那么其值会作为下一个then里的函数的参数