Ajax fetch axios的区别与优缺点
原生ajax:
var xhr=newXMLHttpRequest();
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
xhr.open('post','test.php');
xhr.send('name=test&age=18');
xhr.onreadystatechange=function(){if(xhr.readySate==4&&xhr.status==200){
console.log(xhr.responseText);
}
}
jqueryAjax
var btn=document.getElementById('btn');
btn.οnclick=function(){
ajax({
type:'post',
url:'test.php',
data:"name=test&&pwd=123456",
success:function(data){
console.log(data);
}
});
}
fetch
fetch('http://www.mozotech.cn/bangbang/index/user/login', {
method:'post',
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
body:newURLSearchParams([
["username", "Lan"],["password", "123456"]
]).toString()
})
.then(res=>{
console.log(res);returnres.text();
})
.then(data=>{
console.log(data);
})
axios
axios.post({
url:'test.php',
data:{name:'test',age:18},
})
.then(res=>{console.log(res)})
.catch(error=>{console.log(error)});
同时发起多个请求:functiongetUserAccount(){return axios.get('user/123456')
}functiongetUserPermissions(){return axios.get('user/123456/permission')
}
axios.all([getUserAccount(),getUserPermission()])
.then(axios.spread((acct,perms)=>{
}))
对比
1 几种方式的对比
ajax:
优点:局部更新,原生支持
缺点:可能破坏浏览器后退功能,嵌套回调
jqueryAjax:
在原生ajax的基础上进行封装,支持jsonp
fetch:
优点:解决回调地狱
缺点:APIA偏低层,需要封装,默认不带cookie,需要手动添加;浏览器支持情况不是很友好,需要第三方polyfill
axios的特点:
支持浏览器和node.js
支持promise
能拦截请求和响应
能转换请求和相应数据
能取消请求
自动转换json数据
浏览器端支持防止CSRF(跨站请求伪造)
将axios异步请求同步处理:
async getInfo(){try{
let data=await axios.get('test.php');
console.log(data);
}catch(err){
console.log(err)
}
}