前端绕不开的东西—async/await

一、技术背景与演进

异步编程发展史

• 回调函数时代：嵌套地狱（Callback Hell）导致代码可读性差
• Promise革命：链式调用改善代码结构，但仍需.then()嵌套
• async/await：ES7引入的语法糖，使异步代码呈现同步化书写风格

核心价值

• 消除回调嵌套，提升代码可维护性
• 通过同步化语法降低异步编程心智负担
• 与Promise生态完美兼容

二、语法规则详解

基础语法结构

// 定义异步函数 
async function fetchData() {    
try {        
const response = await axios.get('https://api.example.com'); // 等待Promise完成         
return response.data;     
} catch (error) {         
console.error('请求失败:', error);     
} }   

关键特性

• async函数自动返回Promise对象
• await会暂停函数执行，直到Promise完成
• 错误处理需配合try-catch结构

三、实战应用场景

顺序执行异步任务

async function processOrder() {    
const user = await getUser(); // 先获取用户     
const products = await getProducts(user.id); // 再获取商品    
const payment = await makePayment(products); // 最后支付     
return { user, products, payment }; 
}   

并行请求优化

async function loadMultipleResources() {   
const [data1, data2] = await Promise.all([        
fetch('/api/data1'),         
fetch('/api/data2')]);   
return { data1, data2 }; }   

四、最佳实践与注意事项

性能优化原则

• 避免在循环中使用await导致串行执行
• 合理使用Promise.all实现并行请求

常见误区

• await后需接Promise对象，否则会抛出错误
• 忘记处理异步函数的返回值（需.then()或await接收）

跨平台兼容性

• 微信小程序中需注意API的Promise封装
• 浏览器兼容性：IE不支持，需Babel转译