fetch.js php,用Fetch进行http请求

欧阳斌
2023-12-01

这次给大家带来用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。

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中文网其它相关文章!

推荐阅读:

 类似资料: