fetch获取后台的数据，解析Response中的body信息解决方案

最新推荐文章于 2025-02-26 09:24:09 发布

夏子曦

最新推荐文章于 2025-02-26 09:24:09 发布

阅读量9.7k

点赞数 2

分类专栏： js/html/css

本文链接：https://blog.csdn.net/oopxiajun2011/article/details/117123843

版权

js/html/css 专栏收录该内容

20 篇文章

订阅专栏

本文详细介绍了如何使用Fetch API进行GET和POST请求，包括参数传递、设置请求头信息以及获取JSON数据。还讨论了如何强制携带Cookie以及处理响应的步骤。对于Web开发者来说，了解这些内容对于进行前后端交互至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

3.1 POST请求的指定也是在fetch的第二个参数中：

一，fetch示例

fetch获取后端数据的例子：

// 通过fetch获取百度的错误提示页面
fetch('https://www.baidu.com/search/error.html') // 返回一个Promise对象 
   .then((res)=>{    
    return res.text() // res.text()是一个Promise对象
 }).then((res)=>{    
   console.log(res) // res是最终的结果
 })

二，GET请求

2.1 GET请求初步

fetch可以提供第二个参数，就是用来传递一些初始化的信息。

// 通过fetch获取百度的错误提示页面
fetch('https://www.baidu.com/search/error.html', {
    method: 'GET'
  }).then((res)=>{
    return res.text()
  }).then((res)=>{
    console.log(res)
  })

2.2 GET请求的参数传递

把参数写在URL上来进行传递：

// 通过fetch获取百度的错误提示页面
fetch('https://www.baidu.com/search/error.html?a=1&b=2', { // 在URL中写上传递的参数
    method: 'GET'
  }).then((res)=>{
    return res.text()
  }).then((res)=>{
    console.log(res)
  })

三，POST请求

3.1 POST请求的指定也是在fetch的第二个参数中：

// 通过fetch获取百度的错误提示页面
fetch('https://www.baidu.com/search/error.html', {
    method: 'POST' // 指定是POST请求
  }).then((res)=>{
    return res.text()
  }).then((res)=>{
    console.log(res)
  })

3.2 POST请求参数的传递

众所周知，POST请求的参数，一定不能放在URL中，这样做的目的是防止信息泄露。

// 通过fetch获取百度的错误提示页面
fetch('https://www.baidu.com/search/error.html', {
    method: 'POST',
    body: new URLSearchParams([["foo", 1],["bar", 2]]).toString() // 这里是请求对象
  }).then((res)=>{
    return res.text()
  }).then((res)=>{
    console.log(res)
  })

3.3 设置请求的头信息

在POST提交的过程中，一般是表单提交，可是，经过查询，发现默认的提交方式是：Content-Type:text/plain;charset=UTF-8，这个显然是不合理的。

指定头信息：

// 通过fetch获取百度的错误提示页面
fetch('https://www.baidu.com/search/error.html', {
    method: 'POST',
    headers: new Headers({
      'Content-Type': 'application/x-www-form-urlencoded' // 指定提交方式为表单提交
    }),
    body: new URLSearchParams([["foo", 1],["bar", 2]]).toString()
  }).then((res)=>{
    return res.text()
  }).then((res)=>{
    console.log(res)
  })

这个时候，在谷歌浏览器的Network中查询，会发现，请求方式已经变成了content-type:application/x-www-form-urlencoded。

四，通过接口得到JSON数据

上面所有的例子中都是返回一个文本，还有其他的数据类型，具体查询地址：Body的类型

演示一下获取JSON数据的方式：

fetch('https://www.baidu.com/rec?platform=wise&ms=1&rset=rcmd&word=123&qid=11327900426705455986&rq=123&from=844b&baiduid=A1D0B88941B30028C375C79CE5AC2E5E%3AFG%3D1&tn=&clientWidth=375&t=1506826017369&r=8255', { // 在URL中写上传递的参数
    method: 'GET',
    headers: new Headers({
      'Accept': 'application/json' // 通过头指定，获取的数据类型是JSON
    })
  }).then((res)=>{
    return res.json() // 返回一个Promise，可以解析成JSON
  }).then((res)=>{
    console.log(res) // 获取JSON数据
  })

五，强制带Cookie

默认情况下, fetch 不会从服务端发送或接收任何 cookies，

如果站点依赖于维护一个用户会话，则导致未经认证的请求(要发送 cookies，必须发送凭据头).

// 通过fetch获取百度的错误提示页面
fetch('https://www.baidu.com/search/error.html', {
    method: 'GET',
    credentials: 'include' // 强制加入凭据头
  }).then((res)=>{
    return res.text()
  }).then((res)=>{
    console.log(res)
  })