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 教程。
