HTML FETCH

2017-03-10 3 min read

fetch 特点

JavaScript

fetch(url).then(function(response) {
  return response.json();
}).then(function(data) {
  console.log(data);
}).catch(function(e) {
  console.log("Oops, error");
});

默认不携带 cookie，携带cookie信息需设置 credentials: fetch(url, {credentials: 'include'}) ;
对某些错误 http 状态不会reject
- fetch返回 promise导致的，因为fetch返回的promise在某些错误的http状态下如400、500等不会reject，会被resolve；只有网络错误会导致请求不能完成时，fetch 才会被 reject

JavaScript

function checkStatus(response) {
  if (response.status >= 200 && response.status < 300) {
    return response;
  }
  const error = new Error(response.statusText);
  error.response = response;
  throw error;
}
fetch(url, {credentials: 'include', ...opt})
    .then(checkStatus)
    .then(parseJSON)
    .then((data) => ( data ))
    .catch((err) => ( err ));

fetch不支持超时timeout处理：Promise.race方法接受一个promise实例数组参数，表示多个promise实例中任何一个最先改变状态，那么race方法返回的promise实例状态就跟着改变:

JavaScript

var oldFetchfn = fetch; //拦截原始的fetch方法
window.fetch = function(input, opts){//定义新的fetch方法，封装原有的fetch方法
    var fetchPromise = oldFetchfn(input, opts);
    var timeoutPromise = new Promise(function(resolve, reject){
        setTimeout(()=>{
             reject(new Error("fetch timeout"))
        }, opts.timeout)
    });
    retrun Promise.race([fetchPromise, timeoutPromise])
}

fetch不支持progress事件 response.body是一个可读字节流对象，其实现了一个getRender()方法