当前位置：首页 > JavaScript

js async实现

2026-02-01 05:25:42JavaScript

异步编程的实现方式

在JavaScript中，异步编程可以通过多种方式实现，主要包括回调函数、Promise、async/await等。每种方式适用于不同的场景，具有各自的优缺点。

回调函数

回调函数是最基础的异步处理方式，通过将函数作为参数传递给另一个函数，在异步操作完成后调用该函数。

function fetchData(callback) {
    setTimeout(() => {
        callback('Data received');
    }, 1000);
}

fetchData((data) => {
    console.log(data);
});

回调函数的缺点是容易导致回调地狱（Callback Hell），代码难以维护和理解。

Promise

Promise是ES6引入的异步解决方案，提供了更清晰的链式调用方式，避免了回调地狱。

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('Data received');
        }, 1000);
    });
}

fetchData()
    .then((data) => {
        console.log(data);
    })
    .catch((error) => {
        console.error(error);
    });

Promise支持链式调用，可以通过.then()和.catch()处理成功和失败的情况。

async/await

async/await是ES7引入的语法糖，基于Promise，使得异步代码看起来像同步代码，更易于理解和维护。

async function fetchData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('Data received');
        }, 1000);
    });
}

async function processData() {
    try {
        const data = await fetchData();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}

processData();

使用async标记的函数返回一个Promise，await用于等待Promise的解析结果。这种方式代码结构清晰，易于调试。

并行处理多个异步任务

在某些场景下，需要并行处理多个异步任务，可以使用Promise.all或Promise.race。

async function fetchMultipleData() {
    const [data1, data2] = await Promise.all([
        fetchData(),
        fetchData()
    ]);
    console.log(data1, data2);
}

fetchMultipleData();

Promise.all等待所有Promise完成，Promise.race返回最先完成的Promise结果。

错误处理

在异步编程中，错误处理非常重要。Promise和async/await提供了多种错误处理方式。

async function fetchDataWithError() {
    try {
        const data = await fetchData();
        console.log(data);
    } catch (error) {
        console.error('Error:', error);
    }
}

通过try/catch可以捕获异步操作中的错误，确保程序的健壮性。

实际应用示例

以下是一个实际应用中常见的异步操作示例，包括数据获取、处理和错误处理。

async function getUserData(userId) {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    if (!response.ok) {
        throw new Error('Failed to fetch user data');
    }
    return response.json();
}

async function displayUserData(userId) {
    try {
        const userData = await getUserData(userId);
        console.log('User data:', userData);
    } catch (error) {
        console.error('Error displaying user data:', error);
    }
}

displayUserData(1);

通过合理的异步编程方式，可以显著提升代码的可读性和可维护性。

js async实现