当前位置：首页 > 文章列表 > 文章 > 前端 > 掌握 JavaScript 异步编程

掌握 JavaScript 异步编程

来源：dev.to 2024-10-28 13:30:49 0浏览收藏

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《掌握 JavaScript 异步编程》，聊聊，我们一起来看看吧！

掌握 JavaScript 异步编程

同步编程是 javascript 中的一个重要概念，使您能够在不阻塞主线程的情况下处理 api 调用、文件读取和计时器等操作。如果您对这个概念不熟悉或想巩固您的理解，这篇文章适合您！

什么是异步编程？

在同步编程中，任务是一个接一个执行的，这可能会导致资源使用效率低下，尤其是在处理需要时间的操作（如网络请求）时。异步编程允许您的代码在等待这些操作完成的同时运行，从而提高性能和响应能力。

关键概念

回调
承诺
异步/等待

让我们逐一分解这些概念。

1。回调

回调是作为参数传递给另一个函数的函数，并在任务完成后执行。虽然简单，但当您有嵌套函数时，回调可能会导致“回调地狱”。

function fetchdata(callback) {
    settimeout(() => {
        const data = "data received!";
        callback(data);
    }, 1000);
}

fetchdata((data) => {
    console.log(data); // output: data received!
});

**2。承诺
**promise 提供了回调的更清晰的替代方案。 promise 代表了一个可能现在可用、将来可用、或者永远不可用的值。它可以处于三种状态之一：待处理、已完成或已拒绝。

以下是如何使用 promise：

function fetchdata() {
    return new promise((resolve, reject) => {
        settimeout(() => {
            const data = "data received!";
            resolve(data); // or reject(error);
        }, 1000);
    });
}

fetchdata()
    .then((data) => {
        console.log(data); // output: data received!
    })
    .catch((error) => {
        console.error(error);
    });

**3。异步/等待

es2017 中引入的 async 和 wait 提供了一种更易读的方式来处理 promise。您将一个函数定义为异步，并且在该函数中，您可以使用await 暂停执行，直到解决promise。

async function fetchdata() {
    return new promise((resolve) => {
        settimeout(() => {
            resolve("data received!");
        }, 1000);
    });
}

async function getdata() {
    try {
        const data = await fetchdata();
        console.log(data); // output: data received!
    } catch (error) {
        console.error(error);
    }
}

getdata();

错误处理

使用异步代码时，正确的错误处理至关重要。有了promise，你可以使用.catch()，有了async/await，你可以使用try/catch块。

现实世界的例子

让我们把它放在上下文中。下面是使用 fetch 从 api 获取数据的示例，它返回一个 promise：

async function fetchUserData(userId) {
    try {
        const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
        if (!response.ok) {
            throw new Error("Network response was not ok");
        }
        const userData = await response.json();
        console.log(userData);
    } catch (error) {
        console.error("Fetch error:", error);
    }
}

fetchUserData(1);