JavaScript 异步编程学习笔记
什么是异步编程
JavaScript 是一种单线程语言，也就是说，在同一时间内只能执行一个任务。但有些任务，如网络请求、文件读取等，需要耗费一定时间才能得到结果。如果在这段时间内无法执行其他任务，会导致程序运行缓慢甚至卡顿。为了解决这个问题，JavaScript 引入了异步编程。
异步编程是指，在执行某个任务时，将其放在后台执行，继续执行其他任务，等到该任务完成后再回来处理其结果。这样就能更充分地利用计算机的资源，提高程序的效率。
异步编程的实现方式
JavaScript 中实现异步编程的方式主要有回调函数、Promise 和 async/await。
回调函数
回调函数是最早的异步编程实现方式之一。其原理是，在需要执行耗时任务的函数中，接受一个回调函数作为参数，在异步操作完成后调用该回调函数处理结果。
javascriptCopy Codefunction getDataFromServer(callback) {
setTimeout(() => {
const data = { name: "张三", age: 18 };
callback(data);
}, 1000);
}
getDataFromServer(data => {
console.log(data.name); // 输出：张三
});
Promise
Promise 是 ES6 中引入的异步编程新特性，相较于回调函数，它具有更好的可读性和可维护性。
Promise 对象有三种状态：pending（等待中）、fulfilled（已成功）和 rejected（已失败）。在异步操作完成后，通过调用 resolve 或 reject 函数改变 Promise 对象的状态，并将异步操作的结果传递给后续的处理函数。
javascriptCopy Codefunction getDataFromServer() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const data = { name: "张三", age: 18 };
resolve(data);
}, 1000);
});
}
getDataFromServer()
.then(data => {
console.log(data.name); // 输出：张三
})
.catch(error => {
console.error(error);
});
async/await
async/await 是 ES8 中引入的异步编程新特性，它建立在 Promise 的基础上，使代码看起来更像同步代码，也更加易读。
使用 async 关键字修饰函数，函数执行时将返回一个 Promise 对象，可以使用 await 关键字暂停异步操作，并等待其完成后再继续执行。
javascriptCopy Codeasync function getDataFromServer() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const data = { name: "张三", age: 18 };
resolve(data);
}, 1000);
});
}
(async () => {
const data = await getDataFromServer();
console.log(data.name); // 输出：张三
})();
异步编程实例
以下是一个根据输入框的内容动态搜索 Github 用户名的实例。
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<title>GitHub 用户搜索</title>
</head>
<body>
<input type="text" id="search-box" placeholder="请输入用户名" />
<ul id="user-list"></ul>
<script>
const userList = document.getElementById("user-list");
const searchBox = document.getElementById("search-box");
async function searchUser() {
const value = searchBox.value;
if (!value) {
return;
}
try {
const response = await fetch(`https://api.github.com/search/users?q=${value}`);
const data = await response.json();
const users = data.items;
userList.innerHTML = "";
users.forEach(user => {
const li = document.createElement("li");
li.textContent = user.login;
userList.appendChild(li);
});
} catch (error) {
console.error(error);
}
}
searchBox.addEventListener("keyup", searchUser);
</script>
</body>
</html>
在输入框中输入关键字后，将发送网络请求获取相关用户信息，并将结果动态地展示在页面上。