概要

        在 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：本人才学尚浅，如有纰漏，还请不吝赐教！