fetch 从服务器获取数据 - Javascript

在现代的Web开发中，我们需要从服务器中获取数据，Fetch API是一个现代的Javascript API，可以用于获取和发送HTTP请求。它是一个简化版的XMLHttpRequest，非常易于使用。

使用Fetch API进行数据请求

Fetch可以使用GET、POST、PUT、DELETE等HTTP方法发送请求。下面是一个使用Fetch API获取数据的示例：

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

在上面的代码中，我们使用了fetch方法来请求一个JSON数据，然后使用.then()方法获取响应并转换为JSON格式。最后，我们打印出了返回的数据。

处理错误

使用Fetch API，我们可以使用.catch()方法来处理错误。如果网络请求失败或者服务器返回了错误的HTTP状态码，那么我们可以在.catch()方法中捕获并处理错误：

fetch('https://example.com/data')
  .then(response => {
    if (!response.ok) {
      throw Error(response.statusText);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error(error));

在上面的代码中，我们首先检查响应是否成功。如果响应失败，我们使用throw语句抛出错误，并将错误消息设置为HTTP状态文本。然后，我们可以在.catch()方法中捕获并处理错误。

发送数据

除了获取数据，我们还可以使用Fetch API在服务器上发送数据。下面是一个使用Fetch API发送POST请求的示例：

fetch('https://example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    name: 'John Doe',
    email: 'johndoe@example.com',
  }),
})
  .then(response => {
    if (!response.ok) {
      throw Error(response.statusText);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error(error));

在上面的代码中，我们首先指定了请求的方法、请求头和请求体。请求头中的Content-Type告诉服务器请求体的格式，这里使用了JSON格式。然后，我们在.then()方法中获取响应并转换为JSON格式，最后将结果打印出来。

总的来说，Fetch API是一个非常方便的方法来获取和发送HTTP请求。它的使用非常简单，如果你希望使用现代化的API来进行Web开发，那么Fetch API是一个非常好的选择。