js实现async
异步编程的实现方式
在JavaScript中，异步编程可以通过多种方式实现，包括回调函数、Promise和async/await。以下是几种常见的实现方法。
回调函数
回调函数是JavaScript中最基础的异步编程方式。通过将函数作为参数传递给另一个函数，在异步操作完成后调用该函数。
function fetchData(callback) {
setTimeout(() => {
callback('Data fetched');
}, 1000);
}
fetchData((data) => {
console.log(data); // 输出: Data fetched
});Promise
Promise是一种更现代的异步编程方式，可以避免回调地狱（Callback Hell），并提供更清晰的代码结构。
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Data fetched');
}, 1000);
});
}
fetchData()
.then((data) => {
console.log(data); // 输出: Data fetched
})
.catch((error) => {
console.error(error);
});async/await
async/await是基于Promise的语法糖，使得异步代码看起来更像同步代码，提高了代码的可读性。
async function fetchData() {
return new Promise((resolve) => {
setTimeout(() => {
resolve('Data fetched');
}, 1000);
});
}
async function main() {
try {
const data = await fetchData();
console.log(data); // 输出: Data fetched
} catch (error) {
console.error(error);
}
}
main();并行执行多个异步操作
使用Promise.all可以并行执行多个异步操作，并在所有操作完成后获取结果。
async function fetchData1() {
return new Promise((resolve) => {
setTimeout(() => {
resolve('Data 1 fetched');
}, 1000);
});
}
async function fetchData2() {
return new Promise((resolve) => {
setTimeout(() => {
resolve('Data 2 fetched');
}, 1500);
});
}
async function main() {
try {
const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);
console.log(data1, data2); // 输出: Data 1 fetched Data 2 fetched
} catch (error) {
console.error(error);
}
}
main();错误处理
在async/await中，可以使用try/catch块来捕获和处理错误。
async function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject('Error fetching data');
}, 1000);
});
}
async function main() {
try {
const data = await fetchData();
console.log(data);
} catch (error) {
console.error(error); // 输出: Error fetching data
}
}
main();链式调用
Promise和async/await可以结合使用，实现链式调用的异步操作。
async function step1() {
return new Promise((resolve) => {
setTimeout(() => {
resolve('Step 1 completed');
}, 1000);
});
}
async function step2(data) {
return new Promise((resolve) => {
setTimeout(() => {
resolve(`${data} -> Step 2 completed`);
}, 1000);
});
}
async function main() {
try {
const result1 = await step1();
const result2 = await step2(result1);
console.log(result2); // 输出: Step 1 completed -> Step 2 completed
} catch (error) {
console.error(error);
}
}
main();使用async函数的注意事项
async函数总是返回一个Promise，即使函数内部没有显式返回Promise。
async function getValue() {
return 'Hello';
}
getValue().then((value) => {
console.log(value); // 输出: Hello
});异步迭代器
在ES2018中引入了异步迭代器，可以用于遍历异步数据源。
async function* asyncGenerator() {
yield 'Hello';
yield 'World';
}
(async () => {
for await (const value of asyncGenerator()) {
console.log(value); // 输出: Hello World
}
})();以上方法涵盖了JavaScript中实现异步编程的主要方式，开发者可以根据具体需求选择合适的方法。
