如何在TypeScript中从URL获取JSON数据并保存到const变量

嘿，我来帮你搞定这个问题～在TypeScript里从指定URL获取JSON并赋值给const变量，这里需要注意一个关键点：网络请求是异步操作，没法像同步代码那样直接把结果赋值给变量，得用异步相关的语法来处理，我给你两种常用的方案：

方案1：使用Top-Level Await（推荐，环境支持的话） #

如果你的运行环境支持ES模块（比如现代浏览器、Node.js 14.8+），可以直接用顶层await来完成，这样就能直接把异步结果赋值给const变量：

// 替换成你要请求的实际URL
const targetUrl = 'https://example.com/your-data.json';

// 发起请求并解析JSON
const data = await fetch(targetUrl)
  .then(response => {
    // 先检查请求是否成功（HTTP状态码2xx）
    if (!response.ok) {
      throw new Error(`请求失败，状态码: ${response.status}`);
    }
    // 解析响应为JSON格式
    return response.json();
  })
  .catch(error => {
    // 处理请求过程中的错误（比如网络问题、解析失败）
    console.error('获取数据出错:', error);
    // 可以返回一个默认值，避免后续代码报错
    return [];
  });

// 此时data就是你要的JSON数据，比如符合你给出的示例格式
console.log(data);
// 示例输出: [ { "name": "Peter", "age": "20" }, { "name": "John", "age": "25" } ]

方案2：在异步函数内部处理（兼容更多场景） #

如果你的环境不支持顶层await，可以把请求逻辑封装到一个异步函数里，再通过await获取结果：

async function fetchJsonData(url: string) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP错误！状态码: ${response.status}`);
    }
    // 解析JSON并返回
    return await response.json();
  } catch (error) {
    console.error('获取数据失败:', error);
    // 返回默认值
    return [];
  }
}

// 调用函数并获取数据
const data = await fetchJsonData('https://example.com/your-data.json');
console.log(data);

补充说明 #

• 为什么不能直接同步赋值？因为fetch会返回一个Promise，表示异步操作的结果，必须等待这个Promise完成（用await或者.then()）才能拿到实际的JSON数据。
• 错误处理很重要：一定要处理请求失败、网络异常、JSON解析失败的情况，避免程序意外崩溃。
• 如果是在Node.js环境中，Node.js 18及以上版本原生支持fetch；如果是更早版本，需要安装node-fetch包并导入使用。

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