Fetch API

96
LETSGOHEAT
2016.07.28 14:18* 字数 600

写在前面

fetchXMLHttpRequest非常类似,都是用来做网络请求。但是同复杂的XMLHttpRequestAPI相比,fetch提供了更加强大灵活的特性,使用了Promise,这让它使用起来更加简洁,从而避免陷入”回调地狱”。

与XMLHttpRequest的比较

使用XMLHttpRequest来实现改功能需要设置两个监听函数,分别用来处理成功和失败的情况,同时还需要依次调用open()send()方法才能实现请求。

function reqListener() { 
    var data = JSON.parse(this.responseText); console.log(data);
}
function reqError(err) { 
    console.log('Fetch Error : %S', err);
}
var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.onerror = reqError;oReq.open('get', './api/some.json', true);
oReq.send();

使用fetch来实现是这样的:

fetch('./api/some.json') 
    .then(function(res) { 
        if (res.status !== 200) { 
            console.log('Looks like there was a problem. Status Code: ' + res.status); return; 
        }  
        // 处理响应中的文本信息  
        res.json().then(function(data) { 
            console.log(data); 
        }); 
    }) 
    .catch(function(err) { 
        console.log('Fetch Error : %S', err); 
    })

为什么要代替XMLHttpRequest

看了前面的例子,你可能会问,为什么不直接使用那些[现有的XMLHttpRequest
包装器]呢? 原因在于Fetch API不仅仅为你提供了一个fetch()方法。

你可以通过Request构造器函数创建一个新的请求对象,这也是建议标准的一部分。 第一个参数是请求的URL,第二个参数是一个选项对象,用于配置请求。请求对象一旦创建了, 你便可以将所创建的对象传递给fetch()方法,用于替代默认的URL字符串。

每个Request对象都有一个header属性,在Fetch API中它对应了一个Headers对象。 通过Headers对象,你能够修改请求头。不仅如此,对于返回的响应,你还能轻松的返回响应头中的各个属性。 但是需要注意的是,响应头是只读的。

响应中的元数据

在上面的例子中,我们可以查看响应对象的状态码,也知道了如何将响应转换成JSON格式的数据。但其实我们可以访问的元数据还有以下这些:

fetch("some.json").then(function(res) { 
     console.log(res.headers.get('Content-Type')); 
     console.log(res.headers.get('Data'));  
     console.log(res.status);               
     console.log(res.statusText);
     console.log(res.type); 
     console.log(res.url);
})

fetch不足之处

Promises缺少了一些重要的XMLHttpRequest的使用场景。例如, 使用标准的ES6 Promise你无法收集进入信息或中断请求。但另一方面,使用XMLHttpRequest你可以模拟进度(监听progress事件),也可以取消请求(使用abort()方法)。但是,如果有必要你也可以使用Promise来包裹它

浏览器支持

222.png

demo

本人在实际项目用到的封装好的方法,仅供参考

function fetchPost(url ,data) {    
    let host = DIX.HOST + url;    
    let token = UTIL.getToken();    
    let dataUrl = '';    
    if (data)  {        
        for (let item in data)  {            
          if (data.hasOwnProperty(item))  {                
              dataUrl += ('&' + item + '=' + data[item]); 
          }        
        }    
    }    
    let body = 'client=1&version=3&token=' + token + dataUrl;    
    
    return fetch (host, { 
        method: 'POST',        
        headers: {            
            "Content-Type": "application/x-www-form-urlencoded" 
        },        
        body: body    
    }).then(function(res) {        
        if (res.status !== 200) {            
            console.log('Looks like there was a problem. Status Code: ' + res.status);           
            return;       
         }        
        // 处理响应中的文本信息        
        return res.json();    
    }).catch(function(err) {      
        console.log('Fetch Error : %S', err);   
     })
}
随笔
Web note ad 1