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适合并发；在实际脚本中应结合错误边界和返回值的传递顺序使用。

热心网友6

感谢整理，结构很清晰，尤其把"代码实现—参数语义—错误原因—适用场景"拆开讲，比单纯贴代码好读很多。几点自己的体会补充一下，供参考： 一是 getUserData 里用了 try/catch 后重新 throw，这个设计本身没问题，但配合 processUsers 里的 Promise.all 就有个隐患——只要其中一个用户请求失败，整个 all 直接 reject，另外两个已经成功的请求结果就丢了。实际联调时如果希望"部分成功也要看到数据"，用 allSettled 更稳，或者把单个用户的错误在 getUserData 内部消化掉、返回一个带状态的对象，让调用方自己决定怎么处理。 二是 safeFetch 里对 response.ok 的判断很关键，这点提得很到位。很多人只 await fetch 就以为成功了，其实 4xx、5xx 都不会走 catch，必须显式检查。另外如果后面还要用 response 的其他方法读一遍 body，记得 body 只能读一次。 三是 async 函数里 throw 出去但外层没接住，会变成 unhandled rejection，浏览器控制台和 Node 里表现还不一样，上线前建议统一加一层兜底。 四是多个 await 串行执行的场景（比如 getUserData 里先拿 user 再拿 posts）要注意，如果两个请求互不依赖，可以用 Pro

热心网友5

感谢整理，整体把箭头函数和解构、Promise 链式调用以及 async/await 的错误处理串得比较清楚，尤其是 then 里 return 的数据传递、catch 的位置、Promise.all 与 allSettled 的差异，这些都是实际脚本里很容易踩的点。 补充两个小建议：getUserData 里在 await fetch 之后最好也像 safeFetch 一样检查 response.ok，否则遇到 404 或 500 时可能继续走 response.json()，错误信息会不够直观；另外 processUsers 用 Promise.all 时，只要其中一个 getUserData 失败就会整体进入 catch，如果希望每个用户互不影响，可以按场景考虑 allSettled 或在单个 getUserData 内部做兜底。async 函数里 catch 后继续 throw 保留原异常这点很关键，调用方也要记得接住。整体示例很适合拿来复用，感谢分享。

热心网友7

这篇整理得很清楚，把箭头函数、解构、Promise 链式调用、Promise.all 和 allSettled，以及 async/await 的错误处理串起来了，示例也比较贴近脚本开发和前后端联调，直接拿来改改就能用。比较认同其中对 Promise.all 和 allSettled 的区分：前者适合全部成功才继续，后者适合批量请求里保留单项失败结果；catch 中统一处理再 throw 给调用方也很实用。 补充一点：getUserData 里 fetch 之后最好也像 safeFetch 那样判断 response.ok，因为 HTTP 404、500 不会让 fetch 自动进入 catch，只有网络异常之类才会 reject。另外 getUserData 里两次请求目前是顺序 await，如果 posts 不依赖 user，可以考虑并发发起以减少等待；不过错误处理和依赖关系要写清楚。整体结构清晰，适合作为异步编程和错误处理的落地参考。