在开发过程中,我们向服务端发送请求,一般会使用三种方式, XMLHttpRequest(XHR),Fetch ,jQuery实现的AJAX。
其中, XMLHttpRequest(XHR)和Fetch是浏览器的原生API,jquery的ajax其实是封装了XHR。
XHR不仅要做各个浏览器的兼容性,还饱受回调地狱的折磨,这显然不是一个好的选择,
对比原生AJAX的实现,使用jQuery实现的AJAX就异常简单了,但是我们仍然逃脱不了一个问题,回调地狱。
fetch是类似AJAX的交互方式之一,基于Promise设计,这样写代码就刷服多了。因为res返回的是流,所以我们需要通过res.json方法来把它变成我们可以使用的数据。
//GET
fetch(`http://localhost:80?user=${user}&pass=${pass}`, {
method: "GET"
}).then((res) => {
res.json(() => {
}).then((res) => {
//成功代码
}).catch(() => {
//失败代码
})
});
//POST
fetch(`http://localhost:80`, {
method: "POST",
headers:{
"Content-Type" : "application/x-www-form-urlencoded"
},
body:`user=${user}&pass=${pass}`
}).then((res) => {
res.json(() => {
}).then((res) => {
//成功代码
}).catch(() => {
//失败代码
})
});