JavaScriptFetchAPI使用_JavaScript现代请求方式

夢幻星辰 2025-12-02 00:00:00 次阅读

Fetch API 提供简洁、基于 Promise 的网络请求方式，支持 GET/POST 请求及 JSON 解析；需手动检查 response.ok 判断 HTTP 错误，结合 async/await 可提升代码可读性。

JavaScript 的 Fetch API 提供了一种现代化、简洁的方式来发起网络请求。相比传统的 XMLHttpRequest，它更易读、支持 Promise，并且原生集成了解析 JSON 等常用操作。下面介绍它的基本用法和常见场景。

基本语法与 GET 请求

Fetch 最简单的用法是发起一个 GET 请求，获取远程数据。

调用 fetch() 会返回一个 Promise，响应结果需要通过 .json() 方法进一步解析。

示例：

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('请求失败');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('错误:', error);
  });

发送 POST 请求

向服务器提交数据时，需配置请求选项，如方法、请求头和请求体。

注意设置 Content-Type 为 application/json，并将数据用 JSON.stringify() 转换。

示例：

fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: '张三',
    age: 25
  })
})
.then(response => response.json())
.then(result => {
  console.log(result);
})
.catch(error => {
  console.error('错误:', error);
});

处理请求状态与错误

Fetch 只有在网络错误时才会触发 catch，HTTP 错误状态（如 404、500）不会自动 reject。必须手动检查 response.ok 或状态码。

response.ok：布尔值，表示状态码是否在 200-299 之间
response.status：返回具体的 HTTP 状态码
可结合这些判断来抛出错误，确保异常能被后续 catch 捕获

使用 async/await 简化写法

结合 async 和 await，可以让异步代码看起来更像同步，逻辑更清晰。

示例：

async function getData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error(`HTTP 错误! 状态: ${response.status}`);
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('请求出错:', error);
  }
}
getData();

基本上就这些。Fetch API 简洁强大，适合大多数前端请求场景，配合 async/await 使用体验更佳。不复杂但容易忽略的是对响应状态的手动判断。