1. 异步任务的定义#

• 同步任务：立即执行的任务，会阻塞主线程直到完成。例如：

  1
  const sum = 1 + 2; // 同步任务，立即执行
  2
  console.log(sum); // 同步任务，立即执行
  

• 异步任务：不会立即完成的任务，执行时会释放主线程，完成后再通知主线程。例如：

  1
  setTimeout(() => console.log('延迟执行'), 1000); // 异步任务，1秒后执行
  2
  fetch('/api/data') // 异步任务，等待网络响应
  3
    .then(res => res.json());
  

2. 常见的异步任务类型#

3. 异步任务的执行机制#

JavaScript 通过事件循环（Event Loop） 和任务队列（Task Queue） 来处理异步任务：

1. 执行栈：主线程执行同步任务，形成执行栈。
2. 任务队列：异步任务完成后，将回调函数放入任务队列。
3. 事件循环：执行栈为空时，从任务队列中取出任务执行。

执行流程示例：

1
console.log('1'); // 同步任务，立即执行
2

3
setTimeout(() => console.log('2'), 0); // 异步任务，放入任务队列
4

5
console.log('3'); // 同步任务，立即执行
6

7
// 执行结果：1 → 3 → 2

4. 异步任务的分类#

在现代 JavaScript 中，异步任务分为两类：

• 宏任务（Macro Task）：

  • 包括：setTimeout、setInterval、I/O 操作、DOM 事件、setImmediate（Node.js）
  • 执行顺序：每个宏任务执行完后，会检查并执行所有微任务

• 微任务（Micro Task）：

  • 包括：Promise.then()、async/await、process.nextTick（Node.js）、queueMicrotask
  • 执行顺序：当前宏任务执行完后，立即执行所有微任务

5. 为什么需要异步任务？#

• 避免阻塞主线程：如果所有操作都是同步的，网络请求或文件读写等耗时操作会导致页面卡顿，用户体验差。
• 提高性能：主线程可以在等待异步任务完成时处理其他工作，充分利用系统资源。
• 处理并发操作：虽然 JavaScript 是单线程的，但通过异步任务可以模拟并发效果，同时处理多个操作。

6. 异步任务的处理方式#

• 回调函数：早期的异步处理方式，容易导致回调地狱（Callback Hell）。

  1
  fs.readFile('file1.txt', (err, data1) => {
  2
    fs.readFile('file2.txt', (err, data2) => {
  3
      fs.readFile('file3.txt', (err, data3) => {
  4
        // 嵌套多层，代码难以维护
  5
      });
  6
    });
  7
  });
  

• Promise：解决回调地狱，提供链式调用。

  1
  readFile('file1.txt')
  2
    .then(data1 => readFile('file2.txt'))
  3
    .then(data2 => readFile('file3.txt'))
  4
    .then(data3 => console.log(data3))
  5
    .catch(err => console.error(err));
  

• async/await：Promise 的语法糖，使代码更像同步代码。

  1
  async function readFiles() {
  2
    try {
  3
      const data1 = await readFile('file1.txt');
  4
      const data2 = await readFile('file2.txt');
  5
      const data3 = await readFile('file3.txt');
  6
      console.log(data3);
  7
    } catch (err) {
  8
      console.error(err);
  9
    }
  10
  }
  

总结：异步任务是 JavaScript 中处理耗时操作的核心机制，通过事件循环和任务队列实现非阻塞执行，提高了代码的执行效率和用户体验。现代 JavaScript 提供了 Promise 和 async/await 等语法糖，使异步代码的编写和阅读更加简洁直观。

方式一：回调函数#

1
function getAsyncData(callback) {
2
  setTimeout(() => {
3
    const result = '异步数据';
4
    callback(result); // 异步任务完成后调用回调函数
5
  }, 1000);
6
}
7

8
getAsyncData((data) => {
9
  console.log(data); // 1秒后输出 '异步数据'
10
});

方式二：Promise#

1
function getAsyncData() {
2
  return new Promise((resolve) => {
3
    setTimeout(() => {
4
      resolve('异步数据');
5
    }, 1000);
6
  });
7
}
8

9
getAsyncData().then((data) => {
10
  console.log(data); // 1秒后输出 '异步数据'
11
});

方式三：async/await#

1
function getAsyncData() {
2
  return new Promise((resolve) => {
3
    setTimeout(() => {
4
      resolve('异步数据');
5
    }, 1000);
6
  });
7
}
8

9
async function main() {
10
  const data = await getAsyncData(); // 暂停执行，等待异步任务完成
11
  console.log(data); // 1秒后输出 '异步数据'
12
}
13

14
main();

执行流程分析：#

1. 同步代码执行：

   • 当代码执行到第9行时，axios.get('/api/list') 被调用，发起网络请求。
   • 由于这是一个异步操作，JavaScript 引擎会将其放入任务队列（具体来说是宏任务队列）。
   • 同时，axios.get() 会立即返回一个 Promise 对象，此时 Promise 处于 pending 状态。

2. 链式调用：

   • 接着调用 .then() 方法，注册一个回调函数。这个回调函数会在 Promise 状态变为 fulfilled 时执行。
   • 整个 axios.get('/api/list').then(...) 表达式的结果仍然是一个 Promise 对象（因为 .then() 方法返回一个新的 Promise）。

3. 变量赋值：

   • 将这个 Promise 对象赋值给 list 变量。

4. 同步执行：

   • 执行第13行的 console.log(list);，这是一个同步任务，会立即执行。
   • 此时网络请求还未完成，Promise 仍处于 pending 状态，所以会打印出 Promise {<pending>}。

5. 异步回调执行：

   • 当网络请求完成后，axios 会将 Promise 状态改为 fulfilled。
   • 此时，.then() 中注册的回调函数会被放入微任务队列。
   • 当执行栈为空时，事件循环会先执行所有微任务，所以回调函数会被执行，打印出 ‘请求完成’ 并返回 res.data。

执行顺序总结：#

1. 发起网络请求（异步任务，放入宏任务队列）
2. 返回 Promise 对象（同步）
3. 注册回调函数（同步）
4. 赋值给 list 变量（同步）
5. 打印 list（同步，输出 Promise 对象）
6. 网络请求完成（异步任务完成）
7. 回调函数放入微任务队列
8. 执行栈为空，执行微任务队列中的回调函数
9. 打印 ‘请求完成’（异步回调）

为什么不是 undefined？#

• 因为 axios.get() 会立即返回一个 Promise 对象，而不是等到请求完成后才返回。
• 所以 list 变量被赋值的是 Promise 对象，而不是 undefined。
• 只有当你尝试直接获取异步操作的结果而不使用回调或 Promise 时，才会得到 undefined。

验证方法：#

你可以在浏览器控制台或 Node.js 环境中运行这段代码，观察输出结果，会看到类似这样的顺序：

1
Promise {<pending>}
2
调用前
3
开始执行
4
调用后
5
请求完成  // 来自 axios.get 的回调
6
请求完成  // 来自 fetchData 函数的回调

结论：你的理解是完全正确的！axios.get 是异步任务，会被放入任务队列，而 console.log(list) 是同步任务，会立即执行，打印出当时的 Promise 对象。