ES6+异步编程：Promise与async/await错误处理

脚本专家

ES6+给JavaScript带来的变化集中在变量声明、函数写法、解构赋值、模块系统和异步组织方式。围绕箭头函数、Promise、async/await和错误处理，原文给出了一组可直接运行的示例。下面按代码实现、参数语义、错误原因和适用场景重新组织，便于在脚本开发和前后端联调中复用。

一、箭头函数、解构与参数处理

2. const add = (a, b) => a + b;
3. const square = x => x * x;
4. const greet = ({ name, age }) => {
5.   return `Hello ${name}, you are ${age} years old`;
6. };
8. const user = { name: 'Alice', age: 30, city: 'Beijing' };
9. const { name, age } = user;
11. const numbers = [1, 2, 3, 4, 5];
12. const [first, second, ...rest] = numbers;
14. const { city = 'Shanghai' } = user;
16. function printUser({ name, age }) {
17.   console.log(`${name}: ${age}`);
18. }

复制代码

上述代码中，add和square利用箭头函数省略return；greet通过参数解构直接取得name和age；对象解构可配合默认值，数组解构用...rest收集剩余元素；printUser展示函数参数解构。落地时应注意：默认值只在对应属性为undefined时生效，const适合不需要重新赋值的配置和引用。

二、Promise链式调用与并发结果处理

2. const fetchData = () => {
3.   return new Promise((resolve, reject) => {
4.     setTimeout(() => {
5.       const data = { id: 1, name: 'test' };
6.       resolve(data);
7.     }, 1000);
8.   });
9. };
11. fetchData()
12.   .then(data => {
13.     console.log('Data:', data);
14.     return data.id;
15.   })
16.   .then(id => {
17.     console.log('ID:', id);
18.   })
19.   .catch(error => {
20.     console.error('Error:', error);
21.   });
23. const promise1 = fetchData();
24. const promise2 = fetchData();
25. Promise.all([promise1, promise2])
26.   .then(results => {
27.     console.log('All results:', results);
28.   });
30. Promise.allSettled([promise1, promise2])
31.   .then(results => {
32.     results.forEach(result => {
33.       if (result.status === 'fulfilled') {
34.         console.log('Success:', result.value);
35.       } else {
36.         console.log('Failed:', result.reason);
37.       }
38.     });
39.   });

复制代码

fetchData用setTimeout在1秒后resolve一个对象，用于模拟异步数据。链式then中返回data.id后，下一个then才能拿到id；catch统一接收链上前面的异常。Promise.all等待全部成功，适合多个请求都成功才继续的场景。Promise.allSettled不会因为单项失败而丢失其他结果，遍历时按status区分fulfilled和rejected，分别读取value或reason。排查时先确认then中是否return了后续需要的数据，再检查catch是否被过早吞掉。

三、async/await与HTTP错误处理

2. async function getUserData(userId) {
3.   try {
4.     const response = await fetch(`/api/users/${userId}`);
5.     const user = await response.json();
6.     const postsResponse = await fetch(`/api/users/${userId}/posts`);
7.     const posts = await postsResponse.json();
8.     return { ...user, posts };
9.   } catch (error) {
10.     console.error('Error:', error);
11.     throw error;
12.   }
13. }
15. async function processUsers() {
16.   try {
17.     const users = await Promise.all([
18.       getUserData(1),
19.       getUserData(2),
20.       getUserData(3)
21.     ]);
22.     console.log('All users:', users);
23.   } catch (error) {
24.     console.error('Failed to get users:', error);
25.   }
26. }
28. const fetchAndProcess = async () => {
29.   const data = await fetchData();
30.   return processData(data);
31. };
33. async function safeFetch(url) {
34.   try {
35.     const response = await fetch(url);
36.     if (!response.ok) {
37.       throw new Error(`HTTP error! status: ${response.status}`);
38.     }
39.     return await response.json();
40.   } catch (error) {
41.     console.error('Fetch failed:', error);
42.     throw error;
43.   }
44. }

复制代码

getUserData按顺序await用户与文章请求；processUsers用Promise.all并发三个用户；async箭头函数保持与普通async函数一致的Promise返回特征。fetch请求在HTTP 4xx/5xx时不会自动进入catch，safeFetch用response.ok判断并抛出Error，这是原文错误处理代码的关键点。safeFetch先检查response.ok，非成功状态抛出带status的Error，再由catch打印并继续throw，调用方仍能感知失败。排查顺序建议：先看response.ok和status，再看catch中的error；并发场景看Promise.all外层catch；JSON解析失败也会进入catch。

四、对比与兼容性细节
异步模式对比：回调可读性低、错误处理困难、并发处理困难；Promise可读性中，错误处理用链式catch，并发用Promise.all；async/await可读性高，错误处理用try/catch，并发仍用Promise.all。变量声明对比：var是函数作用域、可重复声明、存在提升；let和const是块级作用域、不可重复声明、存在暂时性死区。模块系统对比：CommonJS静态分析否、树摇优化困难、浏览器需要打包；ES Modules静态分析是、树摇容易、浏览器原生支持。由此带来的工程影响是，ES Modules更利于静态分析和按需打包，但项目仍需结合浏览器兼容和构建流程；const优先可减少意外重赋值，需要变更引用时再用let。

五、代码风格与复用建议
const优先，箭头函数保持简洁，解构参数给出默认值。

2. const PI = 3.14159;
3. const config = { timeout: 5000 };
5. const numbers = [1, 2, 3];
6. const doubled = numbers.map(n => n * 2);
8. function createUser({ name, email, age = 18 }) {
9.   return { name, email, age };
10. }

复制代码

这些写法与原文最佳实践一致：异步错误处理用try/catch或catch兜底，并发任务用Promise.all，若需要全部结果则用Promise.allSettled。原文总结中强调async/await是异步编程首选、const优先于let、ES Modules是趋势、Promise.all适合并发；在实际脚本中应结合错误边界和返回值的传递顺序使用。