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 命令就可以让程序停顿指定的时间。