前端开发需要了解的异步请求方式

异步请求

背景：

异步请求，为了优化用户体验，而诞生。

ajax

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
}else {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
 }
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

• 界面用户体验改善，局部刷新
• 每次都需要重复写XMLHttpRequest相关代码

calback

function sum(a,b,cb){
  const sum = a+b;
  if(cb && typeof cb  === 'function'){
    cb(sum)
  }
}
sum(1,2,function(parm){
 console.log(parm);
})

• 依赖于之前业务逻辑，并非真正的异步，

var request = $.ajax({
  url: "script.php",
  method: "POST",
  data: { id : menuId },
  dataType: "html"
});
 
request.done(function( msg ) {
  $( "#log" ).html( msg );
});
 
request.fail(function( jqXHR, textStatus ) {
  alert( "Request failed: " + textStatus );
});

• 进行了封装，减少了XMLHttpRequest相关代码

fetch

fetch("http://xxxx").then(res => {
  console.log("fecth res....");
}).catch(error => {
 console.log("fetch error");
})

promise

new Promise().then(res => {
  console.log("promise res....");
}).catch(error => {
 console.log("promise error");
})

• 代码返回结果处理，拉平，编写上体验更好，

axios 增强版promise

axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

//同时发出多个请求
function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));

es6 async/await

async function getUserName(){
 const userName = await queryUserName(); 
 return userName;
}

e6 yield

 const getUser = function* getUserName(){
  yield "zhangsan";
  yield "xiaoming"
}

• 多个请求之间，把异步代码修改为同步，等待

Rxjs

const foo = new Observable(subscriber => {
  console.log('Hello');
  subscriber.next(42);
});
 
foo.subscribe(x => {
  console.log(x);
});

参考文献

• Ajax js
• Jquery
• Axios中文说明
• yield
• Rxjs
  本文作者：前端首席体验师(CheongHu)
  版权声明： 本文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处！