理解JavaScript之Async/Await的新语法


本文摘自PHP中文网,作者coldplay.xixi,侵删。

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

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

  • Async函数
  • Await 关键词

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

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

函数会返回一个Promise

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

1

2

3

4

5

6

7

8

9

10

11

// 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代码。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

// async function to show user data

 async function displayUserData() {

 

    let me = await fetch('/users/me')

 

    console.log(me)

 

}// promise-based equivalent

function displayUserData() {

 

    return fetch('/users/me').then(function(me) {

 

        console.log(me)

 

    })

 

})

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

在Async函数中处理错误

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

// 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。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

// rely on try/catch around the awaited Promise

 

async 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应用中的错误处理流程。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

// 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 middleware

export 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的新语法的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

javascript常见几种的内存泄漏

javascript如何实现“全选”和"全不选"功能?(代码示例)

介绍js的四种类型检测方法及根据jquery写的工具方法

javascript如何清除缓存

javascript怎么判断是否是字符

理解javascript中的closure(闭包)

javascript中random用法是什么

javascript有哪几种数据类型

如何使用css设计出一个表单页面(附示例)

javascript怎样实现累加

更多相关阅读请进入《javascript》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...