面试题：JavaScript中Fetch API与Promise结合的基本使用

Question

请用JavaScript的Fetch API结合Promise，发送一个GET请求到指定URL（例如：https://example.com/api/data），并处理响应数据。同时，请说明在请求过程中如何处理可能出现的错误。

Answer 1

fetch('https://example.com/api/data')
 .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:', error);
  });

错误处理说明

1. 网络错误：如果由于网络问题（如断网、服务器不可达等）导致请求无法发出，fetch 返回的 Promise 会被拒绝，并抛出一个 TypeError。
2. HTTP 状态错误：即使请求成功发出并得到响应，但如果 HTTP 状态码不是 2xx，fetch 不会自动将 Promise 标记为拒绝。因此在 then 回调中，通过检查 response.ok 来判断状态码是否正常，若不正常则手动抛出错误。在 catch 块中统一捕获并处理这些错误。