js fetch请求|极客笔记

js fetch请求

什么是fetch请求

fetch 是一个新的 Web API，用于替代传统的 XMLHttpRequest 对象。它更现代、更强大，并且更易于使用。Fetch API 使用 Promise 对象，使得异步请求更加方便和直观。

基本用法

使用 fetch 发起一个 GET 请求，只需要指定要请求的 URL 即可，返回的是一个 Promise 对象。下面是一个简单的示例：

fetch('http://deepinout.com/')
  .then(response => {
    return response.text();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.log('请求失败：', error);
  });

在上面的示例中，我们使用 fetch 方法发送了一个 GET 请求到 ‘http://deepinout.com/’，并通过链式调用 then 方法来处理返回的数据。在第一个 then 中，我们通过 response.text() 将响应体转换为文本字符串，然后在第二个 then 中打印出来。如果请求出错，我们使用 catch 来捕获错误并输出错误信息。

GET 请求示例

除了基本用法之外，fetch 还支持一些参数配置，例如设置请求的 method、headers、body 等。下面是一个 GET 请求并设置请求头的示例：

fetch('http://deepinout.com/', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
  }
})
  .then(response => {
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.log('请求失败：', error);
  });

在上面的示例中，我们通过配置 method 为 ‘GET’，并设置 headers 为 ‘Content-Type’: ‘application/json’ 来发送 GET 请求，并在第一个 then 中将响应体转换为 JSON 对象。这样我们就可以更灵活地配置请求的内容及格式。

POST 请求示例

除了 GET 请求，fetch 还支持 POST 请求，我们可以通过设置 method 为 ‘POST’，并配置 body 来发送 POST 请求。下面是一个发送 POST 请求的示例：

fetch('http://deepinout.com/', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: 'deepinout' })
})
  .then(response => {
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.log('请求失败：', error);
  });

在上面的示例中，我们通过配置 method 为 ‘POST’，设置 headers 为 ‘Content-Type’: ‘application/json’，并通过 JSON.stringify 将需要发送的数据转换为 JSON 字符串。这样我们就可以向服务器发送包含数据的 POST 请求。

携带认证信息

在某些情况下，我们需要在请求中携带认证信息，例如 cookies。我们可以通过设置 credentials 为 ‘include’ 来携带认证信息。下面是一个携带认证信息的示例：

fetch('http://deepinout.com/', {
  credentials: 'include'
})
  .then(response => {
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.log('请求失败：', error);
  });

在上面的示例中，我们通过配置 credentials 为 ‘include’ 来携带认证信息。这样我们就可以在请求中发送 cookies 等认证信息，并与服务器进行交互。

文件上传示例

除了发送普通的文本数据，fetch 也支持上传文件。我们可以通过 FormData 对象来构建包含文件的表单数据，并将其作为 body 来发送请求。下面是一个文件上传的示例：

const fileInput = document.getElementById('fileInput');

fileInput.addEventListener('change', function() {
  const file = fileInput.files[0];
  const formData = new FormData();
  formData.append('file', file);

  fetch('http://deepinout.com/upload', {
    method: 'POST',
    body: formData
  })
    .then(response => {
      return response.json();
    })
    .then(data => {
      console.log(data);
    })
    .catch(error => {
      console.log('文件上传失败：', error);
    });
});

在上面的示例中，我们首先获取到文件输入框的文件，然后创建一个 FormData 对象并将文件追加到其中。最后，我们通过配置 method 为 ‘POST’，并将 FormData 对象作为 body 来发送文件上传请求。这样我们就可以上传文件到服务器。

总结

fetch 是一个现代的 Web API，用于替代传统的 XMLHttpRequest 对象。它使用 Promise 对象，使得异步请求更加方便和直观。fetch 支持各种配置参数，能够灵活地发送 GET、POST 请求并处理返回的数据。同时，fetch 也支持携带认证信息和上传文件等操作。通过学习和使用 fetch，我们可以更加方便地进行网络请求和数据交互。