JS async/await

JS async/await 教程展示了如何使用 async andawait 关键字进行异步编程。

JavaScript 是一种异步编程语言。它使用承诺来处理异步操作。在引入承诺之前，异步操作由回调处理。

promise 是尚未完成的异步任务的占位符。 （Promises 在某些编程语言中称为 futures。）async 和 await 关键字使异步的、基于 promise 的行为能够以更简洁的风格编写。

使用async关键字，我们定义了一个异步函数。每个异步函数都会返回一个承诺。异步函数可以包含零个或多个等待表达式。 await 关键字暂停函数的执行，直到返回的承诺被履行或拒绝。

await 关键字仅在常规 JavaScript 代码中的异步函数内有效。

JS async/await 简单例子

下面是一段使用 async/await 关键字的简单异步 JS 代码。

const work = () => {
    return new Promise(resolve => {
        setTimeout(() => resolve('doing work'), 3000);
    })
}

const doWork = async () => {
    console.log(await work());
}

console.log('before');
doWork();
console.log('after');

在示例中，我们有一个异步函数。

const work = () => {
    return new Promise(resolve => {
        setTimeout(() => resolve('doing work'), 3000);
    })
}

work 函数是一个虚拟函数，代表一个持续三秒的任务。

const doWork = async () => {
    console.log(await work());
}

doWork 是调用work 的异步函数。使用await，它将暂停执行，直到解析work 函数。

doWork();

doWork 函数被调用。

$ node simple.js 
before
after
doing work

请注意，’doing work’ 消息是在console.logstatements 之后打印的。所以本质上，doWork 函数不会阻止 main.js 文件中的语句。

在引入 async/await 关键字之前，使用的是回调。

const work = () => {
    return new Promise(resolve => {
        setTimeout(() => resolve('doing work'), 3000);
    })
}

console.log('before');

work().then(e => {
    console.log(e);
    console.log('finished');
});

console.log('after');

这是使用回调的相同示例。使用回调创建更复杂的异步代码更加困难。

JS async/await with fetch

fetch 是一个全局函数，它接受 url 和选项参数并返回一个承诺。承诺解决请求的响应。

let promise = fetch(url, [options])

如果未提供选项，则会生成一个简单的 GET 请求来下载 url 的内容。

<script>
    async function doRequest() {
        let url = 'http://webcode.me';
        let res = await fetch(url);

        if (res.ok) {

            let text = await res.text();

            return text;
        } else {
            return `HTTP error: ${res.status}`;
        }
    }

    doRequest().then(data => {
        console.log(data);
    });

</script>

在浏览器的 JS 代码中使用 fetch 生成异步 GET 请求。

JS异步截图

在下一个示例中，我们创建网页的屏幕截图。我们使用 Puppeteer 库。

$ npm i puppeteer

我们使用 npm i puppeteer 命令安装 Puppeteer。

const puppeteer = require('puppeteer');

(async () => {

  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('http://webcode.me');
  await page.screenshot({ path: 'webcode.png' });

  await browser.close();
})();

在匿名函数中，我们执行多个异步操作。他们每个人都在等待await。

在本文中，我们使用 async 和 await 关键字创建了异步 JS 程序。

列出所有 JavaScript 教程。