JavaScript promise

JS promise 教程展示了如何在 JavaScript 中使用 promise。

A 表示将来某个时间可用的潜在值或错误。

Promise 可以具有以下状态之一：

• pending – 初始状态，既未完成也未拒绝
• fulfilled – 操作成功完成
• rejected – 操作失败

我们使用回调或 async/await 关键字处理 promises。

Promise 在某些编程语言中称为 future。

JS Promise.resolve

Promise.resolve 方法返回一个使用给定值解析的 Promise 对象。

let promise = new Promise(resolve => {

    setTimeout(() => resolve(2), 2000);
});

promise.then(val => console.log(val));

console.log('finished');

我们创建了一个 promise，它在两秒后解析为一个整数值。 then 函数附加回调以解决和/或拒绝承诺。

$ node main.js
finished
2

在下一个示例中，我们使用 async/await 关键字。

async function doWork() {

    let res = await promise;
    console.log(res);
}

let promise = new Promise(resolve => {

    setTimeout(() => resolve(2), 2000);
});

doWork();

console.log('finished');

await 关键字用于等待 Promise。它只能在异步函数中使用。

JS 承诺错误

Promise.reject 方法返回一个因给定原因被拒绝的 Promise 对象。

let promise = new Promise((resolve, reject) => {

    let b = Math.random() < 0.3;

    if (b) {
        resolve(10);
    } else {
        reject("promise error");
    }
});

promise.then(val => console.log(val)).catch(err => {
    console.log(`${err}`)
});

console.log('finished');

在示例中，我们使用Math.random 模拟错误。我们用catch 方法捕获错误。

$ node main.js
finished
promise error
$ node main.js
finished
promise error
$ node main.js
finished
10

JS 链接承诺

可以通过链接执行多个异步操作。

let p = new Promise((resolve) => {
    resolve(1);
});

let r = p.then(val => val + 2).then(val => val + 3)
    .then(val => val + 4).then(val => console.log(val));

console.log('finished');

该示例通过承诺链添加四个整数。

$ node chain.js
finished
10

JS Promise.all

Promise.all 方法将可迭代的 promise 作为参数，并返回一个解析为给定 promise 结果数组的单一 promise。

当所有承诺都已解决时，此返回的承诺将解决。它会立即拒绝任何错误拒绝的输入承诺。

const p1 = new Promise((resolve) => setTimeout(resolve, 100, 100));
const p2 = new Promise((resolve) => setTimeout(resolve, 300, 200));
const p3 = new Promise((resolve) => setTimeout(resolve, 500, 300));

const promises = [p1, p2, p3];

Promise.all(promises).then((data) =>
    console.log(data.reduce((total, next) => total + next)));

console.log('finished');

在这个例子中，我们等待所有的承诺完成，最后，我们计算返回值的总和。

$ node all.js
finished
600

使用 axios 的 JS 多个请求

在下一个示例中，我们使用 axois 库执行多个 get 请求。axios 是一个基于 promise 的 HTTP 客户端，适用于 Node 和浏览器。

$ npm i axios

我们安装 Axios 库。

const axios = require('axios');

async function makeRequests(urls) {

    const fetchUrl = (url) => axios.get(url);
    const promises = urls.map(fetchUrl);

    let responses = await Promise.all(promises);

    responses.forEach(resp => {

        let msg = `${resp.config.url} -> ${resp.headers.server}: ${resp.status}`;
        console.log(msg);
    });
}

let urls = [
    'http://webcode.me',
    'https://example.com',
    'http://httpbin.org',
    'https://clojure.org',
    'https://fsharp.org',
    'https://symfony.com',
    'https://www.perl.org',
    'https://www.php.net',
    'https://www.python.org',
    'https://code.visualstudio.com',
    'https://github.com'
];

makeRequests(urls);

我们等待所有请求以Promise.all 结束。完成后，我们遍历响应数组和服务器名称以及响应状态。

$ node main.js
http://webcode.me -> nginx/1.6.2: 200
https://example.com -> ECS (dcb/7ECA): 200
http://httpbin.org -> gunicorn/19.9.0: 200
https://clojure.org -> AmazonS3: 200
https://fsharp.org -> GitHub.com: 200
https://symfony.com -> cloudflare: 200
https://www.perl.org -> Combust/Plack (Perl): 200
https://www.php.net -> myracloud: 200
https://www.python.org -> nginx: 200
https://code.visualstudio.com -> Microsoft-IIS/10.0: 200
https://github.com -> GitHub.com: 200

JS 用 Puppeteer 创建 PDF

在下面的示例中，我们使用 Puppeteer 库从网页生成 PDF 文件。

$ 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.pdf({ path: 'webcode.pdf', format: 'a5' });

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

整个任务由多个异步操作组成，使用async/await关键字处理。

在本文中，我们使用了 JavaScript 中的 promises。

列出所有 JavaScript 教程。