边城

在 JavaScript 中使用 Promise - 这是什么,该如何使用?

边城 · 2017-06-15翻译 · 651阅读 原文链接

JavaScript 的 Promise 是个概念。我看到各种开发者,无论是专业的还是新手,都在有规律的奋斗。对于我们这些来源于同步编程背景的人来说,有效的使用 Promise 并搞明白发生了什么事情,是极具挑战性的。尤其是在没能掌握 Promise 的操作和使用方式的情况下。在这个新的系列文章中,我们会研究如何有效地使用 Promise。

什么是 Promise?

没有比这更好的开始了,对吧?那么 Promise 到底是什么呢?

根据Mozilla Develoepr Network (MDN,Mozilla 开发者网络)

Promise 描述了一个值,它可能立即可用,也可能将来可用,甚至永远不可用。

因为很多 JavaScript API 拥有异步特性,所以我们需要 Promise。这些 API 包括大量使用的XMLHttpRequest:我们调用一个需要长时间运行的函数,而到最后它的结果可能并不可用。适当地使用 Promise 可以便处理这个事情的代码整洁、可读。

如果一个 Promise 被 resolve(决定),resovle 值就可以通过 Promise 获得。这样,如果我们有一个长时间运行的 HTTP 请求用来获取用户信息,一旦请求完成,我们可以使用用户信息来 resolve(决定)这个 Promise,这样用户信息就可用于任何等待 Promise 决定的客户代码。

Promise 也可能被 reject(拒绝),这表示遇到的问题,Promise 永远不可能决定。我们也可以选择将某个值作为拒绝 Promise 的一部分,所有观察者会得到这个值。

使用 Promise

在谈及如何创建和使用我们自己的 Promise 之前,我们先来谈谈如何为成 Promise 的消费者。

先假设某个函数会返回一个 Promise:

const myPromise = someAsyncLongRunningOperation();

我们想在结果有效时获得它。此,我们使用 Promise 的then 方法注册一个回调函数。这个回调函数会在Promise 的结果有效时接收到它:

myPromise.then(result => console.log('We got the result: ', result));

如果发生错误,Promise 被拒绝是会怎样?有两种方法可以得到通知。一是给 then 方法传递第二个参数:

myPromise.then(result => console.log('We got the result: ', result), error => console.log('Bad news, Jim: ', error));

我们也可以使用 Promise 的 catch 方法:

myPromise.catch(error => console.log('Bad news, Jim: ', error));

要搞明白这两个方法并不等效,这非常重要。你会看到它们的行为有微妙却很重要的不同。我倾向于使用 catch 而不是 then(function, function),原因我会在以后的文章中解释。

接下来

我认为这是一个很好的开端。接下来,我们看看如何自己创建 Promise!

相关文章