【译】JavaScript中的Promises

你有没有在JavaScript中遇到过promises并想知道它们是什么?它们为什么会被称为promises呢?它们是否和你以任何方式对另一个人做出的承诺有关呢?

此外,你为什么要使用promises呢?与传统的JavaScript操作回调(callbacks)相比,它们有什么好处呢?

在本文中,你将学习有关JavaScript中promises的所有内容。你将明白它们是什么,怎么去使用它们,以及为什么它们比回调更受欢迎。

所以,promise是什么?

promise是一个将来会返回值的对象。由于这种未来的东西,Promises非常适合异步JavaScript操作。

如果你不明白异步JavaScript意味着什么,你可能还不适合读这篇文章。我建议你回到关于callbacks这篇文章了解后再回来。

通过类比会更好地解析JavaScript promise的概念,所以我们来这样做(类比),使其概念更加清晰。

想象一下,你准备下周为你的侄女举办生日派对。当你谈到派对时,你的朋友,Jeff,提出他可以提供帮助。你很高心,让他买一个黑森林(风格的)生日蛋糕。Jeff说可以。

在这里,Jeff告诉你他会给你买一个黑森林生日蛋糕。这是约定好的。在JavaScript中,promise的工作方式和现实生活中的承诺一样。可以使用以下方式编写JavaScript版本的场景:

// jeffBuysCake is a promise
const promise = jeffBuysCake('black forest')

你将学习如何构建jeffBuysCake。现在,把它当成一个promise

现在,Jeff尚未采取行动。在JavaScript中,我们说承诺(promise)正在等待中(pending)。如果你console.log一个promise对象,就可以验证这点。

打印jeffBuysCake表明承诺正在等待中。

当我们稍后一起构建jeffBuysCake时,你将能够自己证明此console.log语句。

在与Jeff交谈之后,你开始计划下一步。你意识到如果Jeff信守诺言,并在聚会时买来一个黑森林蛋糕,你就可以按照计划继续派对了。

如果Jeff确实买来了蛋糕,在JavaScript中,我们说这个promise是实现(resolved)了。当一个承诺得到实现时,你会在.then调用中做下一件事情:

jeffBuysCake('black forest')
  .then(partyAsPlanned) // Woohoo! ???

如果Jeff没给你买来蛋糕,你必须自己去面包店买了。(该死的,Jeff!)。如果发生这种情况,我们会说承诺被拒绝(rejected)了。

当承诺被拒绝了,你可以在.catch调用中执行应急计划。

jeffBuysCake('black forest')
  .then(partyAsPlanned)
  .catch(buyCakeYourself) // Grumble Grumble... #*$%

我的朋友,这就是对Promise的剖析了。

在JavaScript中,我们通常使用promises来获取或修改一条信息。当promise得到解决时,我们会对返回的数据执行某些操作。当promise拒绝时,我们处理错误:

getSomethingWithPromise()
  .then(data => {/* do something with data */})
  .catch(err => {/* handle the error */})
复制代码

现在,你知道一个promise如何运作了。让我们进一步深入研究如何构建一个promise

构建一个promise

你可以使用new Promise来创建一个promise。这个Promise构造函数是一个包含两个参数 -- resolvereject 的函数。

const promise = new Promise((resolve, reject) => {
  /* Do something here */
})
复制代码

如果resolve被调用,promise成功并继续进入then链式(操作)。你传递给resolve的参数将是接下来then调用中的参数:

const promise = new Promise((resolve, reject) => {
  // Note: only 1 param allowed
  return resolve(27)
})

// Parameter passed resolve would be the arguments passed into then.
promise.then(number => console.log(number)) // 27
复制代码

如果reject被调用,promise失败并继续进入catch链式(操作)。同样地,你传递给reject的参数将是catch调用中的参数:

const promise = new Promise((resolve, reject) => {
  // Note: only 1 param allowed
  return reject('???')
})

// Parameter passed into reject would be the arguments passed into catch.
promise.catch(err => console.log(err)) // ???
复制代码

你能看出resolvereject都是回调函数吗??

让我们练习一下,尝试构建jeffBuysCake promise。

首先,你知道Jeff说他会买一个蛋糕。那就是一个承诺。所以,我们从空promise入手:

const jeffBuysCake = cakeType => {
  return new Promise((resolve, reject) => {
    // Do something here
  })
}
复制代码

接下来,Jeff说他将在一周内购买蛋糕。让我们使用setTimeout函数模拟这个等待七天的时间。我们将等待一秒,而不是七天:

const jeffBuysCake = cakeType => {
  return new Promise((resolve, reject) => {
    setTimeout(()=> {
      // Checks if Jeff buys a black forest cake
    }, 1000)
  })
}
复制代码

如果Jeff在一秒之后买了个黑森林蛋糕,我们就会返回promise,然后将黑森林蛋糕传递给then

如果Jeff买了另一种类型的蛋糕,我们拒接这个promise,并且说no cake,这会导致promise进入catch调用。

const jeffBuysCake = cakeType => {
  return new Promise((resolve, reject) => {
    setTimeout(()=> {
      if (cakeType
 - = 'black forest') {
        resolve('black forest cake!')
      } else {
        reject('No cake ?')
      }
    }, 1000)
  })
}
复制代码

让我们来测试下这个promise。当你在下面的console.log记录时,你会看到promise正在pedding(等待)。(如果你立即检查控制台,状态将只是暂时挂起状态。如果你需要更多时间检查控制台,请随时将超时时间延长至10秒)。

const promise = jeffBuysCake('black forest')
console.log(promise)

打印jeffBuysCake表明承诺正在等待中。

如果你在promise链式中添加thencatch,你会看到black forest cake!no cake ?信息,这取决于你传入jeffBuysCake的蛋糕类型。

const promise = jeffBuysCake('black forest')
  .then(cake => console.log(cake))
  .catch(nocake => console.log(nocake))
复制代码

打印出来是“黑森林蛋糕”还是“没有蛋糕”的信息,取决于你传入jeffBuysCake的(参数)。

创建一个promise不是很难,是吧??

既然你知道什么是promise,如何制作一个promise以及如何使用promise。那么,我们来回答下一个问题 -- 在异步JavaScript中为什么要使用promise而不是回调呢?

Promises vs Callbacks

开发人员更喜欢promises而不是callbacks有三个原因:

  1. Promise减少了嵌套代码的数量
  2. Promise允许你轻松地可视化执行流程
  3. Promise让你可以在链式的末尾去处理所有错误

为了看到这三个好处,让我们编写一些JavaScript代码,它们通过callbackspromises来做一些异步事情。

对于这个过程,假设你正在运营一个在线商店。你需要在客户购买东西时向他收费,然后将他们的信息输入到你的数据库中。最后,你将向他们发送电子邮件:

  1. 向客户收费
  2. 将客户信息输入到数据库
  3. 发送电子邮件给客户

让我们一步一步地解决。首先,你需要一种从前端到后端获取信息的方法。通常,你会对这些操作使用post请求。

如果你使用ExpressNode,则初始化代码可能如下所示。如果你不知道任何NodeExpress(的知识点),请不要担心。它们不是本文的主要部分。跟着下面来走:

// A little bit of NodeJS here. This is how you'll get data from the frontend through your API.
app.post('/buy-thing', (req, res) => {
  const customer = req.body

  // Charge customer here
})

让我们先介绍一下基于callback的代码。在这里,你想要向客户收费。如果收费成功,则将其信息添加到数据库中。如果收费失败,则会抛出错误,因此你的服务器可以处理错误。

代码如下所示:

// Callback based code
app.post('/buy-thing', (req, res) => {
  const customer = req.body

  // First operation: charge the customer
  chargeCustomer(customer, (err, charge) => {
    if (err) throw err

    // Add to database here
  })
})

现在,让我们切换到基于promise的代码。同样地,你向客户收费。如果收费成功,则通过调用then将其信息添加到数据库中。如果收费失败,你将在catch调用中自动处理:

// Promised based code
app.post('/buy-thing', (req, res) => {
  const customer = req.body

  // First operation: charge the customer
  chargeCustomer(customer)
    .then(/* Add to database */)
    .catch(err => console.log(err))
})
复制代码

继续,你可以在收费成功后将你的客户信息添加到数据库中。如果数据库操作成功,则会向客户发送电子邮件。否则,你会抛出一个错误。

考虑到这些步骤,基于callback的代码如下:

// Callback based code
app.post('/buy-thing', (req, res) => {
  const customer = req.body

  chargeCustomer(customer, (err, charge) => {
    if (err) throw err

    // Second operation: Add to database
    addToDatabase(customer, (err, document) => {
      if (err) throw err

      // Send email here
    })
  })
})

对于基于promise的代码,如果数据库操作成功,则在下一个then调用时发送电子邮件。如果数据库操作失败,则会在最终的catch语句中自动处理错误:

// Promised based code
app.post('/buy-thing', (req, res) => {
  const customer = req.body

  chargeCustomer(customer)
    // Second operation: Add to database
    .then(_ => addToDatabase(customer))
    .then(/* Send email */)
    .catch(err => console.log(err))
})
复制代码

继续最后一步,在数据库操作成功时向客户发送电子邮件。如果成功发送此电子邮件,则会有成功消息通知到你的前端。否则,你抛出一个错误:

以下是基于callback的代码:

app.post('/buy-thing', (req, res) => {
  const customer = req.body

  chargeCustomer(customer, (err, charge) => {
    if (err) throw err

    addToDatabase(customer, (err, document) => {
      if (err) throw err

      sendEmail(customer, (err, result) => {
        if (err) throw err

        // Tells frontend success message.
        res.send('success!')
      })
    })
  })
})

然后,以下基于promise的代码:

app.post('/buy-thing', (req, res) => {
  const customer = req.body

  chargeCustomer(customer)
    .then(_ => addToDatabase(customer))
    .then(_ => sendEmail(customer) )
    .then(result => res.send('success!')))
    .catch(err => console.log(err))
})
复制代码

看看为什么使用promises而不是callbacks编写异步代码要容易得多?你从回调地狱(callback hell)一下子切换到了链式乐土上?。

一次触发多个promises

promisescallbacks的另一个好处是,如果操作不依赖于彼此,则可以同时触发两个(或多个)promises,但是执行第三个操作需要两个结果。

为此,你使用Promise.all方法,然后传入一组你想要等待的promises。then的参数将会是一个数组,其包含你promises返回的结果。

const friesPromise = getFries()
const burgerPromise = getBurger()
const drinksPromise = getDrinks()

const eatMeal = Promise.all([
  friesPromise,
  burgerPromise,
  drinksPromise
])
  .then([fries, burger, drinks] => {
    console.log(`Chomp. Awesome ${burger}! ?`)
    console.log(`Chomp. Delicious ${fries}! ?`)
    console.log(`Slurp. Ugh, shitty drink ${drink} ? `)
  })
复制代码

备注:还有一个名为Promise.race的方法,但我还没找到合适的用例。你可以点击这里去查看。

最后,我们来谈谈浏览器支持情况!如果你不能在生产环境中使用它,那为什么要学习promises呢。是吧?

浏览器支持Promise

令人兴奋的消息是:所有主流浏览器都支持promises

如果你需要支持IE 11及其以下版本,你可以使用Taylor Hakes制作的Promise Polyfill。它支持IE8的promises。?

结语

你在本文中学到了所有关于promises的知识。简而言之,promises棒极了。它可以帮助你编写异步代码,而无需进入回调地狱。

尽管你可能希望无论什么时候都使用promises,但有些情况callbacks也是有意义的。不要忘记了callbacks啊?。

如果你有疑问,请随时在下面发表评论,我会尽快回复你的。【PS:本文译文,若需作者解答疑问,请移步原作者文章下评论】

感谢阅读。这篇文章是否帮助到你?如果有,我希望你考虑分享它。你可能会帮助到其他人。非常感谢!

后话

原文:zellwk.com/blog/js-pro…

文章首发:github.com/reng99/blog…

更多内容:github.com/reng99/blog…

下一篇关于 async/await

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏FreeBuf

利用Googleplex.com的盲XSS访问谷歌内网

众所周知,谷歌是一家非常庞大的科技公司,它依赖于数千家供应商来维持其运营。为了跟踪和支付这些供应商,谷歌提供了一个公共在线工具,供应商可以通过它将他们的发票上传...

17240
来自专栏代金券

内容分发网络-腾讯云内容分发网络

内容分发 网络即腾讯云CD N加速。腾讯云 CDN 在全国各省份部署了 1100+ 加速节点,涵盖了移动、联通、电信等主流运营商,以及铁通、长宽等多家中小型运营...

17200
来自专栏浪子编程走四方

程序员开发工具推荐(一)

功能说明:文件内容统计工具(可统计文件语言类型、文件注释、文件空格)下载地址收费情况:免费

12120
来自专栏云服务器999+

新客户无门槛领取总价值高达2860元代金券

https://cloud.tencent.com/act/cps/redirect?redirect=1044&cps_key=6f5f5aedea72d21...

12100
来自专栏企业服务器精选

腾讯云代金券如何领取及使用?

腾讯云代金券是腾讯云专用的一种代金券,也可以称为腾讯云优惠券。在购买腾讯云的时候,可获得相应的优惠折扣。一般购买腾讯云的时候,建议使用腾讯云代金券,这样可以节省...

15730
来自专栏最新优惠活动整理

腾讯云各个优惠活动适合用户总结分析

提到上云,大家都会想到腾讯云,腾讯云凭借良好的口碑,服务,以及过硬的产品实力成为了广大上云用户的优先考虑对象,腾讯云也实时推出不同的优惠活动来满足不同用户的上云...

9700
来自专栏企业服务器精选

如何购买腾讯云学生服务器(图文教程)

现在云服务商对学生都是很优惠的,腾讯云学生服务器腾讯云也推出了9.9元购买云服务器的优惠活动,是一款固定的优惠套餐,包含特价云服务器、域名(加钱可选)、免费对象...

38540
来自专栏VB小源码

VB.NET 与B4A 开发获取财务发票二维码中的数据

1)服务器IP为电脑端产生的IP地址,端口随意设置(只要手机与电脑端端口一样即可)

13520
来自专栏建站教程

腾讯云学生服务器可以用来建网站吗?用途是什么?

现在云服务商对学生都是很优惠的,腾讯云学生服务器腾讯云也推出了9.9元购买云服务器的优惠活动,是一款固定的优惠套餐,包含特价云服务器、域名(加钱可选)、免费对象...

27000
来自专栏优质精选主机

腾讯云学生机99%抢到详细教程(图文教程)

指定配置:CPU1核、内存1G、带宽1M、赠送系统盘Linux20G/Windows50G(如超过指定配置,需补齐差价)                   ...

20440

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励