这次给大家带来用fetch进行http请求，用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兼容性
浏览器兼容性
fetch原生支持性不高，不过可以使用一些polyfill。
MMM金融互助系统源码是以thinkphp为核心进行开发的3m金融互助平台。程序安装说明：1.恢复数据：将“数据备份”文件夹中的 urkeji.sql 文件请采用phpMyAdmin进行导入； 2.配置Sql数据库信息，文件路径：根目录下 config.php3.后台管理地址：http://域名/admin.php 用户名：100000 密码：admin1
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的变化与基础实现。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
