fetch简介和axios介绍

目录

fetch

fetch的get请求方式

fetch的post请求方式

axios

引用链接

axios的get请求方式

axios的post请求方式

---

fetch

XMLHttpRequest是一个设计粗糙的API，配置和调用方式非常混乱，而且基于事件的异步模型写起来不友好。fetch即用于解决这些问题，然后fetch是基于promise设计的顾搭配下面方式使用，promise不懂得可以看这个链接https://blog.csdn.net/AIWWY/article/details/115766690。

fetch的get请求方式

fetch('./json/test.json?name=pyf&age=18').then(res=>res.json()).then(res=>{console.log(res)})

此时打印出来的是json对象。将res.json()改为res.text()打印的是对象的字符串形式。参数为请求的路径地址，可以携带发送数据。

fetch的post请求方式

有2种请求方式（jQuery默认是第一种）

1. fetch('',{method:'post', headers:{'Content-Type':'application/x-www-form-urlencoded'},body:'name=pyf&age=100'}).then(res=>res.json()).then(res=>{console.log(res)});
2. fetch('',{method:'post', headers:{'Content-Type':'application/json'},body:JSON.stringify({name='pyf',age=100})}).then(res=>res.json()).then(res=>{console.log(res)});

同上，第一个参数为请求路径，第二参数为对象，其中设置不同的post方式和传递的数据，注意post请求json数据会报405错误，只能用get请求（使用post请求并且发送的URL是一个具体的资源的时候例如JSON文件，网站解析的时候会把整个URL当作域名解析，也就是说我并没有传参数给服务端，而是直接访问服务端的具体资源，所以要用get请求）。

注意fetch默认不带cookie数据（jQuery和原生AJAX都是默认会带的），要想添加的话，在第二个参数的对象中添加属性credentials，其取值有3种：

1. 'omit'：为默认的，表示不带cookie数据。
2. 'same-origin'：表示cookie只能同域发送不能跨域发送。
3. 'include'：表示既可以同域发送也可以跨域发送。

 

axios

引用链接

axios的get请求方式

 axios.get('json/test.json?name=pyf&age=18'').then(res=>{console.log(res.data)})

此时打印出来的是json对象。参数为请求的路径地址，可以携带发送数据。

axios的post请求方式

2种请求方式：

1. axios.post('',"name=pyf&age=18").then(res=>{console.log(res)});
2.  axios.post('',{name:'pyf',age:18}).then(res=>{console.log(res)});

同上，第一个参数为请求路径，第二参数为字符串或对象携带请求数据。