用ES7标准简洁的解决ajax异步请求问题

最后编辑于 2020年06月23日 开发

最近在学着写一个crx插件,但是在封装一个网络请求函数的时候遇到了问题:不用同步ajax就会获取不到数据,用了就会导致浏览器渲染进程堵塞,整个页面就会出现假死,setTimeout不好用,也不治本。
对于一个异步ajax,其返回值为一个Promise对象,顾名思义,Promise对象"许诺"一个返回值,所以可以通过.then配合来进行请求,但这样会有2个问题:
1.不可能将responText用任何方式return出来,也就无法对其进行封装
2.在遇到有依赖关系的请求的时候,.then套.then,极其繁琐

在ES7中,引入了一个新的语法糖 async/await 来解决这个问题
async可以将一个函数体声明为异步函数,然后该函数就可以使用await来声明执行顺序

什么意思呢 我们直接上一个示范

async function AsyncExample(){
var ajaxRequest = await $.ajax({
[Ajax请求体]
success:function(callback){
responData = callback;
}
return responData;
});
}

async function callExample(){
 var RequestData= await AsyncExample();
 alert(RequestData);
}
callExample();

由于堵塞被放在了一个异步的Promise里面,所以页面就不会假死,我们也能正常获取数据

评论

  • example写错了return...

    async function AsyncExample(){
    var ajaxRequest = await $.ajax({
    
    success:function(callback){
    responData = callback;
    }
    
    });
    return responData;
    }
    
    async function callExample(){
     var RequestData= await AsyncExample();
     alert(RequestData);
    }
    callExample();
    
登录注册后才能评论。