fetch请求数据

Posted 2023-05-16

参考技术A 比如常用的需求中，想要请求A接口的数据再去请求B接口的数据，axios的做法是需要先请求A接口，然后在A接口的成功的回调函数里面去请求B接口。
fetch使用的情况并不多，主要是由于存在兼容性问题，在企业中就不会作为首选的目标去开发。
fetch的出现主要是解决xhr（XmlHttpRequest）的，并不是去作为替代axios而存在。

fetch对于安卓5又或是IE8以上不支持，github上的第三方库polyfill对于这一类问题进行了完善，polyfill是怎么去实现填补这个空缺的呢？它其实只是在fetch请求不支持的时候又重新回过头使用的XHR去操作，在支持使用fetch的浏览器上就使用fetch去请求。

urlencoded 格式，又叫 form 格式、 x-www-form-urlencoded 格式，它是一种表单格式。
主要是通过键值对的形式组成，键和值之间用 = ：name=xiaochen，多个键值对之间用 & ：name=xiaochen&age=23

body中需要使用 JSON.stringify 将对象转为字符串的格式传入

使用 fetch 发送带有数据对象的 get 请求

【中文标题】使用 fetch 发送带有数据对象的 get 请求

【英文标题】：Use fetch to send get request with data object

【发布时间】：2017-01-07 19:56:17

【问题描述】：

我在一个项目中使用 Fetch (Fetch API)，为了保持一致性，我想创建一个函数来接收所有参数，如方法、url 和数据，并创建正确的请求，具体取决于它是否GET 或 POST 请求。

是否可以使用 Fetch 发送一个数据对象，用于 GET 请求，将数据转换为带有参数的字符串，如果是 POST 请求，它只是在正文中发送数据对象？

看起来像这样：

fetch ('/test', 
        method: 'GET',
        data: 
           test: 'test'
        
);

这个疑问是受到这个 jQuery ajax 行为的启发：

$.ajax(
   url: '/test',
   method: 'GET',
   data: 
      test: 'test'
   
);

这会产生这个请求：

'/test/?test=test'

【问题讨论】：

嗯，是的，这是可能的。但是你的问题到底是什么？ （注意：你知道 IE 和 safari 不支持这个吗？）

是的，我知道，这只是为了实验 :) 我的问题是：如果我在 GET 请求的 fetch 构造函数中正常传递数据对象，它会发送请求吗就像我给出的例子一样 '/test/?test=test' ?

Did you try it ?

我试过了，但我对通过数据对象中的多个属性进行迭代更感兴趣。此外，我在这里搜索了这个问题，但一无所获，所以我决定创建一个可能对其他开发人员有用的主题。谢谢！ :)

【参考方案1】：

您可以使用Url 类：

var url = new URL("/test/")
Object.keys(test: 'test', a: 1).forEach(key => url.searchParams.append(key, params[key]))
fetch(url);

如果您想要更广泛的浏览器支持，也可以自己解析字符串：

var params = test: 'test', a: 1,
    qs = Object.keys(params).reduce(function(_qs, k, i) return _qs + '&' + k + '=' + params[k]; , '').substring(1);

console.log(qs)

【参考方案2】：

如果我在 fetch 构造函数中正常传递数据对象 GET 请求，它会像我给出的示例那样发送请求吗 '/test/?test=test'

如果你想在获取请求中添加查询字符串：

From the SPEC

var url = new URL("https://a.com/method"),
params = a:1, b:2
Object.keys(params).forEach(key => url.searchParams.append(key, params[key]))
fetch(url)

这将产生一个请求：