diff --git a/05-JavaScript之ES6语法/10-Promise入门详解.md b/05-JavaScript之ES6语法/10-Promise入门详解.md index e4408db..9466c2e 100644 --- a/05-JavaScript之ES6语法/10-Promise入门详解.md +++ b/05-JavaScript之ES6语法/10-Promise入门详解.md @@ -1,4 +1,4 @@ -## 前言:异步和回调 +## 前言:异步 ### 异步 @@ -31,20 +31,17 @@ js 中常见的接口调用方式,有以下几种: - 异步调用的结果如果**存在依赖**,则需要通过回调函数进行嵌套。 -### 回调地狱的举例 -假设买菜、做饭、洗碗、倒厨余垃圾都是异步的。 -但真实的场景中,实际的操作流程是:买菜成功之后,才能开始做饭。做饭成功后,才能开始洗碗。洗碗结束后, 再倒厨余垃圾。这里的一系列动作就涉及到了多层嵌套调用,也就是回调地狱。 -在 ES5 中,当进行多层嵌套回调时,会导致代码层次过多,很难进行后续维护和二次开发;而且会导致**回调地狱**的问题。ES6 中的 Promise 就可以解决这两个问题。 - -## Promise 概述 - -### 为什么需要 Promise? +## 为什么需要 Promise? 如上一段所述,Javascript 是⼀⻔单线程语⾔。早期我们解决异步场景时,⼤部分情况都是通过回调函数来进⾏。 +### 回调的定义 + +把函数A传给另一个函数B调用,那么函数A就是回调函数。 + 例如在浏览器中发送 ajax 请求,就是常⻅的⼀个异步场景,发送请求后,需要等待一段时间,等服务端响应之后我们才能拿到结果。如果我们希望在异步结束之后执⾏某个操作,就只能通过**回调函数**这样的⽅式进⾏操作。 ```js @@ -61,18 +58,72 @@ dynamicFunc(function () { 例如上⾯这个例⼦,dynamicFunc 就是⼀个异步函数,⾥⾯ setTimeout 会在 1s 之后调⽤传⼊的 callback 函数。按照上⾯的调⽤⽅式,最终 1s 之后,会打印 qian gu 这个结果。 -同样的,如果后续还有内容需要在异步函数结束时输出,就需要多个异步函数进⾏嵌套,⾮常不利于后续的维护,而且会导致**回调地狱**的问题: + +为了能使回调函数以更优雅的⽅式进⾏调⽤,在 ES6 语法中,新增了⼀个名为 Promise 的新规范。 + +### 回调的缺点 + +回调的写法比较直观,不需要 return,层层嵌套即可。但也存在两个问题: + +- 1、如果嵌套过深,则会出现**回调地狱**的问题。 + +- 2、不同的函数,回调的参数,在写法上可能不一致,导致不规范、且需要**单独记忆**。 + +我们来具体看看这两个问题。 + +**1、回调地狱的问题**: + +如果后续还有内容需要在异步函数结束时输出,就需要多个异步函数进⾏嵌套,⾮常不利于后续的维护,而且会导致**回调地狱**的问题: ```js setTimeout(function () { console.log('qiangu1'); setTimeout(function () { console.log('qiangu2'); + setTimeout(function () { + console.log('qiangu3'); + }, 3000); }, 2000); }, 1000); ``` -为了能使回调函数以更优雅的⽅式进⾏调⽤,在 ES6 语法中,新增了⼀个名为 Promise 的新规范。 +关于回调地狱,我们来举一个形象的例子: + +假设买菜、做饭、洗碗、倒厨余垃圾都是异步的。 + +但真实的场景中,实际的操作流程是:买菜成功之后,才能开始做饭。做饭成功后,才能开始洗碗。洗碗完成后, 再倒厨余垃圾。这里的一系列动作就涉及到了多层嵌套调用,也就是回调地狱。 + +在 ES5 中,当进行多层嵌套回调时,会导致代码层次过多,很难进行后续维护和二次开发;而且会导致**回调地狱**的问题。ES6 中的 Promise 就可以解决这两个问题。 + +**2、回调的写法不一致问题**: + +```js +// Node.js 读取文件时,成功回调和失败回调,是通过 error参数来区分 +readFile('d:\\readme.text', function (error, data) { + if (error) { + console.log('文件读取失败'); + } else { + console.log('文件读取成功'); + } +}) + + +// jQuery的 ajax 写法中,成功回调和失败回调,是通过两个回调函数来区分 +$.ajax({ + url: '/ajax.json', + success: function (response) { + console.log('文件读取成功'); + }, + error: function (err) { + console.log('文件读取失败'); + + } +}) + +``` + +我们可以看到,上面的代码中,成功回调和失败回调,写法不统一,需要单独记忆,容易出错。 + ### Promise 的介绍和优点 @@ -84,6 +135,24 @@ Promise 对象, 可以**用同步的表现形式来书写异步代码**(也就 - 语法非常简洁、可读性强,便于后期维护。Promise 对象提供了简洁的 API,使得控制异步操作更加容易。 +Promise 的伪代码结构,大概是这样的: + +```js +// 伪代码1 +myPromise() + .then(function () { }, function () { }) + .then(function () { }, function () { }) + .then(function () { }, function () { }) + +// 伪代码2 +是时候展现真正的厨艺了() + .然后(买菜) + .然后(做饭) + .然后(洗碗) +``` + +上面的伪代码可以看出,即便在业务逻辑上是层层嵌套,但是代码写法上,却十分优雅,也没有过多的嵌套。 + ## Promise 基础 ### Promise 的基本用法 @@ -132,7 +201,7 @@ promiseA() 上方代码中,当从接口返回的数据`data.retCode`的值(接口返回码)不同时,可能会走 resolve,也可能会走 reject,这个由你自己的业务决定。 -上面的写法中,是将 promise 实例定义成了一个**函数** `PromiseA`。我们也可以将 promise 实例定义成一个**变量** `promiseB`,达到的效果是一模一样的。写法如下:(写法上略有区别) +上面的写法中,是将 promise 实例定义成了一个**函数** `promiseA`。我们也可以将 promise 实例定义成一个**变量** `promiseB`,达到的效果是一模一样的。写法如下:(写法上略有区别) ```js // 第一步:model层的接口封装