Ajax fetch axios的区别与优缺点

Ajax  fetch axios的区别与优缺点

原生ajax:

var xhr=new XMLHttpRequest();
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.onclick=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: new URLSearchParams([
        ["username", "Lan"],["password", "123456"]
    ]).toString()
})
.then(res => {
    console.log(res);
    return res.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)});

同时发起多个请求：

function getUserAccount(){
　　　return axios.get('user/123456')
}
function getUserPermissions(){
　　　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)

　　}

}