首页 > 编程笔记 > JavaScript笔记
阅读:19
JavaScript async和await的用法(附带实例)
ES2017 标准引入了 async 函数,使得异步操作变得更加方便。函数前的关键字 async 使函数返回 Promise,用于申明一个函数是异步的。
await 关键字只能在 async 函数中使用。await 等待的是一个 Promise 对象,后面必须跟一个 Promise 对象,但是不必写 then(),直接就可以得到返回值。
当 async 函数执行的时候,一旦遇到 await 就会先返回,等到异步操作完成,再接着执行函数体内后面的语句。
【实例】使用 async 和 await。
【实例】使用 async 和 await 实现程序休眠。
async function myFunction() { return "Hello"; } // 等价于 async function myFunction() { return Promise.resolve("Hello"); // 返回的是 Promise 成功的对象 } // 使用返回的 Promise myFunction().then( function(value) { console.log(value); } );
await 关键字只能在 async 函数中使用。await 等待的是一个 Promise 对象,后面必须跟一个 Promise 对象,但是不必写 then(),直接就可以得到返回值。
当 async 函数执行的时候,一旦遇到 await 就会先返回,等到异步操作完成,再接着执行函数体内后面的语句。
【实例】使用 async 和 await。
<h1 id="demo"></h1> <script> async function myDisplay() { let myPromise = new Promise(function (myResolve, myReject) { setTimeout(function () { myResolve("hello"); }, 3000); }); document.getElementById("demo").innerHTML = await myPromise; } myDisplay(); </script>程序中,第 3 行的 myDisplay() 函数前添加了关键字 async,表示这是一个异步函数;第 7 行的“await myPromise”是等待 myPromise 执行,3 秒后返回字符串“hello”。可以看到,async/await 从上到下顺序执行,就像写同步代码一样,更符合代码编写习惯。
【实例】使用 async 和 await 实现程序休眠。
<script> function sleep(interval) { return new Promise(resolve => { setTimeout(resolve, interval); }) } async function one2FiveInAsync() { for(let i = 1; i <= 5; i++) { console.log(i); await sleep(5000); } } one2FiveInAsync(); </script>程序中,第 7 行的 one2FiveInAsync() 函数前添加了关键字 async,表示这是一个异步函数;第 10 行的“await sleep(5000)”是等待 sleep() 方法返回的 Promise 对象。因此,程序首先输出 1,等待 5 秒后再输出 2,以此类推。借助 await 命令就可以让程序停顿指定的时间。