一次性搞懂 Promise、async await 与 Generator

学习 ES6、ES7 的时候，经常听到 Promise、async await 与 Generator 用来处理异步函数，但又不清楚它们的具体用法。所以，今天专门对这三者进行一下系统的概述。

三者的关系

async/await 是 Generator 函数的语法糖，并对 Generator 函数进行了改进。它是基于 Generator 和 promise 实现的。

promise

功能：返回一个异步结果

function myPromise(isReject,val){
    return new Promise((resolve,reject) => {
        isReject ? reject('err') : 
        // 写法一：运用setTimeout的第三个参数
        setTimeout(resolve,2000,val)
        // 写法二：常规写法
        setTimeout(()=>{
            resolve(val)
        },5000)
    })
}

该函数可以模拟成功、失败这两种结果。

Async/await

var myasync =  async function() {
    // 这个value1就是myPromise函数里面resolve的值，不用.then来取，await做了内部处理
    var value1 = await myPromise(false,2)
    return value1
}
// async返回的是一个promise，相当于value1被Promise.resolve()封装成Promise对象返回,所以在外面反而需要.then来获取
console.log(myasync().then(res => console.log(res)))

generator

function * myGenerator() {
    yield myPromise(false,1)
}
console.log(myGenerator().next())  // {value: Promise, done: false}
console.log(myGenerator().next().value.then((res) => console.log(res)))

generator和普通函数的区别：

function* sum(x) {
    var y = yield x +2;
    return y;
  }
  
  var val = sum(1);
  console.log( val.next()) // { value: 3, done: false }
  console.log( val.next()) // { value: undefined, done: true }

// 真实的异步执行例子
function* sum(){
  var result = yield myPromise(false,3);
  console.log(result);
}
sum.next().value.then(res => console.log(res))

• 普通函数没有 * 标志，这是generator函数的标志
• 普通函数调用会返回结果，generator函数调用不会返回结果，返回的是指针对象val，这个对象有两个值value,done,values就是yield语句后面的表达式的值，done只有遇到return才会变成true

Async/await和generator的区别：

var sum = async function (){
  var value2 = await myPromise(false,4);
  return value2;
};

• async只是generator的一个语法糖，他相当于*，await相当于yield
• async 和 await，比起星号和 yield，语义更清楚了
• yield 命令后面只能是 Thunk 函数或 Promise 对象，而 async 函数的 await 命令后面，可以跟 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时等同于同步操作）