如何使用 Fetch API - JavaScript

在开发 Web 应用程序时，我们需要经常从服务器获取数据。在 JavaScript 中，我们可以使用 Fetch API 来完成这个任务。

Fetch API 是基于 Promise 设计的，它为我们提供了一个简洁的方式来发送 HTTP 请求并处理响应。在本文中，我们将介绍如何使用 Fetch API。

发送 GET 请求

我们可以使用 fetch() 方法来发送一个 GET 请求。示例代码如下：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

在上面的示例中，我们向 https://api.example.com/data 发送了一个 GET 请求。然后使用 response.json() 方法解析响应数据，并在 Promise 完成后输出到控制台。如果发生错误，则在 catch 块中打印错误日志。

发送 POST 请求

我们也可以发送一个带有数据体的 POST 请求。示例代码如下：

const data = {
  username: 'john.doe',
  password: 'secret'
};

const options = {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
};

fetch('https://api.example.com/login', options)
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

在上面的示例中，我们向 https://api.example.com/login 发送了一个 POST 请求，将数据体作为 JSON 字符串传递给服务器。在 Promise 完成后输出响应数据到控制台。

使用 async/await

我们也可以使用 async/await 来发送 Fetch API 请求，让代码看起来更简洁。示例代码如下：

async function fetchData(url, options) {
  try {
    const response = await fetch(url, options);
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

const data = {
  username: 'john.doe',
  password: 'secret'
};

const options = {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
};

fetchData('https://api.example.com/login', options);

在上面的示例中，我们使用 async/await 创建了一个 fetchData() 方法。我们向 https://api.example.com/login 发送了一个 POST 请求，并在 Promise 完成后输出响应数据到控制台。

总结

在本文中，我们介绍了如何使用 Fetch API 发送 GET 和 POST 请求，以及使用 Promise 和 async/await 来处理响应。通过使用 Fetch API，我们可以更好地从服务器获取数据并提高开发效率。