Fetch数据请求
2019-12-30 本文已影响0人
1CC4
fetch:是一种HTTP数据请求的方式,是
XMLHttpRequest
的一种替代方案。
fetch:不是ajax的进一步封装,而是原生js
。
fetch函数:就是原生js使用promise
进行的封装,没有使用XMLHttpRequest
对象。
语法:
fetch(url,options).then(res => {
return res.json();
}).then(data =>{
console.log(data);
}).catch( err => {
console.log(err);
})
- 第一个参数:URL地址
- 第二个参数:options可选项
- 使用JavaScript中Promise对象处理回调
示例:
<div>
<h2>fetch-es6异步通讯</h2>
<p id="message"></p>
</div>
<script>
const pElemnt = document.getElementById('message');
const url = 'http://www.warmtel.com:8089/api/list';
const options = {
method: 'GET',
headers: {
'content-type':'application/x-www-form-urlencoded'
}
}
fetch(url,options).then(res => {
if(res.ok){
console.log(res);
return res.json();
}else{
return Promise.reject('请求出错!');
}
}).then(data =>{
console.log(typeof(data));
pElemnt.innerHTML = JSON.stringify(data);
}).catch( err => {
console.log(err);
})
</script>