json yeid_异步无处不在：Generator 异步方案（五）

关于异步的知识点，终于要结束了！

本篇就来重点说说如何将 Generator 写进异步中。

Generator 异步方案

将调用 ajax 的代码写到生成器函数的 yield 后面，每次的异步执行，都要在 yield 中暂停，调用的返回结果是一个 Promise 对象。

我们可以从迭代器对象的 value 属性获取到 Promise 对象，然后使用 .then 进行链式调用处理异步结果。

结果处理的代码叫做执行器，就是具体负责运行逻辑的代码。function ajax(url) {

……

}

// 声明一个生成器函数

function * fun(){

yield myAjax('./d1.json')

yield myAjax('./d2.json')

yield myAjax('./d3.json')

}

// 返回 遍历器对象

var f = fun();

// 生成器函数的执行器

// 调用 next 方法，执行异步代码

var g = f.next();

g.value.then(data=>{

console.log(data);

// console.log(f.next());

g = f.next();

g.value.then(data=>{

console.log(data)

// g.......

})

})复制代码

而执行器的逻辑中，是相同嵌套的，因此可以写成递归的方式对执行器进行改造：// 声明一个生成器函数

function * fun(){

yield myAjax('./d1.json')

yield myAjax('./d2.json')

yield myAjax('./d3.json')

}

// 返回 遍历器对象

var f = fun();

// 递归方式 封装

// 生成器函数的执行器

function handle(res){

if(res.done) return;

res.value.then(data=>{

console.log(data)

handle(f.next())

})

}

handle(f.next());复制代码

然后，再将执行的逻辑，进行封装复用，形成独立的函数模块。function co(fun) {

// 返回 遍历器对象

var f = fun();

// 递归方式 封装

// 生成器函数的执行器

function handle(res) {

if (res.done) return;

res.value.then(data => {

console.log(data)

handle(f.next())

})

}

handle(f.next());

}

co(fun);复制代码

封装完成后，我们再使用时只需要关注 Generator 中的 yield 部分就行了。function co(fun) {

……

}

function * fun(){

yield myAjax('./d1.json')

yield myAjax('./d2.json')

yield myAjax('./d3.json')

}复制代码

此时你会发现，使用 Generator 封装后，异步的调用就变得非常简单了。

但是，这个封装还是有点麻烦，有大神帮我们做了这个封装，相当强大：github.com/tj/co ，感兴趣可以研究一下。

而随着 JS 语言的发展，更多的人希望类似 co 模块的封装能够写进语言标准中，而我们直接使用这个语法规则就行了。

其实你也可以对比一下，使用 co 模块后的 Generator 和 async 这两段代码：//  async / await

async function callAjax(){

var a = await myAjax('./d1.json')

console.log(a);

var b = await myAjax('./d2.json');

console.log(b)

var c = await myAjax('./d3.json');

console.log(c)

}

// 使用 co 模块后的 Generator

function * fun(){

yield myAjax('./d1.json')

yield myAjax('./d2.json')

yield myAjax('./d3.json')

}复制代码

你应该也发现了，async 函数就是 Generator 语法糖，不需要自己再去实现 co 执行器函数或者安装 co 模块。

写法上将 * 星号去掉换成放在函数前面的 async，把函数体的 yield 去掉，换成 await。

简直完美！async function callAjax(){

var a = await myAjax('./d1.json')

console.log(a);

var b = await myAjax('./d2.json');

console.log(b)

var c = await myAjax('./d3.json');

console.log(c)

}

callAjax();复制代码

我们再来看一下 Generator。

相信下面的代码，你能很轻松地阅读。function * f1(){

console.log(11)

yield 2;

console.log('333')

yield 4;

console.log('555')

}

var g = f1();

g.next();

console.log(666);

g.next();

console.log(777);复制代码

代码运行结果：

带着 Generator 的思路，我们再回头看看那个 async 的面试题。

请写出以下代码的运行结果：setTimeout(function () {

console.log('setTimeout')

}, 0)

async function async1() {

console.log('async1 start')

await async2();

console.log('async1 end')

}

async function async2() {

console.log('async2')

}

console.log('script start')

async1();

console.log('script end')复制代码

运行结果：

是不是恍然大明白呢(●'◡'●)。