异步编程与Promise

暖阳浅笑-嘿

已于 2024-08-03 23:10:22 修改

阅读量535

点赞数 10

文章标签：异步 promise

于 2024-08-03 23:02:46 首次发布

本文链接：https://blog.csdn.net/weixin_41978174/article/details/140898622

版权

深入JavaScript：异步编程与Promise

引言

异步编程是JavaScript中的一个重要概念，允许你在不阻塞主线程的情况下执行耗时操作。介绍JavaScript中的异步编程，重点讲解Promise，并通过实例展示如何使用异步代码处理网络请求和其他耗时任务。

1. 什么是异步编程？

异步编程允许程序在等待耗时操作（如网络请求、文件读取）完成时继续执行其他任务。这种方式可以提高应用的响应速度和用户体验。

示例：同步与异步

同步代码会按顺序执行，每一步都要等待前一步完成。

console.log("Start");
console.log("Middle");
console.log("End");
// 输出顺序：Start -> Middle -> End

异步代码可以在某些任务（如定时器）完成后再执行。

console.log("Start");
setTimeout(() => {
    console.log("Middle");
}, 1000);
console.log("End");
// 输出顺序：Start -> End -> Middle

2. Promise 简介

Promise 是一种用于处理异步操作的对象，它代表一个在未来某个时间点才会完成的操作。Promise 有三种状态：

Pending（进行中）
Fulfilled（已完成）
Rejected（已拒绝）

创建一个Promise

let promise = new Promise((resolve, reject) => {
    // 异步操作
    setTimeout(() => {
        let success = true; // 模拟操作成功或失败
        if (success) {
            resolve("Operation succeeded");
        } else {
            reject("Operation failed");
        }
    }, 1000);
});

处理Promise结果

使用 then 和 catch 方法处理Promise的结果。

promise
    .then(result => {
        console.log(result); // 输出: Operation succeeded
    })
    .catch(error => {
        console.log(error);
    });

3. 使用Promise处理网络请求

在实际开发中，网络请求是常见的异步操作。我们可以使用Fetch API来演示如何通过Promise处理HTTP请求。

示例：获取GitHub用户信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fetch API Example</title>
</head>
<body>
    <h1>GitHub User Info</h1>
    <input type="text" id="username" placeholder="Enter GitHub username">
    <button id="fetchButton">Fetch Info</button>
    <div id="result"></div>

    <script>
        document.getElementById("fetchButton").addEventListener("click", fetchUserInfo);

        function fetchUserInfo() {
            let username = document.getElementById("username").value.trim();
            if (username) {
                fetch(`https://api.github.com/users/${username}`)
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('User not found');
                        }
                        return response.json();
                    })
                    .then(data => {
                        let resultDiv = document.getElementById("result");
                        resultDiv.innerHTML = `
                            <p><strong>Name:</strong> ${data.name}</p>
                            <p><strong>Bio:</strong> ${data.bio}</p>
                            <p><strong>Public Repos:</strong> ${data.public_repos}</p>
                        `;
                    })
                    .catch(error => {
                        document.getElementById("result").innerText = error.message;
                    });
            } else {
                alert("Please enter a GitHub username.");
            }
        }
    </script>
</body>
</html>

4. Async/Await

async 和 await 是基于Promises的语法糖，使异步代码更具可读性。使用 async 关键字定义一个异步函数，并在异步操作前使用 await。

示例：使用Async/Await

async function fetchUserInfo(username) {
    try {
        let response = await fetch(`https://api.github.com/users/${username}`);
        if (!response.ok) {
            throw new Error('User not found');
        }
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error(error.message);
    }
}

fetchUserInfo("octocat");

暖阳浅笑-嘿

关注

10
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
异步编程与Promise

异步编程允许程序在等待耗时操作（如网络请求、文件读取）完成时继续执行其他任务。这种方式可以提高应用的响应速度和用户体验。Promise 是一种用于处理异步操作的对象，它代表一个在未来某个时间点才会完成的操作。Pending（进行中）Fulfilled（已完成）Rejected（已拒绝）
复制链接

扫一扫