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)

  }

}

 

axios

上一篇:Pygame的图像移动


下一篇:【复习】Appium之Android自动化(二)