Promise和async/await（二）

Promise和async/await（一）

先从迭代器说起

通俗的说：迭代器就是在不暴露对象内部表示的情况下，可以遍历内部对象。
Iterator的作用有三种：
1.为各种数据结构，提供一个统一的、简便的访问接口
2.使得数据结构的成员能够按某种次序排列
3.ES6 创造了一种新的遍历命令for...of循环，Iterator 接口主要供for...of消费

模拟一个简简单单的 Iterator

// 遍历器生成函数，作用就是将 传进去的数组arr 转换成一个遍历器对象(即指针对象) it
function makeIterator(arr) {  
    let index = 0;
    return {
        next: function() {
            return arr.length > index ? 
                      {value: arr[index++], done: false} : 
                      {value: unefined, done: true}
        }
    }
}

var it = makeIterator(['a', 'b', 'c'])
it.next();    // 遍历器对象的 next 方法用来移动指针，返回一个遍历对象，标识当前数据成员的信息
it.next();
it.next();

从上面的 例子可以看出迭代器模式的特点，没有暴露内部对象，通过 next 方法可以访问内部对象。

一个对象如果要具备可被for...of循环调用的 Iterator 接口，就必须在Symbol.iterator的属性上部署遍历器生成方法（原型链上的对象具有该方法也可）
原生部署 Symbol.iterator 的数据结构如下：
· Array
· Map
· Set
· String
· TypedArray
· 函数的 arguments 对象
· NodeList 对象

调用 Iterator 的场合
有一些场合会默认调用 Iterator 接口（即Symbol.iterator方法）
· 解构赋值。对数组和 Set 结构进行解构赋值时，会默认调用Symbol.iterator方法。
· 扩展运算符。扩展运算符（...）也会调用默认的 Iterator 接口。
· yield。yield后面跟的是一个可遍历的结构，它会调用该结构的遍历器接口。
· 其他场合。由于数组的遍历会调用遍历器接口，所以任何接受数组作为参数的场合，其实都调用了遍历器接口。下面是一些例子。
-for...of
-Array.from()
-Map(), Set(), WeakMap(), WeakSet()（比如new Map([['a',1],['b',2]])）
-Promise.all()
-Promise.race()

Genorator 和 迭代器有啥关系，又和async/await 有啥关系

Generator函数返回一个 迭代器

Genorator 函数是 ES6 提供的一种异步编程解决方案。语法行为与传统函数完全不同。
Generator 函数有多种理解角度。语法上，首先可以把它理解成，Generator 函数是一个状态机，封装了多个内部状态。
执行 Generator 函数会返回一个遍历器对象，也就是说，Generator 函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。

async函数是 Generator 函数的语法糖

写一个简简单单的 Generator 函数

function * helloGenerator() {
    console.log(111);
    yield 'hello';
    console.log(222);
    yield 'world';
    console.log(333)
    return 'end'
}
let g = helloGenerator()

image.png

上面代码定义了一个 Generator 函数helloGenerator，它内部有两个yield表达式（hello和world），即该函数有三个状态：hello，world 和 return 语句（结束执行）。
我们通过 Generator 函数返回一个迭代器，通过 next 方法可以阻塞式的执行代码。
迭代器调用next 方法后会一直执行代码直到遇见 yield就停止了，等待下一次的next调用。这种虽然想挤牙膏一样，但是感觉代码的执行权在我们手上。
我们有Generator函数处理有个异步的

function * gen() {
  var a = yield ajax('/api/test1');
  console.log('111', a);
  var b = yield ajax('/api/test2');
  console.log('222', b);
  var c = yield ajax('/api/test3');
  console.log('111', c);
}
var g = gen();
g.next().value.then(res => {
  g.next().value.then(res => {
    g.next().value.then()
  })
})

将上面代码采用自执行next()改造后

function run(fn){
    var a = fn()
    function nextStep(data){
        var v = a.next(data)
        if(v.done) return;
        v.value.then(resp=>{
            nextStep(resp)
        })
    }
    nextStep()
}
run(gen)

这个run函数有大神已经封装好，Thunk， co 函数等（这里不做介绍了，嘎嘎嘎）
async 函数的实现，其实就是将 Generator 函数和自动执行器（run），包装在一个函数里

image.png

上图我们就很清晰的看出 Generator 和 async/await 个关系啦！
async 返回的是一个 Promise对象

看一道题

Promise.resolve().then(() => {
    console.log(0);
    return Promise.resolve(4);
}).then((res) => {
    console.log(res)
})

Promise.resolve().then(() => {
    console.log(1);
}).then(() => {
    console.log(2);
}).then(() => {
    console.log(3);
}).then(() => {
    console.log(5);
}).then(() =>{
    console.log(6);
})
// 0 1 2 3 4 5 6

为什么4 会在3 的后面呢？？
第三行代码等价于

return new Promise(resolve => resolve(4)).then(res => res)

介于
第二篇写完了，好用的东西往往内部实现很优秀，现在了解皮皮毛，后期还需再探索~~~，前端er 奥利给~~