h5的fetch方法_HTML5 fetch API

介绍

fetch是传统XMLHttpRequest(也就是常说的ajax)的替代者，相比后者，它更简单，并且内置对Promise的支持。

但其实话说回来，我至今没太搞明白它的更多优点，因为说它使用简单好像体现不出优势，因为我们平时都是使用ajax框架的(比如jQuery)，很少会直接使用原生XMLHttpRequest，而且用了它的话还要担心兼容性的问题。

语法

语法很简单：fetch(url, config)，返回一个Promise对象。

基本使用

请求某个网页：

fetch('http://localhost/index.html')

.then(response => response.text())

.then(data => console.log(data));

请求某个JSON接口：

fetch('http://localhost/test.json')

.then(response => response.json())

.then(data => console.log(data));

请求某个图片：

fetch('http://localhost/test.jpg').then(response => response.blob())

.then(data =>

{

var img = new Image();

img.src = URL.createObjectURL(data); // 这个data是blob对象

document.body.appendChild(img);

});

Post请求fetch('https://blog.haoji.me/xxx.json', {

method: 'POST',

headers: {

'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'

},

body: 'a=1&b=2',

}).then(resp => resp.json()).then(resp => {

console.log(resp)

});

携带cookie

fetch默认是不携带cookie的，需要手动添加一个配置参数credentials: 'include'：

fetch('http://localhost/test.json', {credentials: 'include'})

.then(response => response.json())

.then(data => console.log(data));

更多用法

自定义headervar headers = new Headers(

{

"Content-Type": "text/plain",

"X-Custom-Header": "aaabbbccc",

});

var formData = new FormData();

formData.append('name', 'lxa');

formData.append('file', someFile);

var config =

{

credentials: 'include', // 支持cookie

headers: headers, // 自定义头部

method: 'POST', // post方式请求

body: formData // post请求携带的内容

};

fetch('http://localhost/test.json', config)

.then(response => response.json())

.then(data => console.log(data));

当然，headers也可以这么初始化：

var content = "Hello World";

var myHeaders = new Headers();

myHeaders.append("Content-Type", "text/plain");

myHeaders.append("Content-Length", content.length.toString());

myHeaders.append("X-Custom-Header", "ProcessThisImmediately");

兼容性

兼容性目前不太好，Chrome42+和Firefox39+支持，IE全系列不支持。

参考