浏览器自带的fetch函数发送GET POST请求，发送POST form数据

唯一Chat

发布于 2023-04-26 19:04:40

3.9K00

代码可运行

运行总次数：0

代码可运行

fetch 是浏览器自带的函数，用于发送网络请求。fetch 方法返回一个 Promise 对象，可以通过链式调用 then 方法处理响应数据，或者通过 catch 方法捕获错误信息。它支持 Promise 和异步/await 两种调用方式。‘

以下是一个示例代码，展示如何使用 fetch 进行 GET 请求：

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

上面的代码中，首先使用 fetch 方法发送了一个 GET 请求，并指定了请求的 URL。然后，通过 then 方法对请求返回的 Response 对象进行处理，使用 json() 方法将响应体转换为 JSON 格式的数据，最后将数据打印到控制台中。如果请求出错，则使用 catch 方法捕获错误并打印到控制台中。

除了 GET 请求，还可以通过 fetch 发送 POST 请求，示例代码如下：

const requestBody = {
  title: 'foo',
  body: 'bar',
  userId: 1
};

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  body: JSON.stringify(requestBody),
  headers: {
    'Content-Type': 'application/json'
  }
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error))

上面的代码中，通过指定 method 参数为 'POST'，并在请求的 body 参数中设置请求体内容，使用 JSON.stringify() 方法将请求体转换为 JSON 格式的字符串。另外，还可以通过 headers 参数设置请求头，将请求体的类型指定为 'application/json'。最后，通过 then 方法对请求返回的数据进行处理，将响应体转换为 JSON 格式的数据并打印到控制台中。如果请求出错，则使用 catch 方法捕获错误并打印到控制台中。

需要注意的是，fetch 方法返回一个 Promise 对象，因此需要使用 then 和 catch 方法进行异步处理。此外，在发送 POST 请求时，需要设置请求头的 'Content-Type' 参数为 'application/json'，并将请求体使用 JSON.stringify() 方法进行序列化。

POST发送form数据

const formData = new FormData();
formData.append('username', 'john_doe');
formData.append('password', '123456');

fetch('https://example.com/login', {
  method: 'POST',
  body: formData
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error))

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-04-20，如有侵权请联系 cloudcommunity@tencent.com 删除

get