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中实现异步编程的主要方式，开发者可以根据具体需求选择合适的方法。