fetch API

fetch

• 一个获取资源的接口，类似于ajax
• 是基于 promise之上设计，旧版本ie 完全不支持，须借助 来兼容
• 提供了对 request 和 response （以及其他与网络请求有关的）对象的通用定义
• 发送请求或者获取资源，需要使用 window.fetch or windoworworkerglobalscope.fetch 方法。

参数

资源路径（url string）

• 他必须接收一个需要请求的资源路径，返回一个promise对象，请求成功的数据返回到responese回调中，请求失败的信息返回到 request中。
• 当接收到一个代表错误的 http状态码时，fetch返回的promise不会被标记为 reject而会被标记为resolve，比如状态码为 404，500.只有网络故障或请求被阻止时才被标记为reject

fetch('https://api.apiopen.top/musicdetails1')
  .then(function(response) {
    return response.json();
  })
  .then(function(myjson) {
    console.log(myjson); //{code: 400, message: "404 not found", result: "https://api.apiopen.top/musicdetails1"}
  })

• fetch 默认是不会从服务端发送接收或发送任何 cookie,如果需要则必须设置 credentials,自 2017/8 起默认的credentials政策变更为same-originfirefox也在61.0b13中改变默认值

[, config]

• 配置项对象，包括所有对请求的设置

1. method: 请求使用的方法，如 get、post。

2. headers: 请求的头信息，形式为 headers 的对象或包含 bytestring值的对象字面量。

3. body:
   请求的 body信息：
   可能是:
   blob（ 表示一个不可变、原始数据的类文件对象）、
   buffersource （ 用于表示自身为arraybuffer或者typedarray提供对象的对象arraybufferview。）、
   formdata（表示表单数据的键值对的构造方式，经过它的数据可以使用xmlhttprequest.send() 方法送出，本接口和此方法都相当简单直接。如果送出时的编码类型被设为 "multipart/form-data"，它会使用和表单一样的格式。）、
   urlsearchparams （接口定义了一些实用的方法来处理 url 的查询字符串）
   或者 usvstring 对象。
   注意get 或head方法的请求不能包含 body 信息。

4. mode: 请求的模式，如 cors、 no-cors 或者 same-origin。

5. credentials: 请求的 credentials，如 omit、same-origin 或者 include。为了在当前域名内自动发送 cookie ， 必须提供这个选项， 从 chrome 50 开始， 这个属性也可以接受 federatedcredential 实例或是一个 passwordcredential 实例。
   5.1 如果需要跨域请求需设置为 "include"
   5.2 如果只在同域内发送cookie 则设置为 "same-origin"
   5.3 如果任何情况都不发送cookie 则设置为 "omit"

6. cache: 请求的 cache 模式: default 、 no-store 、 reload 、 no-cache 、 force-cache 或者 only-if-cached 。

7. redirect: 可用的redirect 模式:follow(自动重定向), error (如果产生重定向将自动终止并且抛出一个错误), 或者manual (手动处理重定向). 在chrome中，chrome 47之前的默认值是 follow，从 chrome 47开始是manual。

8. referrer: 一个usvstring 可以是 no-referrer、client或一个url。默认是client。

9. referrerpolicy:指定引用http头的值。可能是一个 no-referrer、 no-referrer-when-downgrade、 origin、 origin-when-cross-origin、 unsafe-url 。

10. integrity: 包括请求的 subresource integrity值 例如： sha256-bpfbw7ivv8q2jlit13fxdyae2tjllusrsz273h2nfse=）。

const fetch = function (url,config){
   if(typeof(config) !== 'object' || config === null) return throw `config needs to pass an object type`
  let data = config || {} ;
  let {method = 'get', param = null, mode = "cors", cache = "no-cache",headers = {'access-control-allow-origin': '*',
    'content-type': 'application/json'}, redirect = "follow", credentials = "include", referrer = "no-referrer"} = data;
  /*  // 传输 json 数据 需将 param 转换 
    json.stringify(param)
    //上传文件 需传输 formdata 格式
    let formdata = new formdata()
    let filefield = document.queryselector("#myfile")
    formdata.append('title',"my file")
    formdata.append('filefield ',filefield .files[0])
    
  */

  return  fetch(url,{
   method:method.touppercase(),
   body:param,
   mode,
   cache,
   headers,
   redirect,
   credentials,
}).then(res =>{
   if(res.ok) return res.json() 
    throw new error("network response fail："+res.status)
}
).catch(err=>console.error(err))
}

fetch('https://api.apiopen.top/musicdetails1',{credentials:'omit'}).then(res =>console.log(res)).catch(err=>console.error(err))

headers constructor

• 创建一个 headers 对象

一个 headers 对象是一个简单的多名值对：

let content = "hello world";
let myheaders = new headers();
myheaders.append("content-type", "text/plain");
myheaders.append("content-length", content.length.tostring());
myheaders.append("x-custom-header", "processthisimmediately");

可以传一个多维数组或者对象字面量：

let content = "hello world";
let myheaders = new headers({
  "content-type": "text/plain",
  "content-length": content.length.tostring(),
  "x-custom-header": "processthisimmediately",
});

//获取和设置
console.log(myheaders.has("content-type")); // true
console.log(myheaders.has("set-cookie")); // false
myheaders.set("content-type", "text/html");
myheaders.append("x-custom-header", "anothervalue");
 
console.log(myheaders.get("content-length")); // 11
console.log(myheaders.getall("x-custom-header")); // ["processthisimmediately", "anothervalue"]
 
myheaders.delete("x-custom-header");
console.log(myheaders.getall("x-custom-header")); // [ ]

如果使用了一个不合法的http header属性名，那么headers的方法通常都抛出 typeerror 异常。如果不小心写入了一个不可写的属性，也会抛出一个 typeerror 异常。除此以外的情况，失败了并不抛出异常。

检查 content type 是否正确

fetch(myrequest).then(function(response) {
  if(response.headers.get("content-type") === "application/json") {
    return response.json().then(function(json) {
      // process your json further
    });
  } else {
    console.log("oops, we haven't got json!");
  }
});

response 对象

• fetch 返回的对象

对象中常用的属性

1. status： 响应状态码 如 200 404 等
2. statustext：返回和状态码对应信息
3. ok 检查状态码是否 在 200-299之间，返回true or false

检查环境支持度

if(this.fetch) {
    // run my fetch request here
} else {
    // do something with xmlhttprequest?
}

兼容性

fetch规范