fetch笔记

95 阅读2分钟

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请求

image.png