详细聊聊对async/await的理解和用法

 更新时间:2022年07月15日 08:46:58   作者:前端之神  
随着Nodev7的发布,越来越多的人开始研究据说是异步编程终级解决方案的 async/await,这篇文章主要给大家介绍了关于对async/await的理解和用法,文中通过实例代码介绍的介绍的非常详细,需要的朋友可以参考下

async/await是什么

async/await 是ES7提出的基于Promise的解决异步的最终方案。

async

async是一个加在函数前的修饰符,被async定义的函数会默认返回一个Promise对象resolve的值。因此对async函数可以直接then,返回值就是then方法传入的函数。

// async基础语法
async function fun0(){
    console.log(1);
    return 1;
}
fun0().then(val=>{
    console.log(val) // 1,1
})

async function fun1(){
    console.log('Promise');
    return new Promise(function(resolve,reject){
        resolve('Promise')
    })
}
fun1().then(val => {
    console.log(val); // Promise Promise
})

await

await 也是一个修饰符,只能放在async定义的函数内。可以理解为等待。

await 修饰的如果是Promise对象:可以获取Promise中返回的内容(resolve或reject的参数),且取到值后语句才会往下执行;

如果不是Promise对象:把这个非promise的东西当做await表达式的结果。

async function fun(){
    let a = await 1;
    let b = await new Promise((resolve,reject)=>{
        setTimeout(function(){
            resolve('setTimeout')
        },3000)
    })
    let c = await function(){
        return 'function'
    }()
    console.log(a,b,c)
}
fun(); // 3秒后输出: 1 "setTimeout" "function"
function log(time){
    setTimeout(function(){
        console.log(time);
        return 1;
    },time)
}
async function fun(){
    let a = await log(1000);
    let b = await log(3000);
    let c = log(2000);
    console.log(a);
    console.log(1)
}
fun(); 
// 立即输出 undefined 1
// 1秒后输出 1000
// 2秒后输出 2000
// 3秒后输出 3000

async/await 的正确用法

// 使用async/await获取成功的结果

// 定义一个异步函数,3秒后才能获取到值(类似操作数据库)
function getSomeThing(){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('获取成功')
        },3000)
    })
}

async function test(){
    let a = await getSomeThing();
    console.log(a)
}
test(); // 3秒后输出:获取成功

附:async与await一些注意关键点小结

  • await关键字必须位于async函数内部
  • await关键字后面需要一个promise对象(不是的话就调用resolve转换它)
  • await关键字的返回结果就是其后面Promise执行的结果,可能是resolved或者rejected的值,注意最后执行完的是个值。
  • 不能在普通箭头函数中使用await关键字,需要在箭头函数前面添加async
  • await用来串行的执行异步操作,现实现并行可以考虑promise.all

async与await缺点

async函数中,如果有多个await关键字时,如果有一个await的状态变成了rejected,那么后面的操作都不会继续执行,promise也是同理有这样一个函数async

function getData()
{
let value=await get();
value++;
await set();//set完成后返回数据
return value;
}

直接调用

var value=getData();

是对于这个函数直接调用的时候并不是你想要的返回值,因为async方法返回的永远是一个promise,即使开发者返回的是一个常量,也会被自动调用的promise.resolve方法转换为一个promise。因此对于这种情况,上层调用方法也需要是async函数,采用如下方法

async function xxxx(){
var value=await getData();
return value;
}

对于这种调用,如果还存在更高层次的方法调用,那么从底层的异步操作开始,一直到最顶层一个不需要返回值的函数为止,全部的方法都要变成async。

总结

到此这篇关于async/await理解和用法的文章就介绍到这了,更多相关async/await用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 用微信小程序实现计算器功能

    用微信小程序实现计算器功能

    这篇文章主要为大家详细介绍了用微信小程序实现计算器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-07-07
  • 基于Day.js更优雅的处理JavaScript中的日期

    基于Day.js更优雅的处理JavaScript中的日期

    Day.js它能够帮助我们处理JavaScript中的日期,本文就详细的介绍一下Day.js的具体使用,可以更简单的处理JavaScript中的日期和时间
    2021-09-09
  • 一个小时快速搭建微信小程序的方法步骤

    一个小时快速搭建微信小程序的方法步骤

    这篇文章主要介绍了一个小时快速搭建微信小程序的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04
  • 预加载css或javascript的js代码

    预加载css或javascript的js代码

    为了提高网站的加载速度,有一个很重要的手段就是在用户浏览过程中的上游网站做一个文件的预加载。
    2010-04-04
  • JavaScript必看的10道面试题总结(推荐)

    JavaScript必看的10道面试题总结(推荐)

    JavaScript 已经成为全栈开发技能的基石,在全栈开发面试中都会不可避免地涉及到与 JavaScript 有关的问题。这篇文章主要给大家介绍了关于JavaScript必看的10道面试题,需要的朋友可以参考下
    2021-05-05
  • JavaScript中的依赖注入详解

    JavaScript中的依赖注入详解

    这篇文章主要介绍了JavaScript中的依赖注入详解,本文讲解了requirejs/AMD方法、反射(reflection)方法等内容,需要的朋友可以参考下
    2015-03-03
  • 微信小程序如何实现数据共享与方法共享详解

    微信小程序如何实现数据共享与方法共享详解

    这篇文章主要给大家介绍了关于微信小程序如何实现数据共享与方法共享的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-01-01
  • javascript定时器完整实例

    javascript定时器完整实例

    这篇文章主要介绍了javascript定时器完整实现方法,以实例形式分析了定时器的嵌套调用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • Canvas实现微信红包照片效果

    Canvas实现微信红包照片效果

    这篇文章主要为大家详细介绍了Canvas实现微信红包照片效果,用canvas及css3结合,实现红包照片的效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-08-08
  • js获取数组对象中的全部key和value值

    js获取数组对象中的全部key和value值

    本文主要介绍了js获取数组对象中的全部key和value值,主要使用JavaScript的 map() 函数和 values() 迭代器来实现取出数组对象的所有key值和value值,感兴趣的可以了解下
    2024-01-01

最新评论