首页 > 代码库 > fetch

fetch

Fetch API是基于promise 设计,推荐阅读MDN Promise 教程,有必要学习下promise.

语法:  

 fetch(url, options)
  .then(function(response){
    return response.json();    //将服务器返回的数据json化
 })
 .then(function(data){        //请求成功后处理
    console.log(data);
 })
 .catch(function(error){       //请求失败后处理
    console.log(error);
 })    

参考示例:  

fetch(url, {
  method: "POST",
  body: JSON.stringify({
    authcookie: _this.$store.state.authcookie,
    type: _this.$store.state.type,
    agenttype: 11
  }),
  headers: {
    ‘Accept‘: ‘application/json‘,
    ‘Content-Type‘: ‘application/json‘
  }
})
.then(response => response.json())
.then(function(response) {
  if(response.code == "A00000"){
    window.location.href = http://www.mamicode.com/_this.$store.state.login;
  }else{
    alert(response.msg);
  }
})
.catch(function(error) {
  console.log(error);
})

 参数说明:

  1>.url:接口,定义获取的资源

  2>.options:一个配置项对象,包括所有请求的设置,可选参数:

    (1).method:请求的方法:GET、POST、DELETE、PUT

    (2).headers:请求头的信息,形式为headers对象,如:

      

headers: {
    ‘Content-Type‘: ‘application/json‘,
    ‘Accept‘: ‘application/json‘,
    ‘Accept‘: ‘application/x-www-form-urlencoded‘,  
},

    (3).body:请求的body信息,就是发送的数据,可能是一个Object、Formdata、Blob等,注意:GET和HEAD方法的请求不能包含body信息。如果是GET,拼在url中就可以

    (4).mode: 请求的模式,如cors、no-cors。

    (5).credentials: 请求的证书,如:"include",是否允许携带cookie。

    (6).cache: 请求的cache模式,如何处理的缓存,遵循http协议,有一下几种值:

      default=请求前检查http的缓存,

      no-store=忽略http的缓存,响应后也不会更新,

      no-cache=如果存在缓存,fetch发送一个查询和正常的request,拿到响应后并更新。

      force-cache=表示fetch不顾依赖缓存,即使过期,依然从缓存中读取,除非没有任何缓存,那么将发送一个正常的request。

      only-if-caches=表示fetch不顾依赖缓存,即使过期,依然从缓存中读取,如果没有任何缓存,那么跑出异常。(该设置只在mode为"same-origin"时有效)。

   3>.response:一个Promise,resolve,时回传Pesponse对象:

    属性:  status(number)-HTTP请求结果参数,在100-599范围

           statusText(String)-服务器返回的状态报告

           ok(boolean)-如果返回200表示请求成功则为true

           header(headers)-返回头部信息,下面详细介绍

           url(String)-请求的地址

    方法:

         text()-以string的形式生成请求text

         json()-生成JSON.parse(responseText)的结果

         blob()-生成一个Blob

         arrayBuffer()-生成一个ArrayBuffer

         formData()-生成格式化的数据,可用于其他的请求

    其他方法:

         clone()

         Response.error()

         Response.redirect()

Fetch常见的坑:

  Fetch请求默认是不带cookie的,需要设置ferch(url,{credentials: "include"})

  服务器返回400,500错误代码并不会reject,只有网络错误这些导致请求不能完成时,fetch才会被reject。

支持状态及解决方案:

  原生的支持率并不高,引入下面这些polyfill后可以完美支持IE8+:

   由于 IE8 是 ES3,需要引入 ES5 的 polyfilles5-shimes5-sham

   引入 Promise 的 polyfilles6-promise

   引入 fetch 探测库:fetch-detector

   引入 fetch 的 polyfillfetch-ie8

   可选:如果你还使用了 jsonp,引入 fetch-jsonp

   可选:开启 Babel 的 runtime 模式,现在就使用 async/await

fetch