async/await 函数简介

·  阅读 1762
async/await 函数简介
原文链接: www.vsoui.com

自从 ES6 诞生以来,异步编程的方法得到了很大的发展。从 Promise 到 ES7 提案中的 async/await。目前,它仍处于提案阶段,async 函数可以说是目前异步操作最好的解决方案,是对 Generator 函数的升级和改进。那么今天就来具体说说 async/await 函数。

async/await 简介

  • async/await 是异步代码的新方式
  • async/await 基于 Promise 实现
  • async/await 使得异步代码更像同步代码
  • await 只能用在 async 函数中,不能用在普通函数中

async/await 用法

async 函数返回一个 Promise 对象,可以使用 then 方法添加回调函数。当函数执行的时候,一旦遇到 await 就会先返回一个 Promise 对象,等到异步操作完成,再接着执行函数体内后面的语句。

function timeout(ms) {
return new Promise(resolve => {
setTimeout(resolve, ms);
});
}
async function asyncPrint(value, ms) {
await timeout(ms);
console.log(value);
}
asyncPrint('hello world', 50);
复制代码

错误处理

  • 方法一

    function timeout(ms) {
    return new Promise(resolve => {
    setTimeout(resolve, ms);
    });
    }
    async function asyncPrint(value, ms) {
    await timeout(ms);
    return value
    }
    asyncPrint('hello world', 5000).then(result=> {
    console.log(result);
    }).catch(err=>{
    console.log(err)
    })
    复制代码
  • 方法二

    function timeout(ms) {
    return new Promise(resolve => {
    setTimeout(resolve, ms);
    });
    }
    async function asyncPrint(value, ms) {
    try{
    await timeout(ms);
    console.log(value)
    }catch(err){
    console.log(err)
    }
    await timeout(ms);
    return value
    }
    asyncPrint('hello world', 5000)
    复制代码
  • await 后面紧跟着的最好是一个耗时的操作或者是一个异步操作(当然非耗时的操作也可以的,但是就失去意义了)
  • 如果 await 后面的异步操作出错,那么等同于 async 函数返回的 Promise 对象被 reject

async 函数的学习到这里就结束了,但是这并不意味着 async 的用法只有这些,我们在学习了基础以后,更要把它与其他的知识相结合起来,才能写出更可靠更优质的代码!

#async #ES7 更多内容,欢迎大家关注我的公众号,后续进行更新

评论功能请移步到>> #Github issues

学会这个,前端也可以和PHP程序员一样了
收藏成功!
已添加到「」, 点击更改