直接调用（异步调异步）

functionfn1() { setTimeout(()=>{ console.log('fn1执行') fn2('fn1传递过去的参数') }, 1000) } functionfn2(data) { setTimeout(()=>{ console.log('fn2执行', data) fn3('fn2传递过去的参数') }, 1000) } functionfn3(data) { setTimeout(()=>{ console.log('fn3执行', data) }, 1000) } fn1()

执行结果如下：

我们发现这种方式虽然能实现，但是代码量一旦变多，可读性就降低了。

Promise的方式

functionfn1() { returnnewPromise((resolve, reject) =>{ console.log('fn1执行') setTimeout(()=>{ console.log('fn1结束') resolve('fn1传递过去的参数') }, 1000) }) } functionfn2(data) { returnnewPromise((resolve, reject) =>{ console.log('fn2执行，接收的参数', data) setTimeout(()=>{ resolve('fn2传递过去的参数') }, 1000) }) } functionfn3(data) { returnnewPromise((resolve, reject) =>{ console.log('fn3执行，接收的参数', data) setTimeout(()=>{ resolve('fn3传递过去的参数') }, 1000) }) } fn1().then(fn2).then(fn3).then(res=>{ console.log('最后一个', res) })

生成器的方式

生成器就是能返回一个迭代器的函数，它也是一个函数，对比普通的函数，多了一个*，在它的函数体内可以使用yield关键字,函数会在每个yield后暂停，等待，直到这个生成的对象，调用下一个next(),每调用一次next会往下执行一次yieId，然后暂停。

function* main() { constres1 = yieldfn1('开始') constres2 = yieldfn2(res1) constres3 = yieldfn3(res2) console.log(res3, '全部执行完毕') } consttask = main() task.next() functionfn1(data) { setTimeout(()=>{ console.log('fn1执行', data) task.next('fn1执行完毕') }, 1000) } functionfn2(data) { setTimeout(()=>{ console.log('fn2执行', data) task.next('fn2执行完毕') }, 1000) } functionfn3(data) { setTimeout(()=>{ console.log('fn3执行', data) task.next('fn3执行完毕') }, 1000) } console.log('我是最开始同步执行的')