如何用 Fetch API 发起一个基础的 GET 请求并获取 JSON-js教程-PHP中文网

用 Fetch API 发起 GET 请求需调用 fetch() 并用 .json() 解析响应体；必须手动检查 response.ok 或 status，因 fetch 不会自动抛出 HTTP 错误异常。

如何用 fetch api 发起一个基础的 get 请求并获取 json

用 Fetch API 发起基础 GET 请求并解析 JSON 很简单，核心是调用 fetch()，然后用 .json() 方法处理响应体。

发起 GET 请求并检查状态

Fetch 默认就是 GET 方法，所以只需传入 URL。但要注意：fetch 不会因 HTTP 错误状态（如 404、500）抛出异常，需手动检查 response.ok 或 response.status。

response.ok 为 true 表示状态码在 200–299 范围内
建议始终检查，避免静默失败

用 .json() 解析响应体

JSON 响应必须通过 response.json() 显式解析，它返回一个 Promise，不能直接读取 response.body。

arcgis-js

提供 ArcGIS Maps SDK for JavaScript 开发辅助，涵盖 2D/3D 地图视图、图层管理、数据可视化、空间分析等功能模块的参考和示例指导。

下载

response.json() 会自动读取流并解析为 JavaScript 对象或数组
如果后端返回的不是合法 JSON，这里会抛出 SyntaxError
不要写成 JSON.parse(response) —— 这是常见错误

完整可运行示例

下面是一个带错误处理的基础写法：

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    console.log(data.title); // 输出："sunt aut facere repellat provident..."
  })
  .catch(error => {
    console.error('请求失败:', error.message);
  });

用 async/await 写更清晰

现代写法推荐使用 async/await，语义更直观：

async function fetchPost() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}`);
    }
    const data = await response.json();
    console.log(data.title);
  } catch (error) {
    console.error('加载失败:', error);
  }
}
fetchPost();