» JavaScript快速入门 » 2. 高级篇 » 2.5 Fetch

Fetch

fetch() 方法可启动一个从网络获取资源的过程,并返回一个 Promise。该 Promise 在网络资源响应可用时被完成。

// 要从中获取数据的 API 端点的 URL
const apiUrl = 'https://jsonplaceholder.typicode.com/todos/1';

// 使用 fetch 发送 GET 请求
fetch(apiUrl)
  .then(response => {
    // 检查请求是否成功(状态码在 200-299 范围内)
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    
    // 将响应解析为 JSON
    return response.json();
  })
  .then(data => {
    // 处理响应中的数据
    console.log('Data:', data);
  })
  .catch(error => {
    // 处理在获取过程中可能发生的错误
    console.error('Fetch error:', error);
  });

上面示例的 async/await 版本如下:

async function fetchData() {
  // 要从中获取数据的 API 端点的 URL
  const apiUrl = 'https://jsonplaceholder.typicode.com/todos/1';

  try {
    // 使用 await 与 fetch 一起发出 GET 请求
    const response = await fetch(apiUrl);

    // 检查请求是否成功(状态码在 200-299 范围内)
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    // 将响应解析为 JSON
    const data = await response.json();

    // 处理响应中的数据
    console.log('Data:', data);
  } catch (error) {
    // 处理在获取过程中可能发生的错误
    console.error('Fetch error:', error);
  }
}

// 调用异步函数执行异步操作
fetchData();

如果你不在乎可能的错误,只想简单地处理,可以这样写:

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => console.log(json))