1、什么是fetch:
- fetch是ES6出现的,它使用了 ES6 提出的 promise 对象,为了取代XMLHttpRequest而诞生的;
- 提到XMLHttpRequest就不得不提ajax,ajax是一种实现前后端交互的技术,而ajax是基于XMLHttpRequest模块实现的;
- 但是因为XMLHttpRequest是一个设计粗糙的API,配置和调用方式非常混乱,而且基于事件的异步模型写起来不友好;
- 所以使用XMLHttpRequest模块会产生回调地狱问题,因此产生了fetch,fetch是用来取代XMLHttpRequest模块的,并不是取代ajax的。
- 不同于ajax的XMLHttpRequest方式,这个fetch代码非常的简洁,fetch也是服务于ajax技术,建立前后端连接,实现前后端数据交互的;
2、fetch的用法:
fetch用来解决回调地狱问题;
http请求方式不同,写法也会不一样,不同的请求方式可以实现数据库的数据的增删改查;
常用的请求方式有:get()、post()、put()、patch()、delete();
get():拿到数据库里所有的数据;
post():增加数据;
put()、patch():修改数据;
delete():从数据库中删除数据;
(1)get请求方式:(默认请求方式是get方式)
格式:fetch(url).then(回调函数).then(回调函数)
<body>
<button id="myget">get</button>
<script>
myget.onclick = function(){
//get方式fetch请求
fetch("http://localhost:3000/users").then(res=>{
// console.log(res)
return res.json()
}).then(res=>{
console.log(res) //res就是请求回来的数据
})
}
</script>
</body>
用fetch的含义是:朝fetch里的地址发起请求,请求数据,最后打印,res就是请求回来的数据。
✌代码解释:
打印第一个then里的res结果:
console.log(res) //第一个then的res
- 第一个then,接收的res不是数据,里面没有数据;
- 数据在res.json里,意思是把我的数据按照json格式读出来,但是直接打印res.json那拿不到数据,因为res.json也是一个promise对象,所以要return作为一个返回值在第二个then中才能拿到url里的数据。
结果:
打印res.json:
- 拿数据的时候,要返回这个res.json,在链式then里面接收这个数据res,res.json直接输出的结果不是数据,是一个Promise对象;
console.log(res.json())
结果:
这个res.json也可以换成res.text,只不过res.json是转换成数组包裹的json对象,res.text是转换成json字符串格式,看下面的区别:
res.json格式:
res.text格式: