bestvist

08-24 15:59 阅读: 95 点赞: 0 评论: 0

Fetch -- http请求的另一种姿势

传统Ajax是利用XMLHttpRequest(XHR)发送请求获取数据,不注重分离的原则。而Fetch API是基于Promise设计,专为解决XHR问题而出现。

简介

XMLHttpRequest是一个设计粗糙的API,其中配置和调用方式非常混乱。 使用XHR发送一个json请求:

var xhr = new XMLHttpRequest();
xhr.open('GET',url);
xhr.responseType = 'json';
xhr.onload = function(){
    console.log(xhr.response);
}
xhr.onerror = function(){
    console.log('xhr error');
}
xhr.send();

使用fetch做请求后:

fetch(url).then(function(response){
    return response.json();
}).then(function(data){
    console.log(data);
}).catch(function(e){
    console.log('error' + e);
});

es6写法:

fetch(url).then(response=>response.json())
    .then(data=>console.log(data))
    .catch(e=>console.log('error' + e));

处理text/html响应:

fetch(url).then(response=>response.text())
    .then(data=>console.log(data))
    .catch(e=>console.log('error' + e));

获取头信息:

fetch(url).then((response)=>{
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers.get('Content-Type'));
    console.log(response.headers.get('Date'));
    return response.json();
}).then(data=>console.log(data))
  .catch(e=>console.log('error' + e);

设置头信息

fetch(url,{
    headers:{
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    }
}).then(response=>response.json())
  .then(data=>console.log(data))
  .catch(e=>console.log('error' + e);

提交表单

fetch(url,{
    method: 'post',
    body: new FormData(document.getElementById('form'))
}).then(response=>response.json())
  .then(data=>console.log(data))
  .catch(e=>console.log('error' + e);

提交json数据

fetch(url,{
    method: 'post',
    body: JSON.stringify({
        username: document.getElementById('username').value,
        password: document.getElementById('password').value
    })
}).then(response=>response.json())
  .then(data=>console.log(data))
  .catch(e=>console.log('error' + e);

fetch特点

  • 语法简洁,更加语义化
  • 基于标准 Promise 实现,支持 async/await
  • 同构方便,使用isomorphic-fetch

fetch兼容性

浏览器兼容性 PC

移动端

fetch原生支持性不高,不过可以使用一些polyfill。

  • IE8是es3语法,需要引入es5的polyfill:es5-shim
  • 支持promise语法:es6-promise
  • fetch的polyfill:fetch-polyfill
  • 使用jsonp还需要引入:fetch-jsonp
  • 开启babel的runtime模式,可以使用async/await

fetch常见问题

  • fetch请求默认不带cookie,需要设置fetch(url,{credentials: 'include'});
  • 服务器返回400、500错误码不会reject,只有网路错误请求不能完成时才会reject;

总结

fetch API看起来简单,却是js语法不断增强提高带来的改善。 由于项目中普遍会引入各种库去解决底层问题,对于基础api的新增、拓展不太关注,久而久之会产生一种与标准的脱离感。以后应多多关注底层api的变化与基础实现。

热点文章