js async和await的用法

JavaScript021

js async和await的用法,第1张

async 是一个修饰符，被它定义的函数会默认的 返回 一个 Promise 的 resolve的值。

因此对 async 函数可以直接进行 then 操作，返回的值即为 then() 方法的传入函数。

await 同 async 一样，作为修饰符，但是它只能放在 async 内部使用。

它是 获取 Promise 中返回的内容， 即这个 Promise 函数中 resolve 或者 reject 的值。

所以，async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成。

如下例：

比如说，这样一个场景：等待三个数据结果都返回，计算它们的和

需要准备的材料分别有：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<body>标签中输入：<button onclick="setTimeout(send, 1000)">btn</button>，<script>标签中输入js代码：function send() {document.body.innerText = 'use send'}。

3、浏览器运行index.html页面，点击btn按钮。

4、等待1秒后，确实执行了send()方法打印了“use send”文本。

这是因为你这a、b、c函数并没有返回值（setTimeout的返回值不等于是函数的返回值），所以当然是undefined。而且按照ES7的语法规定，a、b、c函数的返回值必须是promise对象。下面是正确的代码：

async function a() {

return new Promise(res=>{

setTimeout(()=>res("a"),3000)

})

}

async function b() {

return new Promise(res=>{

setTimeout(()=>res("b"),2000)

})

}

async function c() {

return new Promise(res=>{

setTimeout(()=>res("c"),1000)

})

}

async function d() {

let a1 = await a()

let b1 = await b()

let c1 = await c()

console.log(a1,b1,c1)

}

d()