let promise实例 = fetch(请求地址,配置项)
-
当请求成功,p的状态是fulfilled,值是请求回来的内容,请求失败,状态是rejected,值是失败的原因
- fethc和axios不同的地方
- fetch中,只要服务器有反馈信息,不论http状态码是多少,哪怕404了,多说吗网络请求成功,最后的实例p都是fulfilled,
- axios中,只有返回的状态码是2开头的,才会让实例是成功态
配置项:
-
method:设置请求方式,默认是GET「GET\HEAD\DELETE\OPTIONS;POST\PUT\PATCH」,如果是get的话就可以不写了 mode 请求模式,「no-cors,*cors-origin,same-origin」是否支持cors跨域
-
cache 缓存模式 「*default,no-cache,reload,force-cache,only-if-cached」 credentials 资源凭证{比如cookie} 「inclue\same-origin\omit」
-
fetch默认情况下,跨域请求中,不允许携带资源凭证,同源才允许
-
include:同源和跨域下都可以
-
same-origin:只有同源才可以
-
omit:都不可以
-
headers 普通对象/Headers类实例:可以自定义请求头信息 ,就是在配置项里,既可以赋值一个对象,然后在对象上添加一些配置,也可以直接赋值一个实例,然后通过实例.append添加配置
- body:设置请求主体信息
-
-
只适用于post系列请求,get请求中设置会报错{会让返回的promise实例变为失败态rejected}
-
body设置格式有要求,并且需要指定Content-Type 请求头信息
- JSON字符串 application/json "{"name":"xxx","age":xxx...}"
- URLENCODED字符串 application/x-www-form-urlencoded "xxx=xx&xx=xxxcxz"
- 普通字符串 text/plain
- FormData 对象 multipart/form-data ,主要用于文件上传或者表单提交的时候 let fm = new FormData(); fm.append("file",文件)
- 二进制或者Buffer等格式
-
-
服务器返回的response对象「Response类的实例」 私有属性:
-
body 响应主体信息「它是一个ReadableStream可读流,需要处理才能拿到我们真正需要的数据」 aders 响应头信息 「一个Headers类的实例」
- statsu/statusText 「返回的Http状态码以及描述」
Response.prototype上的这些方法,就是用来处理body响应主体信息的,可以吧可读流处理成我们需要的数据格式,返回值是一个promise实例,值是我们需要的值,这样可以避免转换过程中出现错误「失败就走promise失败态了」
-
arrayBuffer blob
-
formData json
- text
-
中断fetch请求,主要通过一个new 一个AbortController的实例
然后在配置项中添加一个信号器,让他的值是后面写的 signal : ctrol.signal
这样在fetch方法之后如果项中值请求,可以直接ctor.abort(),就会终止有实例这个信号器的fetch请求
-