怎样在异步函数中正确向外部声明的数组添加数据

在 async 函数中，若在作用域内重复声明同名变量（如 const data），会遮蔽外部 let 声明的数组，导致后续调用 push() 时因 data 指向 json 对象而报错“push is not a function”。

在 async 函数中，若在作用域内重复声明同名变量（如 const data），会遮蔽外部 let 声明的数组，导致后续调用 push() 时因 data 指向 json 对象而报错“push is not a function”。

这是一个典型的变量作用域与命名冲突问题。代码中首先在全局作用域声明了 let data = []，但在 getUserData 函数内部又使用 const data = await response.json() 重新声明了一个同名变量。由于 response.json() 返回的是一个 JavaScript 对象（例如 { results: [...] }），此时函数内的 data 指向该对象，而非外部的空数组。因此执行 data.push(newUser) 实际是在对一个普通对象调用 push 方法——而对象没有该方法，从而抛出 TypeError: data.push is not a function。

✅ 正确做法是：避免变量名冲突，为 JSON 响应数据使用独立、语义化的变量名（如 userData、apiResponse），确保对原始数组 data 的引用始终有效。

以下是修复后的完整示例：

let data = [];async function getUserData() {  try {    const response = await fetch('https://randomuser.me/api');    if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);    const userData = await response.json(); // ✅ 使用 userData，不覆盖外部 data    const user = userData.results[0];    const newUser = {      name: `${user.name.title} ${user.name.first}`,      money: Math.floor(Math.random() * 1000000),    };    data.push(newUser); // ✅ 此时 data 仍指向初始声明的数组  } catch (error) {    console.error('Failed to fetch or process user data:', error);  }}getUserData();// 可选：验证结果setTimeout(() => {  console.log('Collected users:', data); // 输出类似 [{ name: "Mr John", money: 428931 }]}, 1500);

? 关键注意事项：

• ❌ 不要复用外部变量名（如 data）声明响应体；这是最常见也最隐蔽的错误来源；
• ✅ 推荐采用语义化命名：userData、apiResponse、payload 等，提升可读性与可维护性；
• ✅ 建议始终包裹 fetch 调用在 try...catch 中，捕获网络异常与解析失败；
• ✅ 注意 push() 参数：上例中 newUser 是单个对象，直接 push(newUser) 即可；若误写为 push([newUser])，则会插入嵌套数组，需根据实际数据结构调整。

通过清晰的作用域管理与严谨的错误处理，即可安全、可靠地在异步流程中累积数据到外部数组。