理解JavaScript之Async/Await的新语法

理解JavaScript之Async/Await的新语法

受到Zeit团队博文的启发,我们的PayPal团队不久之前将服务器端数据库迁移到了Async/Await上。我想要和你们分享一下我的经验。

首先我们先来了解两个术语:

Async函数Await 关键词

你们总是将Async和Await放在一起说,但是你需要知道的是,它们是两个不同的东西。对于Async函数和Await关键词,你需要了解的是,他们从某种程度上来说当然是有一定关联的,但是在没有Await的情况下,Async函数依然可以使用。

相关学习推荐:javascript视频教程

函数会返回一个Promise

当你用async关键词创建一个函数的时候,这个函数永远都会返回一个Promise。当你在async函数内部进行返回的时候,它会用一个Promise包裹你的值。

立即学习“Java免费学习笔记(深入)”;

 // here is an async function async function getNumber() {  return 4 // actually returns a Promise  }  // the same function using promises  function getNumber() {     return Promise.resolve(4)}

登录后复制

Async函数和它的基于Promise的Equivalent

除了将你的return转换为Promise之外,async函数还有一个特别之处,那就是它是唯一一个让你使用await关键词的地方。

Await让你可以暂停async函数的执行,直到它受到了一个promise的结果。这让你可以写出按照执行顺序显示的async代码。

 // async function to show user data async function displayUserData() {    let me = await fetch('/users/me')    console.log(me)}// promise-based equivalentfunction displayUserData() {    return fetch('/users/me').then(function(me) {        console.log(me)    })})

登录后复制

Await允许你在不需要callback的情况下写异步代码。这样做的好处是让你的代码可读性更高。而且await可以与任何promise兼容,而不仅仅是用async函数所创建的promise。

在Async函数中处理错误

因为async函数也是一个Promise,当你在代码中放入一个async函数的时候,它会被吸收,然后作为rejected Promise被返回。

 // basic error handling with async functions async function getData(param) {   if (isBad(param)) {         throw new Error("this is a bad param")   }      // ...   }   // basic promise-based error handling example   function getData(param) {   if (isBad(param)) {         return Promise.reject(new Error("this is a bad param"))   }      // ...    }

登录后复制

当你使用await调用Promise的时候,你可以用try/catch将其包裹,或是你需要在返回的Promise中添加一个catch handler。

 // rely on try/catch around the awaited Promiseasync function doSomething() {    try {         let data = await getData()    } catch (err) {            console.error(err)    }}// add a catch handlerfunction doSomething() {    return getData().catch(err => {        console.error(err)    })}

登录后复制

整合

利用好promise的错误处理属性,以及async函数的简洁语法,能够给你带来一些强大的能力。

在下面这个简单的例子中,你会看到我是如何利用async函数内在的错误处理能力的,它让我简化了Express应用中的错误处理流程。

 // catch any errors in the promise and either forward them to next(err) or ignore them const catchErrors = fn => (req, res, next) => fn(req, res, next).catch(next) const ignoreErrors = fn => (req, res, next) => fn(req, res, next).catch(() => next()) // wrap my routes in those helpers functions to get error handling app.get('/sendMoney/:amount', catchErrors(sendMoney)) // use our ignoreErrors helper to ignore any errors in the logging middleware app.get('/doSomethingElse', ignoreErrors(logSomething), doSomethingElse) // controller method can throw errors knowing router will pick it up export async function sendMoney(req, res, next) {   if (!req.param.amount) {      throw new Error('You need to provide an amount!')    }  await Money.sendPayment(amount) // no try/catch needed  res.send(`You just sent ${amount}`)}// basic async logging middlewareexport async function logSomething(req, res, next) {    // ...        throw new Error('Something went wrong with your logging')    // ...}

登录后复制

此前,我们一直都在用next(err)来处理错误。然而,有了async/await,我们可以将错误放在代码中的任何位置,然后router会将这些错误throw到Express提供的next函数中,这样就极大的简化了错误处理流程。

我用了几个小时的时间对数据库进行了迁移。要想使用这个方式,你唯一需要的,就是对Promise的深刻理解,以及学会如何设置babel。

以上就是理解JavaScript之Async/Await的新语法的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2726923.html

(0)
上一篇 2025年3月7日 23:39:30
下一篇 2025年3月6日 05:45:01

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 必备的12个JavaScript技巧

    在这篇文章中将给大家分享12个有关于JavaScript的小技巧。这些小技巧可能在你的实际工作中或许能帮助你解决一些问题。 相关学习推荐:javascript视频教程 使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查…

    2025年3月7日
    200
  • 学习JavaScript地理位置信息API

    对于一个Web开发程序员来说,开发工作中一个最有意思的方面就是获取地理位置信息;试想一下,浏览你的网页的用户是在什么地方?程序员可以根据用户的地理位置信息来调整网站的语言、特定产品介绍等。下面我们将要演示的就是通过浏览器里JavaScrip…

    2025年3月7日
    200
  • 如何用JavaScript检测离线/在线状态

    这两年离线浏览技术越来越流行,最常见的就是HTML5移动应用里,有很多普通的Web app也使用了这些技术。但是,新技术的出现有时会给我们WEB开发人员带领额外的苦恼,比如,如何判断用户现在是在线还是离线?幸好,有矛就有盾,JavaScri…

    2025年3月7日
    200
  • 详解javascript对象的数据属性与访问器属性

    创建对象的方式有两种:第一种,通过new操作符后面跟Object构造函数,第二种,对象字面量方式。如下 var person = new Object();person.name = ‘Nicy’;person.age = 21;perso…

    2025年3月7日
    200
  • 一起了解JS中的深拷贝与浅拷贝

    浅拷贝 浅拷贝是对象的逐位复制。创建一个新对象,该对象具有原始对象中值的精确副本。如果对象的任何字段是对其他对象的引用,则只复制引用地址,即,复制内存地址。 大白话讲就是,浅拷贝是对对象地址的复制,并没有开辟新的栈,也就是复制的结果是两个对…

    2025年3月7日
    200
  • javascript之ssm+vue前后端分离框架整合实现

    前言 本文针对Spring+SpringMVC+Mybatis后台开发框架(基于maven构建)与vue前端框架(基于webpack构建)的项目整合进行介绍,对于ssm和vue单独项目的搭建不作为本文的重点,而着重介绍两者之间交互的要点。 …

    2025年3月7日 编程技术
    200
  • 了解Typescript和Javascript之间的差异

    TypeScript 和 JavaScript 是目前项目开发中较为流行的两种脚本语言,我们已经熟知 TypeScript 是 JavaScript 的一个超集,但是 TypeScript 与 JavaScript 之间又有什么样的区别呢?…

    2025年3月7日
    200
  • 聊一聊JavaScript 中的 URL 对象

    如果我们自己编写从url中分析和提取元素的代码,那么有可能会比较痛苦和麻烦。程序员作为这个社会中最“懒”的群体之一,无休止的重复造轮子必然是令人难以容忍的,所以大多数浏览器的标准库中都已经内置了url对象。 那么现在,有了它,我们就可以将U…

    2025年3月7日
    200
  • vue实现员工信息录入功能的方法

    Vue通用信息录入界面,供大家参考,具体内容如下 nbsp;html>  员工信息录入  .btn1{ color: blue; background: skyblue; text-align: center; }    登录后复制 …

    2025年3月7日
    200
  • 代码详解Vue中key的作用示例

    Vue中key的作用 key的特殊attribute主要用在Vue的虚拟DOM算法,在新旧Nodes对比时辨识VNodes。如果不使用key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改、复用相同类型元素的算法,而使用key…

    2025年3月7日
    200

发表回复

登录后才能评论