Fetch Thingy介绍

简介

Fetch Thingy是一种基于JavaScript的API，可用于取回网络资源（例如文本、图片等）。

它是一种基于Promise的API，并且旨在取代XMLHttpRequest。

使用方法

Fetch Thingy使用起来非常简单。下面是一个基本的例子：

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));

在这个例子中，我们向http://example.com/movies.json发送了一个GET请求，然后在成功响应后将响应数据打印到控制台中。

需要注意的是，fetch没有使用类似于XMLHttpRequest中的同步和异步请求的概念。取而代之的是，fetch使用Promise，因此您可以在.then（）调用中处理数据。

如果您想发送POST请求，您可以这样做：

fetch('http://example.com/movies', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    title: 'The Godfather',
    director: 'Francis Ford Coppola'
  })
})
.then(response => response.json())
.then(data => console.log(data));

在这个例子中，我们向http://example.com/movies发送了一个POST请求，并将Title和Director作为JSON发送给该服务。

错误处理

使用Fetch Thingy时，有可能会发生错误。这些错误可能是网络错误，也可能是500错误等等。

为此，您可以在.then（）的第一个参数中处理这些错误，如下所示：

fetch('http://example.com/movies.json')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

在这个例子中，我们检查响应是否为200 OK（如果不是，则引发一个错误）并再次将数据发送到另一个.then（）块。如果发生错误，则我们将错误打印到控制台中。

支持情况

在使用Fetch Thingy时，需要注意它的浏览器支持情况。Fetch Thingy在现代浏览器中非常受欢迎，并且可以在以下浏览器版本中使用：

• Microsoft Edge：14及以上版本
• Safari：10.1及以上版本
• Firefox：39及以上版本
• Chrome：42及以上版本
• Opera：29及以上版本

结论

Fetch Thingy可以使您的JavaScript代码更简单、更直观。使用Fetch Thingy，您可以轻松地发送网络请求，而不必担心繁琐的XMLHttpRequest代码。

可以说，Fetch Thingy是现代AJAX中的绝佳选择之一。