fetch不是react里的,在任何地方都可以做发送请求数据。 fetch返回值是个promise对象。
背景介绍
- 多年来,XMLHttpRequest一直是web开发者的亲密助手。无论是直接的,还是间接的,当我们谈及Aax技术的时候,通常意思就是基于XMLHttpRequest的Ajax,它是一种能够有效改进页面通信的技术。Ajax的兴起是由于Google的Gmail所带动的,随后被广泛的应用到众多的Web产品(应用)中,
- 可以认为,开发者已经默认将KMLHttpRequest作为了当前Web应用与远程资源进行通信的基础。
- 而以下介绍的内容则是XMLHttpRequest的最新替代技术——Fetch API,它是W3C的正式标准,所以只要浏览器支持,那就可以在任何地方用(主流浏览器基本都支持)。
- 以前使用ajax的方法连接http协议,现在用fetch连接http协议,进行数据请求。
fetch和ajax有什么区别?
- Fetch API提供了一个JavaScript接口,用于访问和操纵HTTP管道的部分,例如请求和响应。它还提供了一个全局fetch方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源。
- 这种功能以前是使用XMLHttpRequest实现的。Fetch提供了一个更好的替代方法,可以很容易地被其他技术使用,例如Service Workers,。Fetch还提供了单个逻辑位置来定义其他HTTP相关概念,例如CORS和HTTP的扩展。
特点
- 当接收到一个代表错误的HTTP状态码时,从fetch()返回的Promise不会被标记为reject, 即使该HTTP响应的状态码是404或500。相反,它会将Promise状态标记为resolve(但是会将resolve 的返回值的ok属性设置为false),仅当网络故障时或请求被阻止时,才会标记为reject。
- 默认情况下,fetch不会向服务端发送或接收任何cookies,如果站点依赖于用户session, 则会导致未经认证的请求(要发送cookies,必须设置credentials选项)
第一次promise调用then方法,第一个回调函数里的参数value得到的并不是我们从服务器请求回来的数据,需要再调用value.json()方法或text()方法,把得到的对象转为我们想要的数据,return出来,在接着调用then方法,拿到的才是我们想要的数据。
强制带cookie(这一段要背下来)
默认情况下,fetch不会向服务器发送或接受任何cookies,如果站点依赖于维护一个用户会话,则导致未经认证的请求(要发送cookies,必须发送凭据头)
fetch(“url”,{
method:“”,
credentials:“include”//强制加入凭据头
})