前端需要掌握ajax吗,前端开发需要了解的异步请求方式

异步请求

背景：

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

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);

});

参考文献

Rxjs

本文作者：前端首席体验师(CheongHu)

版权声明： 本文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处！