js如何使方法异步调用

A. 如何在javascript中异步调用一个函数

js">functionasync(){}
setTimeout(function(){
async();
},1000)

上面就是复异步调用一个函制数。

js里的异步函数有很多， 除了setTimeout和setInterval 还有bind以及很多事件绑定和监听都属于异步操作。

B. js回调函数如何实现异步，给一个例子

异步处理不用阻塞来等待处理完成，而是允许后续操作，直至其程序将处理完成，并回调通知此函数

那么在js中有如下几种异步方式：

示例1

varasync=function(callback){
//readdata
setTimeout(function(){
callback('data');
},1000);//1秒后回调
};
//使用
async(function(data){
alert(data);
});

示例2

varasync=function(callback){
varxhr=newXMLHttpRequest();
xhr.open('get','.',true);

xhr.onreadystatechange=function(){
callback(xhr.readyStatus);
};
xhr.send();
};

async(function(data){
alert(data);
});

示例3

varasync=function(callback){
varimg=newImage();
img.onload=img.onerror=function(){
callback(img);
};
img.src='x.jpg';
};
async(function(data){
alert(data);
});

C. 怎样用JS实现异步转同步

源起

小飞是一名刚入行前端不久的新人，因为进到了某个大公司，俨然成为了学弟学妹眼中'大神'，大家遇到js问题都喜欢问他，这不，此时他的qq弹出了这样一条消息

"hi,大神在吗？我有个问题想问，现在我们的代码里面有这样的东西,可是得不到正确的返回结果

1234567functiongetDataByAjax () {return$.ajax(...postParam)}vardata = getDataByAjax()if(data) {console.log(data.info)}

"哦，你这里是异步调用，不能直接获得返回值，你要把if语句写到回调函数中",小飞不假思索的说到，对于一个‘专业’的fe来说，这根本不是一个问题。
“可是我希望只是改造getDataByAjax这个方法，让后面的代码成立。”
“研究这个没有意义，异步是js的精髓，同步的话会阻塞js调用，超级慢的，但是你要一再坚持的话，用async:true就好了”
“不愧是大神，我回去立刻试一试，么么哒”

两天后，她哭丧着脸登上了qq
“试了一下你的方法，但是根本行不通，哭~~”
“别急，我看看你这个postParam的参数行吗”

123456{...dataType:'jsonp',async:true...}

"这是一个jsonp请求啊，老掉牙的东西了，，jsonp请求是没有办法同步的"
“我知道jsonp请求的原理是通过script标签实现的，但是，你看，script也是支持同步的呀，你看tags/attscriptasync.asp”
“额，那可能是jquery没有实现吧，哈哈”
“大神，你能帮我实现一个jsonp的同步调用方式嘛，拜托了(星星眼)”
虽然他有点奇怪jquery为什么没有实现，但是既然w3school的标准摆在那里，码两行代码又没什么，

loadJsonpSync = (url) => {varresult;window.callback1 = (data) => (result = data)lethead = window.document.getElementsByTagName('head')[0]letjs = window.document.createElement('script')js.setAttribute('type','text/javascript')js.setAttribute('async','sync')// 这句显式声明强调src不是按照异步方式调用的js.setAttribute('src', url)head.appendChild(js)returnresult}

额，运行起来结果竟然是undefined！w3cshool的文档竟然也不准，还权威呢，我看也不怎么着，小飞暗自想到。

“刚才试了一下，w3school文档上写的有问题，这个异步属性根本就是错的”
“可是我刚还试过一次这个，我确认是好的呀”

12<script src="loop50000 && put('frist').js"></script><script src="put('second').js"></script>

(有兴趣的同学可以实现以下两个js，并且加上async的标签进行尝试。)
“这个，我就搞不清楚了”，小飞讪讪的说到
对方已离线

抽象

关于这个问题，相信不只是小飞，很多人都难以解答。为什么ajax可以做到同步，但jsonp不行，推广到nodejs上，为什么readFile也可以做到同步(readFileSync)，但有的库却不行。
（至于script的async选项我们暂时避而不谈，是因为现在的知识维度暂时还不够，但是不要着急，下文中会给出明确的解释）
现在，让我们以计算机科学的角度抽象这个问题：

我们是否可以将异步代码转化为同步代码呢？(ASYNCCALL => SYNCCALL)

既然是抽象问题，那么我们就可以不从工程角度/性能角度/实现语言等等等方面来看(同步比异步效率低下),每增加一个维度，复杂程度将以几何爆炸般增长下去。

首先，我们来明确一点，==在计算机科学领域==同步和异步的定义

同步（英语：Synchronization），指对在一个系统中所发生的事件（event）之间进行协调，在时间上出现一致性与统一化的现象。在系统中进行同步，也被称为及时（in time）、同步化的（synchronous、in sync）。--摘自网络
异步的概念和同步相对。即时间不一致，不统一

明确了这一点，我们可以借助甘特图来表示同步和异步

注意看我们标红的地方，如果你完成了小测验1，就会得到和这张图一致的顺序

==同步执行的代码片段必然在异步之前。==

所以，无论从理论还是实际出发，我们都不得不承认，在js中，把异步方法改成同步方法这个命题是水月镜花

哦对了，最后还需要解释一下最开始我们埋下的坑， 为什么jsonp中的async没有生效，现在解释起来真的是相当轻松，即document.appendChild的动作是交由dom渲染线程完成的，所谓的async阻塞的是dom的解析，而非js引擎的阻塞。实际上，在async获取资源后，与js引擎的交互依旧是push taskQueue的动作，也就是我们所说的async call

推荐阅读： 关于dom解析请大家参考webkit技术内幕第九章资源加载部分

峰回路转

相信很多新潮的同学已经开始运用切了async/await语法，在下面的语法中，getAjax1和console之间的具有同步的特性

1234asyncfunction() {vardata = await getAjax1()console.log(data)}

讲完了event loop和异步的本质，我们来重新审视一下async/await。
老天，这段代码亲手推翻了==同步执行的代码片段必然在异步之前。== 的黄金定律！
惊不惊喜，意不意外，这在我们的模型里如同三体里的质子一样的存在。我们重新审视了一遍上面的模型，实在找不到漏洞，找不到任何可以推翻的点，所以真的必须承认，async/await绝对是一个超级神奇的魔法。
到这里来看我们不得不暂时放弃前面的推论，从async/await本身来看这个问题
相信很多人都会说，async/await是CO的语法糖，CO又是generator/promise的语法糖，好的，那我们不妨去掉这层语法糖，来看看这种代码的本质, 关于CO，读的人太多了，我实在不好老生常谈，可以看看这篇文章，咱们就直接绕过去了,这里给出一个简易的实现
/5800210.html

functionwrap(wait) {variteriter = wait()const f = () => {const { value } = iter.next()value && value.then(f)}f()}function*wait() {varp = () =>newPromise(resolve => {setTimeout(() => resolve(), 3000)})yieldp()console.log('unlock1')yieldp()console.log('unlock2')console.log('it's sync!!')}

终于，我们发现了问题的关键，如果单纯的看wait生成器(注意，不是普通的函数)，是不是觉得非常眼熟。这就是我们最开始提出的spinlock伪代码！！！
这个已经被我们完完全全的否定过了，js不可能存在自旋锁，事出反常必有妖，是的，yield和*就是表演async/await魔法的妖精。
generator和yield字面上含义。Gennerator叫做生成器，yield这块ruby，python，js等各种语言界争议很大，但是大多数人对于‘让权’这个概念是认同的(以前看到过maillist上面的争论，但是具体的内容已经找不到了)

扩展阅读---ruby元编程 闭包章节yield(ruby语义下的yield)

所谓让权，是指cpu在执行时让出使用权利，操作系统的角度来看就是‘挂起’原语，在eventloop的语义下，似乎是暂存起当时正在执行的代码块(在我们的eventloop里面对应runPart)，然后顺序的执行下一个程序块。
我们可以修改eventloop来实现让权机制

小测验2 修改eventloop使之支持yield原语

至此，通过修改eventloop模型固然可以解决问题，但是，这并不能被称之为魔法。

和谐共存的世界

实际上通过babel，我们可以轻松的降级使用yield,（在es5的世界使用让权的概念！！）
看似不可能的事情，现在，让我们捡起曾经论证过的
==同步执行的代码片段必然在异步之前。== 这个定理，在此基础上进行进行逆否转化

==在异步代码执行之后的代码必然不是同步执行的(异步的)。==

这是一个圈子里人尽皆知的话，但直到现在他才变得有说服力（我们绕了一个好长的圈子）
现在，让我们允许使用callback，不使用generator/yield的情况下完成一个wait generator相同的功能！！！

functionwait() {const p = () => ({value:newPromise(resolve => setTimeout(() => resolve(), 3000))})letstate = {next: () => {state.next = programPartreturnp()}}functionprogramPart() {console.log('unlocked1')state.next = programPart2returnp()}functionprogramPart2() {console.log('unlocked2')console.log('it's sync!!')return{value: void 0}}returnstate}

太棒了，我们成功的完成了generator到function的转化(虽然成本高昂)，同时，这段代码本身也解释清楚了generator的本质，高阶函数，片段生成器，或者直接叫做函数生成器！这和scip上的翻译完全一致,同时拥有自己的状态(有限状态机)

推荐阅读 计算机程序的构造和解释 第一章generator部分
小测验3 实际上我们提供的解决方式存在缺陷，请从作用域角度谈谈

其实，在不知不觉中，我们已经重新发明了计算机科学中大名鼎鼎的CPS变换
Continuation-passing_style

最后的最后，容我向大家介绍一下facebook的CPS自动变换工具--regenerator。他在我们的基础上修正了作用域的缺陷，让generator在es5的世界里自然优雅。我们向facebook脱帽致敬！！egenerator

后记

同步异步 可以说是整个圈子里面最喜欢谈论的问题，但是，谈来谈去，似乎绝大多数变成了所谓的‘约定俗称’，大家意味追求新技术的同时，却并不关心新技术是如何在老技术上传承发展的，知其然而不知其所以然，人云亦云的写着似是而非的js。

==技术，不应该浮躁==

PS: 最大的功劳不是CO，也不是babel。regenerator的出现比babel早几个月，而且最初的实现是基于esprima/recast的，关于resprima/recast,国内似乎了解的并不多，其实在babel刚刚诞生之际， esprima/esprima-fb/acron 以及recast/jstransfrom/babel-generator几大族系围绕着react产生过一场激烈的斗争，或许将来的某一天，我会再从实现细节上谈一谈为什么babel笑到了最后~~~~

D. js可以异步调用后台java方法吗

一、为Test写一个方法，不妨为dataToString()，把字符串数组变成一个字符串，格式为“
["A","B","C"]
但要注意字符中版A中可能会含有双引号，权所以需要替换"为"
二、在前台JSP页面中输出一段这样的语句：
<script>
var str = "<%=Test.toDataString()%>";
var arr = (str);
window.onload = function(){
for(var i=0;i<arr.length;i++){
//to do something
}
}
</script>
另一种方法就是在window.onload中用AJAX去取。利用AJAX必须写servlet。因为前面一种方法的jsp和servlet是等同的。
js方法中调用java的参数
<input type="image"
src="../../images/icons/setParmeter.jpg" onclick="Block(<%=flag%>)" />
<input type="text" id="isparemeter" value="<%=flag%>"/>

E. 站ajax加载，异步的页面有js，应该如何让它执行。

1、AJAX提交，异步页面JS是可以执行的，
2、只不过对于这种页面既有HTML又有JS的解释性内语言，执行是讲究先容后顺序的
3、除非就是给JS绑定事件如引入jquery文件后$(function(){});其中绑定事件代码部分要写到{}里面
4、或者JS操作的是异步页面标签，可以选择把JS代码部分放到HTML代码部分后面

F. javascript中异步操作的异常怎么处理

一、JavaScript异步编程的两个核心难点
异步I/O、事件驱动使得单线程的JavaScript得以在不阻塞UI的情况下执行网络、文件访问功能，且使之在后端实现了较高的性能。然而异步风格也引来了一些麻烦，其中比较核心的问题是：
1、函数嵌套过深
JavaScript的异步调用基于回调函数，当多个异步事务多级依赖时，回调函数会形成多级的嵌套，代码变成

金字塔型结构。这不仅使得代码变难看难懂，更使得调试、重构的过程充满风险。
2、异常处理
回调嵌套不仅仅是使代码变得杂乱，也使得错误处理更复杂。这里主要讲讲异常处理。
二、异常处理
像很多时髦的语言一样，JavaScript 也允许抛出异常，随后再用一个try/catch
语句块捕获。如果抛出的异常未被捕获，大多数JavaScript环境都会提供一个有用的堆栈轨迹。举个例子，下面这段代码由于'{'为无效JSON
对象而抛出异常。
?

12345678

function JSONToObject(jsonStr) { return JSON.parse(jsonStr);}var obj = JSONToObject('{');//SyntaxError: Unexpected end of input//at Object.parse (native)//at JSONToObject (/AsyncJS/stackTrace.js:2:15)//at Object.<anonymous> (/AsyncJS/stackTrace.js:4:11)

堆栈轨迹不仅告诉我们哪里抛出了错误，而且说明了最初出错的地方：第4 行代码。遗憾的是，自顶向下地跟踪异步错误起源并不都这么直截了当。
异步编程中可能抛出错误的情况有两种：回调函数错误、异步函数错误。
1、回调函数错误
如果从异步回调中抛出错误，会发生什么事？让我们先来做个测试。
?

1234567

setTimeout(function A() { setTimeout(function B() { setTimeout(function C() { throw new Error('Something terrible has happened!'); }, 0); }, 0);}, 0);

上述应用的结果是一条极其简短的堆栈轨迹。
?

12

Error: Something terrible has happened!at Timer.C (/AsyncJS/nestedErrors.js:4:13)

等等，A 和B 发生了什么事？为什么它们没有出现在堆栈轨迹中？这是因为运行C 的时候，异步函数的上下文已经不存在了，A 和B 并不在内存堆栈里。这3
个函数都是从事件队列直接运行的。基于同样的理由，利用try/catch
语句块并不能捕获从异步回调中抛出的错误。另外回调函数中的return也失去了意义。
?

1234567

try { setTimeout(function() { throw new Error('Catch me if you can!'); }, 0);} catch (e) {console.error(e);}

看到这里的问题了吗？这里的try/catch 语句块只捕获setTimeout函数自身内部发生的那些错误。因为setTimeout
异步地运行其回调，所以即使延时设置为0，回调抛出的错误也会直接流向应用程序。
总的来说，取用异步回调的函数即使包装上try/catch 语句块，也只是无用之举。（特例是，该异步函数确实是在同步地做某些事且容易出错。例如，Node
的fs.watch(file,callback)就是这样一个函数，它在目标文件不存在时会抛出一个错误。）正因为此，Node.js
中的回调几乎总是接受一个错误作为其首个参数，这样就允许回调自己来决定如何处理这个错误。
2、异步函数错误
由于异步函数是立刻返回的，异步事务中发生的错误是无法通过try-catch来捕捉的，只能采用由调用方提供错误处理回调的方案来解决。
例如Node中常见的function (err, ...)
{...}回调函数，就是Node中处理错误的约定：即将错误作为回调函数的第一个实参返回。再比如HTML5中FileReader对象的onerror函数，会被用于处理异步读取文件过程中的错误。
举个例子，下面这个Node 应用尝试异步地读取一个文件，还负责记录下任何错误（如“文件不存在”）。
?

1234567

var fs = require('fs'); fs.readFile('fhgwgdz.txt', function(err, data) { if (err) { return console.error(err); }; console.log(data.toString('utf8'));});

客户端JavaScript 库的一致性要稍微差些，不过最常见的模式是，针对成败这两种情形各规定一个单独的回调。jQuery 的Ajax
方法就遵循了这个模式。
?

1234

$.get('/data', { success: successHandler, failure: failureHandler});

不管API 形态像什么，始终要记住的是，只能在回调内部处理源于回调的异步错误。
三、未捕获异常的处理
如果是从回调中抛出异常的，则由那个调用了回调的人负责捕获该异常。但如果异常从未被捕获，又会怎么样？这时，不同的JavaScript环境有着不同的游戏规则……
1. 在浏览器环境中
现代浏览器会在开发人员控制台显示那些未捕获的异常，接着返回事件队列。要想修改这种行为，可以给window.onerror
附加一个处理器。如果windows.onerror 处理器返回true，则能阻止浏览器的默认错误处理行为。
?

123

window.onerror = function(err) { return true; //彻底忽略所有错误};

在成品应用中， 会考虑某种JavaScript 错误处理服务， 譬如Errorception。Errorception
提供了一个现成的windows.onerror 处理器，它向应用服务器报告所有未捕获的异常，接着应用服务器发送消息通知我们。
2. 在Node.js 环境中
在Node 环境中，window.onerror 的类似物就是process 对象的uncaughtException 事件。正常情况下，Node
应用会因未捕获的异常而立即退出。但只要至少还有一个uncaughtException 事件处理
器，Node 应用就会直接返回事件队列。
?

123

process.on('uncaughtException', function(err) { console.error(err); //避免了关停的命运！});

但是，自Node 0.8.4 起，uncaughtException 事件就被废弃了。据其文档所言，对异常处理而言，uncaughtException
是一种非常粗暴的机制，请勿使用uncaughtException，而应使用Domain 对象。
Domain 对象又是什么？你可能会这样问。Domain 对象是事件化对象，它将throw 转化为'error'事件。下面是一个例子。
?

123456789

var myDomain = require('domain').create();myDomain.run(function() { setTimeout(function() { throw new Error('Listen to me!') }, 50);});myDomain.on('error', function(err) { console.log('Error ignored!');});

源于延时事件的throw 只是简单地触发了Domain 对象的错误处理器。
Error ignored!
很奇妙，是不是？Domain 对象让throw
语句生动了很多。不管在浏览器端还是服务器端，全局的异常处理器都应被视作最后一根救命稻草。请仅在调试时才使用它。
四、几种解决方案
下面对几种解决方案的讨论主要集中于上面提到的两个核心问题上，当然也会考虑其他方面的因素来评判其优缺点。
1、Async.js
首先是Node中非常著名的Async.js，这个库能够在Node中展露头角，恐怕也得归功于Node统一的错误处理约定。

而在前端，一开始并没有形成这么统一的约定，因此使用Async.js的话可能需要对现有的库进行封装。
Async.js的其实就是给回调函数的几种常见使用模式加了一层包装。比如我们需要三个前后依赖的异步操作，采用纯回调函数写法如下：
?

12345678910111213141516

asyncOpA(a, b, (err, result) => { if (err) { handleErrorA(err); } asyncOpB(c, result, (err, result) => { if (err) { handleErrorB(err); } asyncOpB(d, result, (err, result) => { if (err) { handlerErrorC(err); } finalOp(result); }); });});

如果我们采用async库来做：
?async.waterfall([ (cb) => { asyncOpA(a, b, (err, result) => { cb(err, c, result); }); }, (c, lastResult, cb) => { asyncOpB(c, lastResult, (err, result) => { cb(err, d, result); }) }, (d, lastResult, cb) => { asyncOpC(d, lastResult, (err, result) => { cb(err, result); }); }], (err, finalResult) => { if (err) { handlerError(err); } finalOp(finalResult);});

可以看到，回调函数由原来的横向发展转变为纵向发展，同时错误被统一传递到最后的处理函数中。

其原理是，将函数数组中的后一个函数包装后作为前一个函数的末参数cb传入，同时要求：
每一个函数都应当执行其cb参数;cb的第一个参数用来传递错误。我们可以自己写一个async.waterfall的实现：
?let async = { waterfall: (methods, finalCb = _emptyFunction) => { if (!_isArray(methods)) { return finalCb(new Error('First argument to waterfall must be an array of functions')); } if (!methods.length) { return finalCb(); } function wrap(n) { if (n === methods.length) { return finalCb; } return function (err, ...args) { if (err) { return finalCb(err); } methods[n](...args, wrap(n + 1)); } } wrap(0)(false); }};

Async.js还有series/parallel/whilst等多种流程控制方法，来实现常见的异步协作。
Async.js的问题：
在外在上依然没有摆脱回调函数，只是将其从横向发展变为纵向，还是需要程序员熟练异步回调风格。

错误处理上仍然没有利用上try-catch和throw，依赖于“回调函数的第一个参数用来传递错误”这样的一个约定。
2、Promise方案
ES6的Promise来源于Promise/A+。使用Promise来进行异步流程控制，有几个需要注意的问题，

把前面提到的功能用Promise来实现，需要先包装异步函数，使之能返回一个Promise：
?

12345678910

function toPromiseStyle(fn) { return (...args) => { return new Promise((resolve, reject) => { fn(...args, (err, result) => { if (err) reject(err); resolve(result); }) }); };}

这个函数可以把符合下述规则的异步函数转换为返回Promise的函数：
回调函数的第一个参数用于传递错误，第二个参数用于传递正常的结果。接着就可以进行操作了：
?

123456789101112131415

let [opA, opB, opC] = [asyncOpA, asyncOpB, asyncOpC].map((fn) => toPromiseStyle(fn)); opA(a, b) .then((res) => { return opB(c, res); }) .then((res) => { return opC(d, res); }) .then((res) => { return finalOp(res); }) .catch((err) => { handleError(err); });

通过Promise，原来明显的异步回调函数风格显得更像同步编程风格，我们只需要使用then方法将结果传递下去即可，同时return也有了相应的意义：

在每一个then的onFullfilled函数（以及onRejected）里的return，都会为下一个then的onFullfilled函数（以及onRejected）的参数设定好值。
如此一来，return、try-catch/throw都可以使用了，但catch是以方法的形式出现，还是不尽如人意。
3、Generator方案
ES6引入的Generator可以理解为可在运行中转移控制权给其他代码，并在需要的时候返回继续执行的函数。利用Generator可以实现协程的功能。
将Generator与Promise结合，可以进一步将异步代码转化为同步风格：
?

1234567891011

function* getResult() { let res, a, b, c, d; try { res = yield opA(a, b); res = yield opB(c, res); res = yield opC(d); return res; } catch (err) { return handleError(err); }}

然而我们还需要一个可以自动运行Generator的函数：
?

2324252627282930

function spawn(genF, ...args) { return new Promise((resolve, reject) => { let gen = genF(...args); function next(fn) { try { let r = fn(); if (r.done) { resolve(r.value); } Promise.resolve(r.value) .then((v) => { next(() => { return gen.next(v); }); }).catch((err) => { next(() => { return gen.throw(err); }) }); } catch (err) { reject(err); } } next(() => { return gen.next(undefined); }); });}

用这个函数来调用Generator即可：
?

1234567

spawn(getResult) .then((res) => { finalOp(res); }) .catch((err) => { handleFinalOpError(err); });

可见try-catch和return实际上已经以其原本面貌回到了代码中，在代码形式上也已经看不到异步风格的痕迹。
类似的功能有co/task.js等库实现。
4、ES7的async/await
ES7中将会引入async function和await关键字，利用这个功能，我们可以轻松写出同步风格的代码，

同时依然可以利用原有的异步I/O机制。
采用async function，我们可以将之前的代码写成这样：
?

12345678910111213

async function getResult() { let res, a, b, c, d; try { res = await opA(a, b); res = await opB(c, res); res = await opC(d); return res; } catch (err) { return handleError(err); }} getResult();

和Generator & Promise方案看起来没有太大区别，只是关键字换了换。
实际上async
function就是对Generator方案的一个官方认可，将之作为语言内置功能。
async function的缺点：
await只能在async function内部使用，因此一旦你写了几个async function，或者使用了依赖于async
function的库，那你很可能会需要更多的async function。
目前处于提案阶段的async
function还没有得到任何浏览器或Node.JS/io.js的支持。Babel转码器也需要打开实验选项，并且对于不支持Generator的浏览器来说，还需要引进一层厚厚的regenerator
runtime，想在前端生产环境得到应用还需要时间。
以上就是本文的全部内容，希望对大家的学习有所帮助。

G. js如何异步执行方法

functionmyThread(callback){

returnsetTimeout(1000*10,function(){

$("#div").append("<p>hello</p>");//10秒后在div中加一个行，然后在执行callback函数

callback();

});

}

用回调内函容数

functionA(fun){

vartemp=100;

temp=temp*temp;

window.setTimeout(function(){

fun(temp);

},0);

alert("a函数:"+temp);

}

functionB(r){

alert("b函数"+r);

}

A(B);//调用

H. js里怎么异步调用后台非静态方法

既然是异步，就不可能用for循环，因为for循环体中是没有办法暂停等待异步调用的。应该用函数递归的方式循环

I. JS 怎么让整体的for同步执行而for中的异步函数异步执行

functionasync1(callback){
setTimeout(_=>{
console.log('async1:'+newDate().toTimeString());
callback();
},2000);
}

functionasync2(){
returnnewPromise(resolve=>{
setTimeout(_=>{
console.log('async2:'+newDate().toTimeString());
resolve();
},2000);
})
}

functionasync3(){
returnPromise.resolve().then(_=>console.log('async3:'+newDate().toTimeString()));
}

//将async1封装为方式
functionasync1_promise(callback){
returnnewPromise((resolve,reject)=>{
try{
async1((...args)=>{
typeofcallback==='function'&&callback.apply(null,args);
resolve();
});
}catch(e){
reject(e);
}
});
}

functiontest1(){
//先执行4次async1,执行完上1个再执行下一个
//然后执行4次async2,执行完上1个再执行下一个
//再执行1次async3
async1_promise()
.then(_=>async1_promise())
.then(_=>async1_promise())
.then(_=>async1_promise())
.then(_=>async2())
.then(_=>async2())
.then(_=>async2())
.then(_=>async2())
.then(_=>async3());
}

functiontest2(){
//和test1相同,只是写法简化,如果要执行很多次可以这么写
varstep=Promise.resolve();
for(leti=0;i++<4;step=step.then(_=>async1_promise()));
for(leti=0;i++<4;step=step.then(_=>async2()));
step.then(_=>async3());
}

functiontest3(){
//先执行4次async1,无需等待上1个执行完就执行下一个
//然后执行4次async2,无需等待上1个执行完就执行下一个
//再执行1次async3
Promise.all(Array.from(newArray(4),_=>async1_promise()))
.then(_=>Promise.all(Array.from(newArray(4),_=>async2())))
.then(_=>async3());
}

如果要测试,注意不要同时运行,需要单独运行test1, test2, test3, 在浏览器控制台查看效果.