如何在async异步函数外部访问fetch请求获取的data数据

async 函数执行后会默认返回 Promise 实例，你只需要在原函数内将获取到的 data 主动 return 出来，就可以在外部通过await或者.then的方式拿到完整的请求结果。

第一步：修改原 request 函数，返回请求结果 #

const request = async () => {
  // 补充变量声明，避免污染全局作用域
  const current_url = window.location.href
  const network_id = parseInt(current_url.split('/')[5]) 
  const response = await fetch(`http://127.0.0.1:8000/network/${network_id}/edges.geojson/`);
  const data = await response.json();
  // 新增return语句将结果抛出
  return data;
}

第二步：外部调用获取结果的两种常用方案 #

• 方案1：在 async 上下文内使用 await 获取（最推荐）

// 你的业务逻辑可以封装在另一个async函数中
const handleBusiness = async () => {
  const resultData = await request();
  // 此处可正常使用请求返回的resultData
  console.log(resultData);
  // 后续所有依赖resultData的逻辑都写在这里即可
}
// 执行封装好的业务函数
handleBusiness();

• 方案2：在普通同步上下文/全局作用域内使用 .then 回调获取

// 如果需要挂载到全局变量使用
let globalRequestData = null;

request().then(data => {
  globalRequestData = data;
  // 所有依赖globalRequestData的逻辑必须写在这个回调内部
  console.log(globalRequestData);
  // 后续业务逻辑写在这里
}).catch(err => {
  // 可选：添加错误捕获逻辑，处理请求异常场景
  console.error('接口请求失败：', err);
})

注意事项 #

• 绝对不要尝试在同步代码中直接读取刚调用完 request 后的全局变量，此时异步请求还未完成，变量一定是未初始化的状态，所有依赖请求结果的逻辑必须放在 await 之后或者 .then 回调内部
• 建议为所有局部变量补充 const/let 声明，避免意外污染全局作用域

内容的提问来源于stack exchange，提问作者aba2s