fetch实践 替代jquery封装的ajax

 看到了一些有关于fetch的文章，随着ES6规范的落实，JS原生API越来越健全，所以打算试试fetch来取代ajax。

以下为前端部分，做了注解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
fetch("http://127.0.0.1:3000/users/test",//定义了fetch的url
{
method:"POST",//fetch方式post和get
headers:{"Content-Type":"application/x-www-form-urlencoded"},//body的头，标明格式
body:"firstName=Nikhil&favColor=blue&password=easytoguess"//传输的主要内容
})
.then(function(res){
if(res.ok){//如果回调OK则证明数据已返回
returnres.json();//返回json的数据格式，方便下面调用（之前试了直接在此alertres.json
    ()却不能输出，在查阅很多资料后发现这种方式，先返回，再在之后的then函数里输出。
}elseif(res.status==401){
alert("Oops!Youarenotauthorized.");
}
},
function(e){//抛出异常
alert("Errorsubmittingform!");
})
.then(function(text){
console.log('gottext',text)//输出服务器的返回值，此处也可用json输出。
});

 

 

Body共有五个属性

arrayBuffer()
blob()
json()
text()
formData()

 

以nodejs搭建后台，用的是express框架，以下为后台接口代码

 

router.post('/test', function(req, res, next) {
console.log(req.body);//在控制台输出接受到的内容
res.setHeader("Access-Control-Allow-Origin", "*");//接受所有跨域请求
res.set('Content-Type','text/plain');
res.send({//json格式传回数据
'first':'aa','he':'bb'
});
});

 

点击最上面的黑线，就可以在Console里找到我们发回的数据。