用 HTML Fetch 实战 API：从点外卖到获取天气的全流程

在日常开发中，用 HTML 的 fetch 向 API 发起请求，很像在点外卖：先选好要调用的服务，确定好参数，再点一下“下单”，等一份返回结果。本文带你把流程拆细，从创建请求、处理响应到常见问题，用可直接落地的代码把思路跑通。

开场：为什么用 fetch 而不是 xhr？

不用纠结“哪个更好”，在现代浏览器原生支持的 API 中，fetch 更简洁、更易与现代 JavaScript 集成，尤其适合在前端页面直接获取数据。以获取城市天气为例，你不需要再配置复杂的对象和回调地狱，更接近“请求—响应—处理”的链路。

创建请求：参数与配置

在浏览器端，fetch 接受一个字符串 URL 或一个 Request 对象，以及可选的配置对象（如方法、头、缓存等）。举个常见场景：获取某城市天气。

<script>
  const url = 'https://api.example.com/weather';
  const city = '北京';

  fetch(url, {
    method: 'GET',
    headers: {
      'Accept': 'application/json',
      'Authorization': 'Bearer YOUR_TOKEN'
    },
    params: {
      city: city
    }
  })
  // 后续处理
</script>

注意：fetch 并不直接支持 URL 参数，需要手动拼接到 URL，或者使用 URLSearchParams：

<script>
  const url = new URL('https://api.example.com/weather');
  url.search = new URLSearchParams({ city: '北京' });

  fetch(url, {
    method: 'GET',
    headers: {
      'Accept': 'application/json',
      'Authorization': 'Bearer YOUR_TOKEN'
    }
  })
  // 后续处理
</script>

响应处理：从数据到可用对象

当 fetch 返回一个 Promise 时，需要使用 .then 来处理响应。先检查状态码，再读取响应体。

<script>
  fetch(url)
    .then(response => {
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      return response.json(); // 假设返回的是 JSON
    })
    .then(data => {
      console.log('天气数据:', data);
      // 在页面上展示或进行业务处理
    })
    .catch(error => {
      console.error('请求失败:', error);
    });
</script>

• response.ok：仅在 200–299 范围内为真，能快速判断是否需要继续处理。
• response.json()：将响应体解析为 JSON 对象，是处理大多数后端返回的常见方式。

错误与超时：别让网络“卡住”

现实里，网络波动、超时、认证过期都会让请求失败。给请求加上合理的超时与重试策略，能提升体验。

<script>
  const timeout = 5000; // 5秒超时

  fetch(url)
    .then(response => {
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      return response.json();
    })
    .then(data => {
      console.log('天气数据:', data);
    })
    .catch(error => {
      console.error('请求失败:', error);

      // 设置超时处理
      setTimeout(() => {
        if (error.message.includes('timeout')) {
          console.log('请求超时，尝试重试...');
          // 这里可发起重试逻辑
        }
      }, timeout);
    });

  // 前提是你能在 fetch 里传递超时选项，若不支持可使用 AbortController
</script>

如果后端接口不支持取消或超时，可用 AbortController 结合 fetch 的 signal 选项。

进阶：使用 POST 与 Body

当需要提交数据，比如登录、表单提交时，使用 POST 并在 body 里传入原始字符串或 FormData。

<script>
  const url = 'https://api.example.com/login';
  const body = JSON.stringify({ username: 'user', password: 'pass' });

  fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer YOUR_TOKEN'
    },
    body: body
  })
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    console.log('登录响应:', data);
  })
  .catch(error => {
    console.error('请求失败:', error);
  });
</script>

• Content-Type：设置为 application/json 以便后端正确解析。
• body：用原始字符串或 FormData 提交，取决于后端期望的格式。

结尾：把请求落地到页面

很多时候，获取数据的最终目的，是把信息展示在页面上。结合 HTML/CSS/JavaScript，把 JSON 字段映射到 DOM 元素，既直观又能保证样式与内容的分离。

<div id="weather-info"></div>

<script>
  fetch(url)
    .then(response => {
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      return response.json();
    })
    .then(data => {
      document.getElementById('weather-info').innerHTML = `
        <h3>${data.city}</h3>
        <p>天气：${data.condition}</p>
        <p>温度：${data.temperature}°C</p>
      `;
    })
    .catch(error => {
      console.error('请求失败:', error);
      document.getElementById('weather-info').innerHTML = '加载失败，请稍后再试';
    });
</script>

把 fetch 从“黑盒”搬进项目，不只是把请求发出去，更是在请求—响应—渲染之间建立起清晰的链路。通过合理的错误处理、超时与重试，你就能在页面上稳定地呈现 API 数据，让技术细节服务内容本身。

以这个流程为起点，你可以根据不同的 API 文档，逐步完善请求方式、参数与错误处理，让每一次“下单”都顺畅可靠。