【ES6】fetch函数和Promise

科学熊2023-09-02 9:56

fetch函数是现代JavaScript中用于发起HTTP请求的一个非常强大的工具。它返回一个Promise，这个Promise在请求成功时解析为Response对象，或者在请求失败时拒绝。

以下是一个基本的fetch使用示例：

javascript 复制代码

fetch('https://api.example.com/data')
  .then(response => {
    // HTTP状态码为200表示请求成功
    if (response.status === 200) {
      return response.json();
    } else {
      throw new Error('网络请求失败');
    }
  })
  .then(data => console.log(data))
  .catch(error => console.error(error));

在这个例子中，我们首先向https://api.example.com/data发起一个GET请求。然后，我们检查响应的状态码。如果状态码是200，我们尝试将响应的内容解析为JSON。如果解析成功，我们将数据打印到控制台。如果解析失败，或者在任何其他步骤中发生错误，我们捕获这个错误并打印错误信息。

注意，fetch并不直接返回请求的结果，而是返回一个Promise。这是因为网络请求可能会异步完成，所以你不能直接从fetch调用中获取结果。相反，你需要使用then方法或者async/await语法来等待Promise解析。

下面是一个使用async/await语法的相同示例：

javascript 复制代码

async function fetchData() {
  try {
    let response = await fetch('https://api.example.com/data');
    if (response.status === 200) {
      let data = await response.json();
      console.log(data);
    } else {
      throw new Error('网络请求失败');
    }
  } catch (error) {
    console.error(error);
  }
}

fetchData();

在这个例子中，我们使用async/await语法来等待Promise解析。这使得我们的代码看起来更像是同步的代码，但是实际上它仍然是异步的。