JS_fetch请求数据_js fetch json

1、axios

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

fetch的出现主要是解决xhr（XmlHttpRequest）的，并不是去作为替代axios而存在。

2、fetch的兼容性解决方法

polyfill第三方库

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

3、fetch的使用

先在本地创建一个json文件，然后通过fetch请求json文件中的数据，模拟调取接口中的json数据。
json数据：

{
    "status": 0,
    "data":
    {
        "films": [
        {
            "name": "小陈同学",
            "age": 23,
            "addr":"长沙市"
        },{
            "name": "张三",
            "age": 18,
            "addr":"湘潭市"
        },{
            "name": "李四",
            "age": 20,
            "addr":"广州市"
        },{
            "name": "王五",
            "age": 50,
            "addr":"北京市"
        }],
        "total": 4
    },
    "msg": "ok"
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

模拟请求：

在使用fetch调取数据时，第一个回调函数并非像axios一样直接请求了数据的，而是需要先对数据进行一步处理，然后处理成功后才再通过回调函数返回出去。

第一个回调函数中除了res.json()外，还有res.text()，text()的话是直接返回了文本出去了，而json()是将res转为json对象再返回出去的。

fetch('json/data.json').then(res => { 
    return res.json() 
}).then(data => {
    console.log(data);
})
1
2
3
4
5

4、fetch的get请求

json对象的数据格式

fetch('apiUrl').then(res => {
  return res.json()
}).then(data => {
   console.log(data);
})
1
2
3
4
5

text文本的数据格式

fetch('apiUrl').then(res => {
  return res.text()
}).then(data => {
   console.log(data);
})
1
2
3
4
5

5、fetch的post请求

urlencoded编码格式：

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

fetch("json/test.json", {
	method: "post",
	headers: {
		"Content‐Type": "application/x‐www‐form‐urlencoded"
	},
	credentials: 'include',
	body: "name=xiaochen&age=23"
}).then(res => res.json()).then(res => {
	console.log(res);
})
1
2
3
4
5
6
7
8
9
10

application/json编码格式：

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

fetch("json/test.json", {
	method: "post",
	headers: {
		"Content‐Type": "application/json"
	},
	body: JSON.stringify({
		name: "xiaochen",
		age: 23
	})
}).then(res => res.json()).then(res => {
	console.log(res);
})
1
2
3
4
5
6
7
8
9
10
11
12

.