📜  使用 Fetch API 获取和发布方法(1)

📅  最后修改于: 2023-12-03 15:22:11.147000             🧑  作者: Mango

使用 Fetch API 获取和发布方法

在现代Web应用程序中,使用Fetch API获取或发布数据是非常普遍的。它是XMLHttpRequest的替代品。因为Fetch API使用promise并支持流式传输,所以非常灵活和功能强大。

获取数据

使用Fetch API获取数据是很容易的。只需要构造一个request对象,使用fetch方法获取响应并解析它。以下是一个使用Fetch API获取数据的示例:

fetch('https://example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    // 数据在data中可用
  })
  .catch(error => {
    console.error('Error:', error);
  });

在这个例子中,我们使用fetch方法获取数据并返回响应。然后我们检查响应是否ok,并将其解析为JSON格式。如果一切顺利,data将包含请求数据。

发布数据

使用Fetch API发布数据也很容易。我们只需要构造一个request对象并使用fetch方法发送它即可。以下是一个使用Fetch API发布数据的示例:

fetch('https://example.com/data', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ data: 'postData' })
  })
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not okay');
    }
    return response.json();
  })
  .then(data => {
    // 数据在data中可用
  })
  .catch(error => {
    console.error('Error:', error);
  });

在这个例子中,我们构造了一个POST请求,并在请求正文中发送了JSON数据。然后我们解析响应并检查它是否正确。如果一切顺利,data将包含请求的响应数据。