全栈进阶指南

皮肤切换

async/await 的本质：基于 Promise 的语法糖，生成器（Generator）的现代替代 ​

理解 async/await 的核心概念 ​

async/await 是 ES2017（ES8）引入的异步编程语法糖，它建立在 Promise 的基础之上，提供了更简洁、更易读的异步代码编写方式。async/await 的本质是基于 Promise 的语法糖，让异步代码看起来像同步代码。

async 函数的基本用法 ​

javascript
// 声明一个 async 函数
async function fetchData() {
  return "数据";
}

// async 函数总是返回一个 Promise
console.log(fetchData()); // Promise { '数据' }

fetchData().then(result => {
  console.log(result); // "数据"
});

await 关键字的使用 ​

javascript
// 使用 await 等待 Promise 的结果
async function processData() {
  console.log("开始处理");
  
  // await 暂停函数执行，直到 Promise 完成
  const result = await Promise.resolve("处理完成");
  
  console.log(result); // "处理完成"
  return result;
}

processData();

async/await 与 Promise 的关系 ​

从 Promise 到 async/await ​

javascript
// 使用 Promise 链
function fetchUserDataWithPromise(userId) {
  return fetch(`/api/users/${userId}`)
    .then(response => response.json())
    .then(user => {
      return fetch(`/api/users/${userId}/posts`)
        .then(response => response.json())
        .then(posts => ({ user, posts }));
    })
    .catch(error => {
      console.error('获取用户数据失败:', error);
      throw error;
    });
}

// 使用 async/await
async function fetchUserDataWithAsync(userId) {
  try {
    const userResponse = await fetch(`/api/users/${userId}`);
    const user = await userResponse.json();
    
    const postsResponse = await fetch(`/api/users/${userId}/posts`);
    const posts = await postsResponse.json();
    
    return { user, posts };
  } catch (error) {
    console.error('获取用户数据失败:', error);
    throw error;
  }
}

async/await 的错误处理 ​

javascript
// Promise 方式的错误处理
function handleWithPromise() {
  return someAsyncOperation()
    .then(result => {
      return processResult(result);
    })
    .catch(error => {
      console.error('操作失败:', error);
      return fallbackOperation();
    });
}

// async/await 方式的错误处理
async function handleWithAsync() {
  try {
    const result = await someAsyncOperation();
    return await processResult(result);
  } catch (error) {
    console.error('操作失败:', error);
    return await fallbackOperation();
  }
}

async/await 的编译原理 ​

理解 async/await 的底层实现 ​

async/await 在底层是通过生成器（Generator）和 Promise 实现的。我们可以手动模拟这个过程：

javascript
// 模拟 async/await 的实现
function asyncToGenerator(generatorFunc) {
  return function() {
    const gen = generatorFunc.apply(this, arguments);
    
    return new Promise((resolve, reject) => {
      function step(key, arg) {
        let generatorResult;
        
        try {
          generatorResult = gen[key](arg);
        } catch (error) {
          return reject(error);
        }
        
        const { value, done } = generatorResult;
        
        if (done) {
          return resolve(value);
        } else {
          return Promise.resolve(value).then(
            value => step("next", value),
            error => step("throw", error)
          );
        }
      }
      
      step("next");
    });
  };
}

// 使用生成器模拟 async 函数
function* fetchUserDataGenerator(userId) {
  try {
    const userResponse = yield fetch(`/api/users/${userId}`);
    const user = yield userResponse.json();
    
    const postsResponse = yield fetch(`/api/users/${userId}/posts`);
    const posts = yield postsResponse.json();
    
    return { user, posts };
  } catch (error) {
    console.error('获取用户数据失败:', error);
    throw error;
  }
}

// 将生成器转换为类似 async 的函数
const fetchUserDataAsyncLike = asyncToGenerator(fetchUserDataGenerator);

生成器与 async/await 的对比 ​

javascript
// 生成器函数
function* generatorFunction() {
  const result1 = yield Promise.resolve("第一步");
  console.log(result1);
  
  const result2 = yield Promise.resolve("第二步");
  console.log(result2);
  
  return "完成";
}

// 手动执行生成器
const gen = generatorFunction();
gen.next().value.then(result1 => {
  gen.next(result1).value.then(result2 => {
    const finalResult = gen.next(result2);
    console.log(finalResult.value); // "完成"
  });
});

// 等价的 async 函数
async function asyncFunction() {
  const result1 = await Promise.resolve("第一步");
  console.log(result1);
  
  const result2 = await Promise.resolve("第二步");
  console.log(result2);
  
  return "完成";
}

asyncFunction().then(result => {
  console.log(result); // "完成"
});

async/await 的线性化特性 ​

将异步代码"线性化" ​

javascript
// 传统的回调方式（回调地狱）
function callbackHellExample() {
  fetch('/api/user')
    .then(response => response.json())
    .then(user => {
      fetch(`/api/users/${user.id}/posts`)
        .then(response => response.json())
        .then(posts => {
          fetch(`/api/posts/${posts[0].id}/comments`)
            .then(response => response.json())
            .then(comments => {
              console.log('用户:', user);
              console.log('帖子:', posts);
              console.log('评论:', comments);
            });
        });
    });
}

// Promise 链式调用
function promiseChainExample() {
  return fetch('/api/user')
    .then(response => response.json())
    .then(user => {
      return fetch(`/api/users/${user.id}/posts`)
        .then(response => response.json())
        .then(posts => ({ user, posts }));
    })
    .then(({ user, posts }) => {
      return fetch(`/api/posts/${posts[0].id}/comments`)
        .then(response => response.json())
        .then(comments => ({ user, posts, comments }));
    })
    .then(({ user, posts, comments }) => {
      console.log('用户:', user);
      console.log('帖子:', posts);
      console.log('评论:', comments);
    });
}

// async/await 线性化调用
async function asyncAwaitExample() {
  const response = await fetch('/api/user');
  const user = await response.json();
  
  const postsResponse = await fetch(`/api/users/${user.id}/posts`);
  const posts = await postsResponse.json();
  
  const commentsResponse = await fetch(`/api/posts/${posts[0].id}/comments`);
  const comments = await commentsResponse.json();
  
  console.log('用户:', user);
  console.log('帖子:', posts);
  console.log('评论:', comments);
}

并行执行与串行执行 ​

串行执行（默认行为） ​

javascript
async function serialExecution() {
  console.log("开始串行执行");
  
  // 这些操作会依次执行
  const result1 = await fetch('/api/data1');
  const result2 = await fetch('/api/data2');
  const result3 = await fetch('/api/data3');
  
  console.log("串行执行完成");
  return [result1, result2, result3];
}

并行执行 ​

javascript
async function parallelExecution() {
  console.log("开始并行执行");
  
  // 同时发起所有请求
  const promise1 = fetch('/api/data1');
  const promise2 = fetch('/api/data2');
  const promise3 = fetch('/api/data3');
  
  // 等待所有结果
  const result1 = await promise1;
  const result2 = await promise2;
  const result3 = await promise3;
  
  console.log("并行执行完成");
  return [result1, result2, result3];
}

// 或者使用 Promise.all
async function parallelExecutionWithAll() {
  console.log("开始并行执行");
  
  // 同时发起所有请求并等待全部完成
  const [result1, result2, result3] = await Promise.all([
    fetch('/api/data1'),
    fetch('/api/data2'),
    fetch('/api/data3')
  ]);
  
  console.log("并行执行完成");
  return [result1, result2, result3];
}

错误处理和边界情况 ​

错误传播 ​

javascript
async function errorHandlingExample() {
  try {
    const user = await fetchUser();
    const posts = await fetchUserPosts(user.id);
    const comments = await fetchPostComments(posts[0].id);
    
    return { user, posts, comments };
  } catch (error) {
    console.error('操作失败:', error);
    
    // 可以选择重新抛出错误
    // throw error;
    
    // 或者返回默认值
    return { user: null, posts: [], comments: [] };
  }
}

处理部分失败 ​

javascript
async function partialFailureHandling() {
  // 即使某些操作失败，也要继续执行其他操作
  const userPromise = fetchUser().catch(() => null);
  const postsPromise = fetchUserPosts().catch(() => []);
  const commentsPromise = fetchComments().catch(() => []);
  
  const [user, posts, comments] = await Promise.all([
    userPromise,
    postsPromise,
    commentsPromise
  ]);
  
  return { user, posts, comments };
}

实际应用场景 ​

在 React 组件中使用 ​

javascript
// React 函数组件中的 async/await
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    async function fetchUserData() {
      try {
        setLoading(true);
        const userData = await fetch(`/api/users/${userId}`).then(res => res.json());
        setUser(userData);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    }
    
    fetchUserData();
  }, [userId]);
  
  if (loading) return <div>加载中...</div>;
  if (error) return <div>错误: {error}</div>;
  if (!user) return <div>未找到用户</div>;
  
  return <div>欢迎, {user.name}!</div>;
}

服务器端 Node.js 应用 ​

javascript
// Express 路由中的 async/await
app.get('/api/users/:id', async (req, res) => {
  try {
    const user = await User.findById(req.params.id);
    
    if (!user) {
      return res.status(404).json({ error: '用户未找到' });
    }
    
    const posts = await Post.findByUserId(user.id);
    const userData = { ...user, posts };
    
    res.json(userData);
  } catch (error) {
    console.error('获取用户数据失败:', error);
    res.status(500).json({ error: '内部服务器错误' });
  }
});

最佳实践 ​

1. 合理使用并行执行 ​

javascript
// 好的做法：对于不相关的异步操作使用并行执行
async function fetchUserProfile(userId) {
  // 并行获取用户信息和统计数据
  const [user, stats] = await Promise.all([
    fetchUser(userId),
    fetchUserStats(userId)
  ]);
  
  return { user, stats };
}

// 避免不必要的串行执行
async function fetchUserProfileSerial(userId) {
  // 不必要的串行执行
  const user = await fetchUser(userId);  // 等待
  const stats = await fetchUserStats(userId);  // 再等待
  
  return { user, stats };
}

2. 正确处理错误 ​

javascript
// 好的做法：明确的错误处理
async function robustAsyncFunction() {
  try {
    const result = await someAsyncOperation();
    return result;
  } catch (error) {
    // 记录错误但不吞掉它
    console.error('操作失败:', error);
    
    // 根据需要决定是否重新抛出错误
    throw new Error(`操作失败: ${error.message}`);
  }
}

3. 避免在循环中串行执行 ​

javascript
// 不好的做法：在循环中串行执行
async function badLoop() {
  const results = [];
  for (const id of ids) {
    // 每次都等待，效率低
    const result = await fetch(`/api/data/${id}`);
    results.push(result);
  }
  return results;
}

// 好的做法：并行执行
async function goodLoop() {
  const promises = ids.map(id => fetch(`/api/data/${id}`));
  const results = await Promise.all(promises);
  return results;
}

总结 ​

async/await 是建立在 Promise 基础之上的语法糖，它通过生成器和 Promise 的结合实现了异步代码的"线性化"。这种语法让异步代码看起来像同步代码，大大提高了代码的可读性和可维护性。理解 async/await 的本质有助于我们更好地使用这一特性，避免常见的错误，并编写出更加优雅的异步代码。async/await 并没有改变 JavaScript 单线程和事件循环的本质，而是提供了一种更直观的方式来处理异步操作。

Copyright © 2025 梁欢的前后端技术笔记 鲁ICP备2025190626号