async/await 的理解和用法

async/await 的理解和用法async/await是什么async/await是ES7提出的基于Promise的解决异步的最终方案。asyncasync是一个加在函数前的修饰符,被async定义的函数会默认返回一个Promise对象resolve的值。因此对async函数可以直接then,返回值就是then方法传入的函数。//async基础语法asyncfunctionfun0(){console.log(1);return1;}fun0().then(val=>{conso

大家好,又见面了,我是你们的朋友全栈君。

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秒后输出:获取成功
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/158149.html原文链接:https://javaforall.net

(0)
上一篇 2022年7月12日 上午8:36
下一篇 2022年7月12日 上午8:36


相关推荐

  • 一阶微分不变性_二阶微分形式表示

    一阶微分不变性_二阶微分形式表示首先强化一下:1.d(dx)=d2x=02.dx2=(dx)23.d(x2)=2xdx上面3者各不相同,不可混淆。dy=d(f。g(x))=f(1)(u)g(1)(x)

    2022年8月3日
    5
  • 二十年前是怎样开发游戏的?

    二十年前是怎样开发游戏的?

    2022年3月5日
    38
  • C# StreamReader/StreamWriter与FileStream用法详解

    C# StreamReader/StreamWriter与FileStream用法详解一、StreamReader类共有10个构造函数StreamReader(Stream)   // 为指定的流初始化StreamReader类的新实例。FileStreamfs=newFileStream(@”D:\Readme.txt”,FileMode.Open);StreamReadersr=newStreamRea

    2022年7月23日
    8
  • AOSP>设计>测试>(第三节)兼容性测试套件CTS[通俗易懂]

    AOSP>设计>测试>(第三节)兼容性测试套件CTS[通俗易懂]AOSP>设计>测试>兼容性测试套件CTS第三节兼容性测试套件(CTS)概览新变化测试开发工作流设置CTS运行CTS命令控制台免安装应用运行CTS验证程序相机测试安全元件解读结果CTS开发下载版本说明第三节兼容性测试套件(CTS)概览本内容面向Android平台开发者。在了解如何在Android平台上进行测试之前,请参阅Android平台架构,大致了解相关的信息。另请注意,您可以使用特定于安全性的测试机制检测设备上的漏洞以及加强设备抵御漏洞的能力。新变化

    2022年8月30日
    6
  • vue中使用onbeforeunload

    vue中使用onbeforeunload前言 onbeforeunlo 事件可以用在页面刷新前 页面关闭前 进行提示判断等相关操作 也就是说你再这个事件里面添加的操作 你点击 f5 刷新或者退出这个页面都会触发 效果图 js 和 vue 中通过案例来说明用法 一 js 中使用方法 html head title thisisidonbe title head html

    2026年3月18日
    1
  • 批量修改文件后缀名「建议收藏」

    批量修改文件后缀名「建议收藏」在该文件夹下新建一个txt文件,输入:ren*原后缀名*新后缀名保存,将此txt文件的后缀改为.bat,双击运行,ok。说明:ren是rename(重命名)的缩写。第一个参数指定要匹配

    2022年8月2日
    10

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号