175 lines
5.5 KiB
Markdown
175 lines
5.5 KiB
Markdown
|
---
|
|||
|
title: Promises
|
|||
|
localeTitle: 承诺
|
|||
|
---
|
|||
|
## 承诺
|
|||
|
|
|||
|
JavaScript是单线程的,这意味着两个脚本不能同时运行;他们必须一个接一个地跑。 Promise是一个对象,表示异步操作的最终完成(或失败)及其结果值。
|
|||
|
|
|||
|
```javascript
|
|||
|
var promise = new Promise(function(resolve, reject) {
|
|||
|
// do thing, then…
|
|||
|
|
|||
|
if (/* everything worked */) {
|
|||
|
resolve("See, it worked!");
|
|||
|
}
|
|||
|
else {
|
|||
|
reject(Error("It broke"));
|
|||
|
}
|
|||
|
});
|
|||
|
```
|
|||
|
|
|||
|
## 承诺存在于其中一种状态中
|
|||
|
|
|||
|
* 待定:初始状态,既未履行也未拒绝。
|
|||
|
* 实现:操作成功完成。
|
|||
|
* 拒绝:操作失败。
|
|||
|
|
|||
|
Promise对象用作创建promise时未必知道的值的代理。它允许您将处理程序与异步操作的最终成功值或失败原因相关联。这允许异步方法返回类似于同步方法的值:异步方法返回一个承诺,在将来的某个时刻提供值,而不是立即返回最终值。
|
|||
|
|
|||
|
## 使用'然后'(承诺链接)
|
|||
|
|
|||
|
要进行多次异步调用并依次同步它们,可以使用promise chaining。这允许在后面的后续回调中使用第一个promise中的值。
|
|||
|
|
|||
|
```javascript
|
|||
|
Promise.resolve('some')
|
|||
|
.then(function(string) { // <-- This will happen after the above Promise resolves (returning the value 'some')
|
|||
|
return new Promise(function(resolve, reject) {
|
|||
|
setTimeout(function() {
|
|||
|
string += 'thing';
|
|||
|
resolve(string);
|
|||
|
}, 1);
|
|||
|
});
|
|||
|
})
|
|||
|
.then(function(string) { // <-- This will happen after the above .then's new Promise resolves
|
|||
|
console.log(string); // <-- Logs 'something' to the console
|
|||
|
});
|
|||
|
```
|
|||
|
|
|||
|
## 承诺API
|
|||
|
|
|||
|
Promise类中有4个静态方法:
|
|||
|
|
|||
|
* Promise.resolve
|
|||
|
* Promise.reject
|
|||
|
* Promise.all
|
|||
|
* Promise.race
|
|||
|
|
|||
|
## 承诺可以链接在一起
|
|||
|
|
|||
|
编写Promise来解决特定问题时,可以将它们链接在一起形成逻辑。
|
|||
|
|
|||
|
```javascript
|
|||
|
var add = function(x, y) {
|
|||
|
return new Promise((resolve,reject) => {
|
|||
|
var sum = x + y;
|
|||
|
if (sum) {
|
|||
|
resolve(sum);
|
|||
|
}
|
|||
|
else {
|
|||
|
reject(Error("Could not add the two values!"));
|
|||
|
}
|
|||
|
});
|
|||
|
};
|
|||
|
|
|||
|
var subtract = function(x, y) {
|
|||
|
return new Promise((resolve, reject) => {
|
|||
|
var sum = x - y;
|
|||
|
if (sum) {
|
|||
|
resolve(sum);
|
|||
|
}
|
|||
|
else {
|
|||
|
reject(Error("Could not subtract the two values!"));
|
|||
|
}
|
|||
|
});
|
|||
|
};
|
|||
|
|
|||
|
// Starting promise chain
|
|||
|
add(2,2)
|
|||
|
.then((added) => {
|
|||
|
// added = 4
|
|||
|
return subtract(added, 3);
|
|||
|
})
|
|||
|
.then((subtracted) => {
|
|||
|
// subtracted = 1
|
|||
|
return add(subtracted, 5);
|
|||
|
})
|
|||
|
.then((added) => {
|
|||
|
// added = 6
|
|||
|
return added * 2;
|
|||
|
})
|
|||
|
.then((result) => {
|
|||
|
// result = 12
|
|||
|
console.log("My result is ", result);
|
|||
|
})
|
|||
|
.catch((err) => {
|
|||
|
// If any part of the chain is rejected, print the error message.
|
|||
|
console.log(err);
|
|||
|
});
|
|||
|
```
|
|||
|
|
|||
|
这对于遵循_功能编程_范例很有用。通过创造 用于操纵数据的函数可以将它们链接在一起以组装最终数据 结果。如果在函数链中的任何一点,一个值被_拒绝_链 将跳到最近的`catch()`处理程序。
|
|||
|
|
|||
|
有关函数编程的更多信息: [函数编程](https://en.wikipedia.org/wiki/Functional_programming)
|
|||
|
|
|||
|
## 函数发生器
|
|||
|
|
|||
|
在最近的版本中,JavaScript引入了更多本机处理Promises的方法。一种这样的方法是函数发生器。函数发生器是“可暂停”的函数。与Promises一起使用时,生成器可以使用起来更容易阅读并显示为“同步”。
|
|||
|
|
|||
|
```javascript
|
|||
|
const myFirstGenerator = function* () {
|
|||
|
const one = yield 1;
|
|||
|
const two = yield 2;
|
|||
|
const three = yield 3;
|
|||
|
|
|||
|
return 'Finished!';
|
|||
|
}
|
|||
|
|
|||
|
const gen = myFirstGenerator();
|
|||
|
```
|
|||
|
|
|||
|
这是我们的第一个生成器,您可以通过`function*`语法看到它。我们声明的`gen`变量不会运行`myFirstGenerator` ,而是“此生成器可以使用”。
|
|||
|
|
|||
|
```javascript
|
|||
|
console.log(gen.next());
|
|||
|
// Returns { value: 1, done: false }
|
|||
|
```
|
|||
|
|
|||
|
当我们运行`gen.next()` ,它将取消暂停生成器并继续运行。由于这是我们第一次调用`gen.next()` ,它将运行`yield 1`并暂停,直到我们再次调用`gen.next()` 。当调用`yield 1` ,它将返回给我们产生的`value`以及生成器是否`done` 。
|
|||
|
|
|||
|
```javascript
|
|||
|
console.log(gen.next());
|
|||
|
// Returns { value: 2, done: false }
|
|||
|
|
|||
|
console.log(gen.next());
|
|||
|
// Returns { value: 3, done: false }
|
|||
|
|
|||
|
console.log(gen.next());
|
|||
|
// Returns { value: 'Finished!', done: true }
|
|||
|
|
|||
|
console.log(gen.next());
|
|||
|
// Will throw an error
|
|||
|
```
|
|||
|
|
|||
|
当我们继续调用`gen.next()` ,它将继续进行下一次`yield`并且每次都暂停。一旦没有剩余`yield` ,它将继续运行发电机的其余部分,在这种情况下只返回`'Finished!'` 。如果再次调用`gen.next()` ,它将在生成器完成时抛出错误。
|
|||
|
|
|||
|
现在,假设这个例子中的每个`yield`都是`Promise` ,代码本身看起来非常同步。
|
|||
|
|
|||
|
### Promise.all(iterable)对于对不同源的多个请求非常有用
|
|||
|
|
|||
|
Promise.all(iterable)方法返回单个Promise,当可迭代参数中的所有promise都已解析或者iterable参数不包含promise时,它将解析。它拒绝了第一个承诺拒绝的原因。
|
|||
|
|
|||
|
```javascript
|
|||
|
var promise1 = Promise.resolve(catSource);
|
|||
|
var promise2 = Promise.resolve(dogSource);
|
|||
|
var promise3 = Promise.resolve(cowSource);
|
|||
|
|
|||
|
Promise.all([promise1, promise2, promise3]).then(function(values) {
|
|||
|
console.log(values);
|
|||
|
});
|
|||
|
// expected output: Array ["catData", "dogData", "cowData"]
|
|||
|
```
|
|||
|
|
|||
|
### 更多信息
|
|||
|
|
|||
|
有关承诺的更多信息: [承诺](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
|