JS异步 *** 作新体验之 async函数

JS异步 *** 作新体验之 async函数,第1张

文章来自 >var map = {

   beijing : {},

   shanghai : {}

};

//上面的这样,无法保证输出顺序

var arr = [

   {name : 'beijing' , data : {}},

   {name : 'shanghai' , data : {}}

];

数据格式变一下,这样来保证输出顺序

声明一个布尔值的变量初始值为false,在这个异步方法的最后那里改变这变量的值为ture,在外面判断一下就可以了例如: var flag=false; function aa() { //异步方法要执行的代码 flag=true; } if(flag) { //异步方法结束要执行的代码 } -

JS里面写ajax发送请求到页面,页面返回数据提示结果:

--------------------------------------------------JS代码----------------------------------------------------

function trimRepID(s){return sreplace(/^\s+|\s+$/g,"");} //去点字符串的空格的函数

---encodeURI();//UTF-8编码的转换

//先声明一个异步请求对象

var xml>

concat()连接两个或更多的数组,并返回结果。

join()把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。

pop()删除并返回数组的最后一个元素

push()向数组的末尾添加一个或更多元素,并返回新的长度。

reverse()颠倒数组中元素的顺序。

我们有时候需要遍历数组的元素,将它们传入到异步函数中执行,其中的异步写法容易写错,我们来看一下有哪些易错点。

假设我们有个异步方法 sleepPromise,形式如下:

这里为了方便演示,使用 setTimeout 写成了个 promise 形式的 sleep 方法。传入的 t 为延迟执行的时间,msg 为信息内容。

在实际开发中,异步方法可能是传入用户好友 id 查找数据库,获得简单的好友信息。

假设我们需要在下面代码的注释位置下方写一个异步便利实现。

通常前端一看到要遍历数组,就会用 forEach。如果你不够老道,可能会写出如下的实现:

输出结果为;

这种写法并不对,其实是将遍历写成了同步。

问题出在哪?出在 forEach 本身并不支持异步写法,你在 forEach 方法的前面加不加 await 关键字都是无效的,因为它的内部没有处理异步的逻辑。

forEach 是 ES5 的 API,要比 ES6 的 Promise 要早的多得多。为了向后兼容,forEach 以后也不会支持异步处理。

所以 forEach 的执行并不会阻塞 loopAsync 之后的代码,所以会导致阻塞失败,先输出 [end] 。

使用普通的 for 循环写法,await 的外层函数就仍就是 loopAysnc 方法,就能正确保存阻塞代码。

但这里的问题是,这些异步方法的执行是 串行 的。可以看到总共执行了 6 s。

如果我们的这些请求是有顺序的依赖关系的,这样写是没问题。

但如果我们的场景是根据用户 id 数组从数据库中查找对应用户名,我们的时间复杂度就是 O(n) ,是不合理的。

此时我们需要改写为 并行 的异步,并且还要保证所有异步都执行完后才执行下一步。我们可以用 Promiseall() 。

首先,我们需要根据 tasks 数组生成对应的 promise 对象数组,然后传入到 Promiseall 方法中执行。

这样,这些异步方法就会同时执行。当所有异步都执行完毕后,代码才往下执行。

输出结果如下:

3 秒就完事了,太强了。

前面说到 forEach 底层并没有实现异步的处理,才导致阻塞失效,那么我们其实不妨实现支持异步的简易 forEach。

并行实现:

串行实现:

用法:

简单总结一下。

一般来说,我们更常用 Promiseall 的并行执行异步的方法,常见于数据库查找一些 id 对应的数据的场景。

for 循环的串行写法适用于多个异步有依赖的情况,比如找最终推荐人。

forEach 则是纯粹的错误写法,除非是不需要使用 async/await 的情况。

ajs

var MongoClient = require('mongodb')MongoClient;

var main = {

getResult: function(callback) {

MongoClientconnect('mongodb://localhost:27017/local', function(err, db) {

// Use the admin database for the operation

var adminDb = dbadmin();

// List all the available databases

adminDblistDatabases()then(function(dbs) {

var result = [];

dbsdatabasesforEach(function(element, index) {

resultpush(elementname);

})

dbclose();

callback(result);

});

});

}

};

moduleexports = main;

bjs:

var a = require("/a");

agetResult(function(result){

consolelog(result);

});

另外,require js文件并不用写 js 扩展名。如果想用promise的方式而不用callback的方式写异步,请参考bluebird。

以上就是关于JS异步 *** 作新体验之 async函数全部的内容,包括:JS异步 *** 作新体验之 async函数、js 异步获取的数据输出顺序就变了、JS怎么判断异步是否执行完成等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/9586816.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-29
下一篇2023-04-29

发表评论

登录后才能评论

评论列表(0条)

    保存