4.1 关键字async
JavaScript中的异步函数允许你写出看起来像同步代码的异步代码。 关键字async和await，在 ECMAScript 2017 (ES8) 中引入，简化了使用promises的工作 并使代码更易读和管理。
基本概念
在函数声明前使用关键字async表示该函数是异步的。异步函数总是返回一个promis，即使没有显式返回return。 如果函数返回一个值，该值会自动被promise包装。
语法：
async function name() {
// 函数代码
}
例子：
JavaScript
async function greet() {
return 'Hello, world!';
}
greet().then((message) => {
console.log(message); // 输出: Hello, world!
});
4.2 关键字await
关键字await在异步函数内部用于暂停其执行，直到promise完成。await只能用在用async声明的函数内。
语法：
let result = await
promise;
例子：
JavaScript
function delay(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
async function greet() {
await delay(2000);
return 'Hello, world!';
}
async function displayGreeting() {
const message = await greet();
console.log(message); // 输出: Hello, world! 经过2秒
}
displayGreeting();
4.3 async和await的使用示例
示例1: 带有多个promises的异步函数
JavaScript
function fetchData1() {
return new Promise((resolve) => setTimeout(() => resolve('Data 1'), 1000));
}
function fetchData2() {
return new Promise((resolve) => setTimeout(() => resolve('Data 2'), 2000));
}
async function fetchAllData() {
const data1 = await fetchData1();
console.log(data1); // 输出: Data 1 经过1秒
const data2 = await fetchData2();
console.log(data2); // 输出: Data 2 经过2秒
}
fetchAllData();
示例2: 并行执行异步操作
要并行执行多个异步操作，可以用Promise.all()结合await。
JavaScript
function fetchData1() {
return new Promise((resolve) => setTimeout(() => resolve('Data 1'), 1000));
}
function fetchData2() {
return new Promise((resolve) => setTimeout(() => resolve('Data 2'), 2000));
}
async function fetchAllData() {
const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);
console.log(data1); // 输出: Data 1 经过2秒
console.log(data2); // 输出: Data 2 经过2秒
}
fetchAllData();
示例3: 使用try...catch处理错误
异步函数可以使用try...catch块处理错误，使代码更易读和管理。
JavaScript
function fetchDataWithError() {
return new Promise((resolve, reject) => setTimeout(() => reject('Error occurred'), 1000));
}
async function fetchData() {
try {
const data = await fetchDataWithError();
console.log(data);
} catch (error) {
console.error('Error:', error); // 输出: Error: Error occurred 经过1秒
}
}
fetchData();
示例4: 在类方法中使用async和await
异步函数也可以在类方法中使用。
JavaScript
class DataFetcher {
async fetchData() {
const data = await new Promise((resolve) => setTimeout(() => resolve('Fetched Data'), 1000));
return data;
}
}
const fetcher = new DataFetcher();
fetcher.fetchData().then((data) => {
console.log(data); // 输出: Fetched Data 经过1秒
});
示例5: 异步迭代器
异步迭代器允许处理异步到达的数据流。
JavaScript
async function* asyncGenerator() {
let i = 0;
while (i < 3) {
await new Promise((resolve) => setTimeout(resolve, 1000));
yield i++;
}
}
async function iterateAsyncGenerator() {
for await (let value of asyncGenerator()) {
console.log(value); // 输出: 0, 1 和 2，间隔1秒
}
}
iterateAsyncGenerator();
GO TO FULL VERSION