摘要：以往的異步方法無(wú)外乎回調(diào)函數(shù)和。出錯(cuò)了出錯(cuò)了總結(jié)接口遍歷器對(duì)象除了具有方法，還可以具有方法和方法。函數(shù)調(diào)用函數(shù)，返回一個(gè)遍歷器對(duì)象，代表函數(shù)的內(nèi)部指針。

引言

接觸過(guò)Ajax請(qǐng)求的會(huì)遇到過(guò)異步調(diào)用的問(wèn)題，為了保證調(diào)用順序的正確性，一般我們會(huì)在回調(diào)函數(shù)中調(diào)用，也有用到一些新的解決方案如Promise相關(guān)的技術(shù)。

在異步編程中，還有一種常用的解決方案，它就是Generator生成器函數(shù)。顧名思義，它是一個(gè)生成器，它也是一個(gè)狀態(tài)機(jī)，內(nèi)部擁有值及相關(guān)的狀態(tài)，生成器返回一個(gè)迭代器Iterator對(duì)象，我們可以通過(guò)這個(gè)迭代器，手動(dòng)地遍歷相關(guān)的值、狀態(tài)，保證正確的執(zhí)行順序。

Iterator接口
什么是Iterator接口

遍歷器（Iterator）就是這樣一種機(jī)制。它是一種接口，為各種不同的數(shù)據(jù)結(jié)構(gòu)提供統(tǒng)一的訪問(wèn)機(jī)制。任何數(shù)據(jù)結(jié)構(gòu)只要部署Iterator接口，就可以完成遍歷操作（即依次處理該數(shù)據(jù)結(jié)構(gòu)的所有成員）。

Iterator的作用

為各種數(shù)據(jù)結(jié)構(gòu)，提供一個(gè)統(tǒng)一的、簡(jiǎn)便的訪問(wèn)接口

使得數(shù)據(jù)結(jié)構(gòu)的成員能夠按某種次序排列

ES6 創(chuàng)造了一種新的遍歷命令for...of循環(huán)，Iterator接口主要供for...of消費(fèi)。

Iterator實(shí)現(xiàn)

function makeIterator(array) {
  var nextIndex = 0;
  return {
    next: function() {
      return nextIndex < array.length ?
        {value: array[nextIndex++], done: false} :
        {value: undefined, done: true};
    }
  };
}

var it = makeIterator(["a", "b"]);

it.next() // { value: "a", done: false }
it.next() // { value: "b", done: false }
it.next() // { value: undefined, done: true }

原生具備Iterator接口的數(shù)據(jù)結(jié)構(gòu)

Array

Map

Set

String

TypedArray

函數(shù)的 arguments 對(duì)象

NodeList 對(duì)象

查看一下Map下面的所掛載的Iterator。

let map = new Map();
console.log(map.__proto__);

輸出結(jié)果：

clear:? clear()
constructor:? Map()
delete:? delete()
entries:? entries()
forEach:? forEach()
get:? ()
has:? has()
keys:? keys()
set:? ()
size:(...)
values:? values()
Symbol(Symbol.iterator):? entries()
Symbol(Symbol.toStringTag):"Map"
get size:? size()
__proto__:Object

如何為Object部署一個(gè)Iterator接口

function iteratorObject(obj){
    let keys = Object.keys(obj);
    let index = -1;
    return {
        next(){
            index++;
            return index
通過(guò)上面的方法可以簡(jiǎn)單的為Object部署了一個(gè)Iterator接口。
Generator函數(shù)
Generator是ES6的新特性，通過(guò)yield關(guān)鍵字，可以讓函數(shù)的執(zhí)行流掛起,那么便為改變執(zhí)行流程提供了可能。
Generator語(yǔ)法
dome：
function * greneratorDome(){
    yield "Hello";
    yield "World";
    return "ending";
}
let grenDome = greneratorDome();
console.log(grenDome)
上面的代碼中定義了一個(gè)Generator函數(shù)，獲取到了函數(shù)返回的對(duì)象。下面是其輸出結(jié)果。
原型鏈：
greneratorDome {}
__proto__:Generator
    __proto__:Generator
    constructor:GeneratorFunction {prototype: Generator, constructor: ?, Symbol(Symbol.toStringTag): "GeneratorFunction"}
    next:? next()
    return:? return()
    throw:? throw()
    Symbol(Symbol.toStringTag):"Generator"
    __proto__:Object
[[GeneratorStatus]]:"suspended"
[[GeneratorFunction]]:?* greneratorDome()
[[GeneratorReceiver]]:Window
[[GeneratorLocation]]:test.html:43
[[Scopes]]:Scopes[3]
通過(guò)上面的輸出結(jié)果可以看的出來(lái)，沿著原型鏈向上查找就存在一個(gè)next方法，這個(gè)方法與Iterator接口返回的結(jié)果是大同小異的。
繼續(xù)延續(xù)dome代碼，并使用next方法向下執(zhí)行。
function * greneratorDome(){
    yield "Hello";
    yield "World";
    return "Ending";
}
let grenDome = greneratorDome();
console.log(grenDome.next());
// {value: "Hello", done: false}
console.log(grenDome.next());
// {value: "World", done: false}
console.log(grenDome.next());
// {value: "Ending", done: true}
console.log(grenDome.next());
// {value: undefined, done: true}
在最開始的地方有提到過(guò)Generator函數(shù),最后返回的是一個(gè)Iterator對(duì)象,這也就不難理解了。
異步的Generator
dome
function a (){
    setTimeout(() => {
        alert("我是后彈出");
    },1000)
}
function b (){
    alsert("我是先彈出");
}
function * grenDome (){
    yield a();
    yield b();
}
let gren = grenDome();
gren.next();
gren.next();
// 輸出結(jié)果
// 我是先彈出
// 我是后彈出
結(jié)合Promise
function a (){
    return new Promise((resolve,reject) => {
        setTimeOut(() => {
            console.log(1)
            resolve("a");
        })
    })
}
function b (){
    return new Promise((resolve,reject) => {
         console.log(2)
        resolve("b");
    })
}
function * grenDome (){
    yield a();
    yield b();
    return new Promise((resolve,reject) => {
        resolve("grenDome內(nèi)部")
    })
}
let gren = grenDome();

// console.log(gren.next())
// {value: Promise, done: false}
// console.log(gren.next())
// {value: Promise, done: false}
// console.log(gren.next())
// {value: Promise, done: true}
// console.log(gren.next())
// {value: undefined, done: true}

gren.next().value.then((res) => {
    console.log(res);
    // a函數(shù)
})
gren.next().value.then((res) => {
    console.log(res);
    // b函數(shù)
})
gren.next().value.then((res) => {
    console.log(res);
    // grenDome內(nèi)部
})
// 輸出結(jié)果
// a
// b
// grenDome內(nèi)部
在上面的代碼中有一點(diǎn)是需要注意的，在grenDome函數(shù)里面最后return出去了一個(gè)Promise，但是在輸出的時(shí)候雖然done屬性已經(jīng)為true但是value里面仍然會(huì)存有一個(gè)promise對(duì)象，實(shí)際上done表示的是對(duì)應(yīng)yield關(guān)鍵字的函數(shù)已經(jīng)遍歷完成了。
Async/Await
Async/await 是Javascript編寫異步程序的新方法。以往的異步方法無(wú)外乎回調(diào)函數(shù)和Promise。但是Async/await建立于Promise之上,換句話來(lái)說(shuō)使用了Generator函數(shù)做了語(yǔ)法糖。
async函數(shù)就是隧道盡頭的亮光，很多人認(rèn)為它是異步操作的終極解決方案。
什么是Async/Await
async顧名思義是“異步”的意思，async用于聲明一個(gè)函數(shù)是異步的。而await從字面意思上是“等待”的意思，就是用于等待異步完成。并且await只能在async函數(shù)中使用。
Async/Await語(yǔ)法
function timeout(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
};
async function asyncPrint(value, ms) {
  await timeout(ms);
  console.log(value);
};
asyncPrint("hello world",2000);
// 在2000ms之后輸出`hello world`
返回Promse對(duì)象
通常async、await都是跟隨Promise一起使用的。為什么這么說(shuō)呢？因?yàn)?b>async返回的都是一個(gè)Promise對(duì)象同時(shí)async適用于任何類型的函數(shù)上。這樣await得到的就是一個(gè)Promise對(duì)象，如果不是Promise對(duì)象的話那async返回的是什么就是什么。
async function f() {
  return "hello world";
}
f().then(v => console.log(v));
// hello world
async函數(shù)返回一個(gè)Promise對(duì)象，可以使用then方法添加回調(diào)函數(shù)。當(dāng)函數(shù)執(zhí)行的時(shí)候，一旦遇到await就會(huì)先返回，等到異步操作完成，再接著執(zhí)行函數(shù)體內(nèi)后面的語(yǔ)句。
function a(){
    return new Promise((resolve,reject) => {
        console.log("a函數(shù)")
        resolve("a函數(shù)")
    })
}
function b (){
    return new Promise((resolve,reject) => {
        console.log("b函數(shù)")
        resolve("b函數(shù)")
    })
}
async function dome (){
    let A = await a();
    let B = await b();
    return Promise.resolve([A,B]);
}
dome().then((res) => {
    console.log(res);
});
執(zhí)行機(jī)制
前面已經(jīng)說(shuō)過(guò)await是等待的意思，之后等前面的代碼執(zhí)行完成之后才會(huì)繼續(xù)向下執(zhí)行。
function a(){
    return new Promise((resolve,reject) => {
        resolve("a");
        console.log("a:不行")
    })
}
function b (){
    return new Promise((resolve,reject) => {
        resolve("b");
        console.log("b:不行");
    })
}
async function dome (){
    await a();
    await b();
    console.log("雖然我在后面，但是我想要先執(zhí)行可以么？")
}
dome();
// 輸出結(jié)果
// a:不行
// b:不行
// 雖然我在后面，但是我想要先執(zhí)行可以么？
另外一個(gè)列子
function timeout1(ms) {
  return new Promise((resolve) => {
    setTimeout(() => {
        console.log("timeout1")
        resolve();
    },ms);
  });
};
function timeout2(ms) {
  return new Promise((resolve) => {
    setTimeout(() => {
        console.log("timeout2");
        resolve();
    },ms);
  });
};
async function asyncPrint() {
  await timeout1(1000);
  await timeout2(2000);
};
asyncPrint().then((res) => {
    console.log(res);
}).catch((err) => {
    console.log(err)
})
// 1s 后輸出timeout1
// 3s 后輸出timeout2
// undefined
async、await錯(cuò)誤處理
JavaScript異步請(qǐng)求肯定會(huì)有請(qǐng)求失敗的情況，上面也說(shuō)到了async返回的是一個(gè)Promise對(duì)象。既然是返回一個(gè)Promise對(duì)象的話那處理當(dāng)異步請(qǐng)求發(fā)生錯(cuò)誤的時(shí)候我們就要處理reject的狀態(tài)了。
在Promise中當(dāng)請(qǐng)求reject的時(shí)候我們可以使用catch。為了保持代碼的健壯性使用async、await的時(shí)候我們使用try catch來(lái)處理錯(cuò)誤。
async function f() {
  await Promise.reject("出錯(cuò)了");
  await Promise.resolve("hello world");
}

async function b() {
    try {
      await f();
    } catch(err) {
     console.log(err);
    }
}
b();
//  出錯(cuò)了
總結(jié)
Iterator接口

遍歷器對(duì)象除了具有next方法，還可以具有return方法和throw方法。如果你自己寫遍歷器對(duì)象生成函數(shù)，那么next方法是必須部署的，return方法和throw方法是否部署是可選的。
Es6提供很多API都是基于Iterator接口，比如解構(gòu)，for...of循環(huán)，拓展運(yùn)算等。
Generator函數(shù)
調(diào)用Generator函數(shù)，返回一個(gè)遍歷器對(duì)象，代表Generator函數(shù)的內(nèi)部指針。以后每次調(diào)用遍歷器對(duì)象的next方法，就會(huì)返回一個(gè)有著value和done兩個(gè)屬性的對(duì)象。 
value屬性表示當(dāng)前的內(nèi)部狀態(tài)的值，是yield語(yǔ)句后面那個(gè)表達(dá)式的值；done屬性是一個(gè)布爾值，表示是否遍歷結(jié)束
Async/Await
Async/await是近些年來(lái)JavaScript最具革命性的新特性之一。他讓讀者意識(shí)到使用Promise存在的一些問(wèn)題，并提供了自身來(lái)代替Promise的方案。他使得異步代碼變的不再明顯，我們好不容易已經(jīng)學(xué)會(huì)并習(xí)慣了使用回調(diào)函數(shù)或者then來(lái)處理異步。