From 5e3679a89ca78c51efa522e9baa29a8b3cb26777 Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Wed, 8 Apr 2020 16:20:38 +0800 Subject: [PATCH] =?UTF-8?q?update:=20Promise=20=E9=93=BE=E5=BC=8F=E8=B0=83?= =?UTF-8?q?=E7=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...omise详解.md => 07-ES6：Promise入门详解.md} | 134 +++++++++--------- 1 file changed, 69 insertions(+), 65 deletions(-) rename 10-ES6/{07-ES6：Promise详解.md => 07-ES6：Promise入门详解.md} (85%) diff --git a/10-ES6/07-ES6：Promise详解.md b/10-ES6/07-ES6：Promise入门详解.md similarity index 85% rename from 10-ES6/07-ES6：Promise详解.md rename to 10-ES6/07-ES6：Promise入门详解.md index 8762e8b..9cd6b65 100644 --- a/10-ES6/07-ES6：Promise详解.md +++ b/10-ES6/07-ES6：Promise入门详解.md @@ -156,13 +156,13 @@ Promise对象, 可以**将异步操作以同步的流程表达出来**。使用 ) ``` -## 【重要】基于 Promise 处理 多次 Ajax 请求（链式调用） +## 基于 Promise 处理 多次 Ajax 请求（链式调用）【重要】 实际开发中，我们经常需要同时请求多个接口。比如说：在请求完`接口1`的数据`data1`之后，需要根据`data1`的数据，继续请求接口2，获取`data2`；然后根据`data2`的数据，继续请求接口3。 -这种场景其实就是接口的多层嵌套调用。有了 promise之后，我们可以把多层嵌套调用按照**线性**的方式进行书写，非常优雅。 +换而言之，现在有三个网络请求，请求2必须依赖请求1的结果，请求3必须依赖请求2的结果，如果按照往常的写法，会有三层回调，会陷入“回调地狱”。 -也就是说：Promise 可以把原本的**多层嵌套调用**改进为**链式调用**。 +这种场景其实就是接口的多层嵌套调用。有了 Promise 之后，我们可以把多层嵌套调用按照**线性**的方式进行书写，非常优雅。也就是说：Promise 可以把原本的**多层嵌套调用**改进为**链式调用**。 代码举例：（多次 Ajax请求，链式调用） @@ -175,67 +175,74 @@ Promise对象, 可以**将异步操作以同步的流程表达出来**。使用 Document - ``` -上面这个举例很经典，需要多看几遍。 +上面代码中，then是可以链式调用的，后面的then可以拿到前面resolve出来的数据。 + +这个举例很经典，需要多看几遍。 ## return 的函数返回值 @@ -502,7 +509,7 @@ Promise 自带的API提供了如下对象方法： - Promise.race(): 并发处理多个异步任务，只要有一个任务执行成功，就能得到结果。 -下面来详细介绍 +下面来详细介绍。 ### Promise.all() 代码举例 @@ -539,9 +546,9 @@ Promise 自带的API提供了如下对象方法： }); } - var promise1 = queryData('http://localhost:3000/a1'); - var promise2 = queryData('http://localhost:3000/a2'); - var promise3 = queryData('http://localhost:3000/a3'); + var promise1 = queryData('http://localhost:3000/api1'); + var promise2 = queryData('http://localhost:3000/api2'); + var promise3 = queryData('http://localhost:3000/api3'); Promise.all([promise1, promise2, promise3]).then(result => { console.log(result); @@ -551,7 +558,6 @@ Promise 自带的API提供了如下对象方法： ``` - ### Promise.race() 代码举例 代码举例： @@ -587,9 +593,9 @@ Promise 自带的API提供了如下对象方法： }); } - var promise1 = queryData('http://localhost:3000/a1'); - var promise2 = queryData('http://localhost:3000/a2'); - var promise3 = queryData('http://localhost:3000/a3'); + var promise1 = queryData('http://localhost:3000/api1'); + var promise2 = queryData('http://localhost:3000/api2'); + var promise3 = queryData('http://localhost:3000/api3'); Promise.race([promise1, promise2, promise3]).then(result => { console.log(result); @@ -599,13 +605,13 @@ Promise 自带的API提供了如下对象方法： ``` - +了解这些内容之后， Promise 的基本用法，你就已经掌握了。 ## 参考链接 - [当面试官问你Promise的时候，他究竟想听到什么？](https://zhuanlan.zhihu.com/p/29235579) - +- [手写一个Promise/A+,完美通过官方872个测试用例](https://www.cnblogs.com/dennisj/p/12660388.html) ## 我的公众号 @@ -616,5 +622,3 @@ Promise 自带的API提供了如下对象方法： ![](http://img.smyhvae.com/20200101.png) - -