首页 > 编程笔记 > JavaScript笔记 阅读:10

JavaScript async和await的用法(附带实例)

ES2017 标准引入了 async 函数,使得异步操作变得更加方便。函数前的关键字 async 使函数返回 Promise,用于申明一个函数是异步的。
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 命令就可以让程序停顿指定的时间。

相关文章