## 链式调用:基于 Promise 处理多次 Ajax 请求【重要】 实际开发中,我们经常需要同时请求多个接口。比如说:在请求完`接口1`的数据`data1`之后,需要根据`data1`的数据,继续请求接口 2,获取`data2`;然后根据`data2`的数据,继续请求接口 3。 换而言之,现在有三个网络请求,请求 2 必须依赖请求 1 的结果,请求 3 必须依赖请求 2 的结果,如果按照往常的写法,会有三层回调,会陷入“回调地狱”。 这种场景其实就是接口的多层嵌套调用。有了 Promise 之后,我们可以把多层嵌套调用按照**线性**的方式进行书写,非常优雅。也就是说:Promise 可以把原本的**多层嵌套调用**改进为**链式调用**。 代码举例:(多次 Ajax 请求,链式调用) ```html Document ``` 上面代码中,then 是可以链式调用的,后面的 then 可以拿到前面 resolve 出来的数据。 这个举例很经典,需要多看几遍。 ## return 的函数返回值 return 后面的返回值,有两种情况: - 情况 1:返回 Promise 实例对象。返回的该实例对象会调用下一个 then。 - 情况 2:返回普通值。返回的普通值会直接传递给下一个 then,通过 then 参数中函数的参数接收该值。 我们针对上面这两种情况,详细解释一下。 ### 情况 1:返回 Promise 实例对象 举例如下:(这个例子,跟上一段 Ajax 链式调用 的例子差不多) ```html Document ``` ### 情况 2:返回 普通值 ```html Document ``` ## Promise 的常用 API:实例方法【重要】 Promise 自带的 API 提供了如下实例方法: - promise.then():获取异步任务的正常结果。 - promise.catch():获取异步任务的异常结果。 - promise.finaly():异步任务无论成功与否,都会执行。 代码举例如下。 写法 1: ```html Document ``` 写法 2:(和上面的写法 1 等价) ```html Document ``` **注意**:写法 1 和写法 2 的作用是完全等价的。只不过,写法 2 是把 catch 里面的代码作为 then 里面的第二个参数而已。 ## Promise 的常用 API:对象方法【重要】 Promise 自带的 API 提供了如下对象方法: - Promise.all():并发处理多个异步任务,所有任务都执行成功,才能得到结果。 - Promise.race(): 并发处理多个异步任务,只要有一个任务执行成功,就能得到结果。 下面来详细介绍。 ### Promise.all() 代码举例 代码举例: ```html Document ``` ### Promise.race() 代码举例 代码举例: ```html Document ```