|
11 | 11 | 2. 返回的结果可以加入任何 Promise 队列 |
12 | 12 | 3. 可以使用 Await/Async |
13 | 13 |
|
| 14 | +我们就拿读取文件来举个例子。 |
| 15 | + |
14 | 16 | ```javascript |
15 | 17 | // FileSystem.js |
16 | 18 | const fs = require('fs'); |
@@ -39,3 +41,75 @@ fs.readFile('../README.md', 'utf-8') |
39 | 41 |
|
40 | 42 | ## 将任何异步操作都包装成 Promise |
41 | 43 |
|
| 44 | +不止回调,其实我们可以把任意异步操作都包装城 Promise。我们假设需求: |
| 45 | + |
| 46 | +1. 弹出确认窗口,用户点击确认再继续,点击取消就中断 |
| 47 | +2. 由于样式的关系,不能使用 `window.confirm()` |
| 48 | + |
| 49 | +之前我们的处理方式通常是: |
| 50 | + |
| 51 | +```javascript |
| 52 | +something.on('done', function () { // 先做一些处理 |
| 53 | + popup = openConfirmPopup('确定么'); // 弹出确认窗口 |
| 54 | + popup.on('confirm', function goOn () { // 用户确认后继续处理 |
| 55 | + // 继续处理 |
| 56 | + }); |
| 57 | +}); |
| 58 | +``` |
| 59 | + |
| 60 | +如今,借助 Promise 的力量,我们可以把弹窗封装成 Promise,然后就可以将其融入队列,或者简单的使用 Async 等待操作完成。 |
| 61 | + |
| 62 | +```javascript |
| 63 | +function openConfirmPopup(msg) { |
| 64 | + let popup = createPopup(msg); |
| 65 | + return new Promise( (resolve, reject) => { |
| 66 | + popup.confirmButton.onclick = resolve; |
| 67 | + popup.cancelButton.onclick = reject; |
| 68 | + }); |
| 69 | +} |
| 70 | + |
| 71 | +// pure promise |
| 72 | +doSomething() |
| 73 | + .then(() => { |
| 74 | + return openConfirmPopup('确定么') |
| 75 | + }) |
| 76 | + .then( () => { |
| 77 | + // 继续处理 |
| 78 | + }); |
| 79 | + |
| 80 | +// async/await |
| 81 | +await doSomething(); |
| 82 | +if (await openConfirmPopup('确定么')) { |
| 83 | + // 继续处理 |
| 84 | +} |
| 85 | +``` |
| 86 | + |
| 87 | +## jQuery |
| 88 | + |
| 89 | +jQuery 已经实现了 Promise,不过名字不太一样,叫 [Deferred 对象](http://api.jquery.com/category/deferred-object/)。实现也不太一样,因为 jQuery 1.5 之后就开始这方面的尝试,所以和最终规范肯定有出入。不过 [3.0](http://blog.meathill.com/tech/js/jquery/jquery-3-0-beta-released.html) 之后,它就完全遵守规范,并且也通过了测试。所以如果使用新版本,我们大可以按照之前的教程来操作,只是 jQuery 需要使用工厂方法来创建 Promise 实例,与规范略有区别: |
| 90 | + |
| 91 | +```javascript |
| 92 | +$.deferred(function (resolve) { |
| 93 | + // 执行异步操作吧 |
| 94 | +}) |
| 95 | + .then( response => { |
| 96 | + // 继续下一步 |
| 97 | + }); |
| 98 | +``` |
| 99 | + |
| 100 | +另外,jQuery 的 [jqXHR](http://api.jquery.com/jQuery.ajax/#jqXHR) 对象也是 Promise 对象,所以完全可以用 `.then()` 方法操作: |
| 101 | + |
| 102 | +```javascript |
| 103 | +$.ajax(url, { |
| 104 | + dataType: 'json' |
| 105 | +}) |
| 106 | + .then(json => { |
| 107 | + // 做后续操作 |
| 108 | + }); |
| 109 | +``` |
| 110 | + |
| 111 | +## IE |
| 112 | + |
| 113 | +遗憾的是,除了 Edge 版本,IE 都不支持原生的 Promise。但好在 Promise 不需要新的语言元素,所以我们完全可以用独立类库来补足。这里推荐 [Q](https://github.com/kriskowal/q) 和 [Bluebird](http://bluebirdjs.com/),因为它们都完全兼容最新的规范,也就是可以完全使用之前介绍的方法。 |
| 114 | + |
| 115 | +当然如果你不是非要 `new Promise()` 不可,用 jQuery 也完全可以。 |
0 commit comments