概要
在 JavaScript 中，代码默认是同步执行的。这意味着每一行代码都是按照顺序执行的，前一行代码执行完毕后才会执行下一行。这种执行方式称为同步（synchronous）执行。
然而，在实际开发中，我们常常需要执行一些耗时的操作，如网络请求、文件读写等。如果使用同步执行方式，代码会被阻塞，直到这些耗时操作完成，这会导致应用程序响应速度变慢，用户体验变差。
为了解决这个问题，JavaScript 提供了异步（asynchronous）处理机制。异步处理允许代码在执行耗时操作时不阻塞后续代码的执行，从而提高应用程序的响应速度和用户体验。
如何进行异步处理？
1. 回调函数（Callback）
回调函数是最早期的异步处理方式。通过将一个函数作为参数传递给另一个函数，当异步操作完成后调用这个回调函数。
示例：
function fetchData(callback) {
setTimeout(() => {
const data = { name: 'John Doe', age: 30 };
callback(data);
}, 1000); // 模拟异步操作
}
fetchData((data) => {
console.log('Data received:', data);
});
2. Promise
Promise 是 ES6 引入的一种异步处理方式，通过链式调用 .then() 和 .catch() 方法来处理异步操作的结果或错误。
示例：
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const success = true; // 模拟成功或失败
if (success) {
resolve({ name: 'John Doe', age: 30 });
} else {
reject('Failed to fetch data');
}
}, 1000);
});
}
fetchData()
.then((data) => {
console.log('Data received:', data);
})
.catch((error) => {
console.error('Error:', error);
});
3. async/await
async/await 是基于 Promise 的语法糖，使得异步代码看起来更像同步代码，从而更易读、更易写。
示例：
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const success = true; // 模拟成功或失败
if (success) {
resolve({ name: 'John Doe', age: 30 });
} else {
reject('Failed to fetch data');
}
}, 1000);
});
}
async function getData() {
try {
const data = await fetchData();
console.log('Data received:', data);
} catch (error) {
console.error('Error:', error);
}
}
getData();
小结
多写多敲多思考，毕竟，知己知彼才能看懂源码。
Tip：本人才学尚浅，如有纰漏，还请不吝赐教！