Promise === async、await === es6中的generator函数详解

Promise

当面试官问你：

1.什么是promise？
2.你对promise的理解？
3.promise用过吗？
4.什么是promise

1.解决地狱回调
2.可以链式调用
3.有三种状态。
4.promise有哪些API.
5.应用场景：封装ajax,axios的get,post封装，微信小程序中封装wx.request()，uniapp开发中uni.request()

.名词约定

一般来讲，有以下的名词约定：

• promise（首字母小写）对象指的是“Promise实例对象”

• Promise首字母大写且单数形式，表示“Promise构造函数”

• Promises首字母大写且复数形式，用于指代“Promises规范”

什么是Promise？

• Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。
• 从语法上说，promise 是一个对象，从它可以获取异步操作的的最终状态（成功或失败）。
• Promise是一个构造函数，对外提供统一的 API，自己身上有all、reject、resolve等方法，原型上有then、catch等方法。

Promise的两个特点

1.Promise对象的状态不受外界影响

1）pending 初始状态

2）fulfilled 成功状态

3）rejected 失败状态

Promise 有以上三种状态，只有异步操作的结果可以决定当前是哪一种状态，其他任何操作都无法改变这个状态

2.Promise的状态一旦改变，就不会再变，任何时候都可以得到这个结果，状态不可以逆，只能由 pending变成fulfilled或者由pending变成rejected

扫描二维码关注公众号，回复： 12835887 查看本文章

使用 new 来创建一个promise对象。

Promise接受一个「函数」作为参数，该函数的两个参数分别是resolve和reject。这两个函数就是就是「回调函数」

resolve函数的作用：在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；

reject函数的作用：在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

const promise = new Promise((resolve, reject) => {
    
    
    // do something here ...
    if (success) {
    
    
        resolve(value); // fulfilled
    } else {
    
    
        reject(error); // rejected
    }
});

Promise的API

then()方法

then 方法就是把原来的回调写法分离出来，在异步操作执行完后，用链式调用的方式执行回调函数。

而 Promise 的优势就在于这个链式调用。我们可以在 then 方法中继续写 Promise 对象并返回，然后继续调用 then 来进行回调操作。

可有两个参数，第一个是成功 resolve 调用的方法，第二个是失败 reject 调用的方法
下面做一个买笔写作业上交的演示，它们是层层依赖的关系，下一步的的操作需要使用上一部操作的结果。（这里使用 setTimeout 模拟异步操作），正式开发可以用 ajax 异步

        //买笔
        function buy(){
    
    
            console.log("开始买笔");
            var p = new Promise(function(resolve,reject){
    
    
                setTimeout(function(){
    
    
                    console.log("买了笔芯");
                    resolve("数学作业");
                },1000);
            });
            return p;
        }
        //写作业
        function work(data){
    
    
            console.log("开始写作业："+data);
            var p = new Promise(function(resolve,reject){
    
    
                setTimeout(function(){
    
    
                    console.log("写完作业");
                    resolve("作业本");
                },1000);
            });
            return p;
        }

        function out(data){
    
    
            console.log("开始上交："+data);
            var p = new Promise(function(resolve,reject){
    
    
                setTimeout(function(){
    
    
                    console.log("上交完毕");
                    resolve("得分：A");
                },1000);
            });
            return p;
        }
        /* 不建议使用这种方式
        buy().then(function(data){
            return work(data);
        }).then(function(data){
            return out(data);
        }).then(function(data){
            console.log(data);
        });*/

        //推荐这种简化的写法
        buy().then(work).then(out).then(function(data){
    
    
            console.log(data);
        });

正式开发用ajax异步：

var promise = new Promise(function(resolve,reject){
    
    
            $.ajax({
    
    
                url:'/api/poisearch.json',
                method:'get',
                datatype:'json',
                success:(res) =>{
    
    
                    resolve(res)
                },
                error:(err)=>{
    
    
                    reject(err)
                }
            });
        });

        promise.then(function(res){
    
    
            return res.data
        }).then(function(data){
    
    
            return data.result;
        }).then(function(result){
    
    
            console.log(result)
        });

        //推荐使用箭头函数简写成,极大提升了代码的简洁性和可读性
        promise.then(res => res.data).then(data => data.result).then(result => console.log(result));

Promise构造函数的超能力

Promises写法的本质就是把异步写法写成同步写法。传入Promise构造函数的函数参数会第一优先执行，无论这个函数多么的繁复，有多少层回调，有多少秒的计数器，统统都会最优先执行。
也就是说，我们只要new了一个Promise()，那么Promise构造函数的函数参数其实是同步代码，但是.then比较特殊，.then会等到promise对象实例有了结果（resolved或者rejected），.then()里面代码才会执行。链条上的每一个.then都会等前面的promise有了结果才会执行，Promise构造函数的这个超能力是Promises系统的威力之源。

reject()方法：

上面样例我们通过 resolve 方法把 Promise 的状态置为完成态（Resolved），这时 then 方法就能捕捉到变化，并执行“成功”情况的回调。
而 reject 方法就是把 Promise 的状态置为已失败（Rejected），这时 then 方法执行“失败”情况的回调（then 方法的第二参数）

function rebuy(){
    
    
            console.log("开始买笔");
            var p = new Promise(function(resolve,reject){
    
    
                setTimeout(function(){
    
    
                    console.log("买笔失败");
                    reject("没带够钱");
                },1000);
            });
            return p;
        }

        function rework(data){
    
    
            console.log("开始写作业："+data);
            var p = new Promise(function(resolve,reject){
    
    
                setTimeout(function(){
    
    
                    console.log("写完作业");
                    resolve("作业本");
                },1000);
            });
            return p;
        }

        rebuy().then(rework,function(data){
    
    
            console.log(data);
        });

catch()方法：

1.它可以和 then 的第二个参数一样，用来指定 reject 的回调

function rebuy(){
    
    
            console.log("开始买笔");
            var p = new Promise(function(resolve,reject){
    
    
                setTimeout(function(){
    
    
                    console.log("买笔失败");
                    reject("没带够钱");
                },1000);
            });
            return p;
        }

        function rework(data){
    
    
            console.log("开始写作业："+data);
            var p = new Promise(function(resolve,reject){
    
    
                setTimeout(function(){
    
    
                    console.log("写完作业");
                    resolve("作业本");
                },1000);
            });
            return p;
        }

        rebuy().then(rework).catch(function(data){
    
    
            console.log(data);
        });

2.它的另一个作用是，当执行 resolve 的回调（也就是上面 then 中的第一个参数）时，如果抛出异常了（代码出错了），那么也不会报错卡死 js，而是会进到这个 catch 方法中

function buy(){
    
    
            console.log("开始买笔");
            var p = new Promise(function(resolve,reject){
    
    
                setTimeout(function(){
    
    
                    console.log("买了笔芯");
                    resolve("数学作业");
                },1000);
            });
            return p;
        }

        function work(data){
    
    
            console.log("开始写作业："+data);
            var p = new Promise(function(resolve,reject){
    
    
                setTimeout(function(){
    
    
                    console.log("写完作业");
                    resolve("作业本");
                },1000);
            });
            return p;
        }

        buy().then(function(data){
    
    
            throw new Error("买了坏的笔芯");
            work(data);
        }).catch(function(data){
    
    
            console.log(data);
        });

all()方法：

Promise 的 all 方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调。

比如下面代码，两个个异步操作是并行执行的，等到它们都执行完后才会进到 then 里面。同时 all 会把所有异步操作的结果放进一个数组中传给 then。

        //买作业本
        function cutUp(){
    
    
            console.log('挑作业本');
            var p = new Promise(function(resolve, reject){
    
     //做一些异步操作
                setTimeout(function(){
    
    
                    console.log('挑好购买作业本');
                    resolve('新的作业本');
                }, 1000);
            });
            return p;
        }

        //买笔
        function boil(){
    
    
            console.log('挑笔芯');
            var p = new Promise(function(resolve, reject){
    
     //做一些异步操作
                setTimeout(function(){
    
    
                    console.log('挑好购买笔芯');
                    resolve('新的笔芯');
                }, 1000);
            });
            return p;
        }

        Promise.all([cutUp(),boil()]).then(function(results){
    
    
            console.log("写作业的工具都买好了");
            console.log(results);
        });

race()方法：

race 按字面解释，就是赛跑的意思。race 的用法与 all 一样，只不过 all 是等所有异步操作都执行完毕后才执行 then 回调。而 race 的话只要有一个异步操作执行完毕，就立刻执行 then 回调。

注意：其它没有执行完毕的异步操作仍然会继续执行，而不是停止。

这里我们将上面样例的 all 改成 race

 Promise.race([cutUp(), boil()]).then(function(results){
    
    
    console.log("哈哈，我先买好啦");
     console.log(results);
 });

race 使用场景很多。比如我们可以用 race 给某个异步请求设置超时时间，并且在超时后执行相应的操作。

请求某个图片资源

function requestImg(){
    
    
            var p = new Promise(function(resolve, reject){
    
    
            var img = new Image();
            img.onload = function(){
    
    
               resolve(img);
            }
            img.src = 'xxxxxx';
            });
            return p;
        }

        //延时函数，用于给请求计时
        function timeout(){
    
    
            var p = new Promise(function(resolve, reject){
    
    
                setTimeout(function(){
    
    
                    reject('图片请求超时');
                }, 5000);
            });
            return p;
        }

        Promise.race([requestImg(), timeout()]).then(function(results){
    
    
            console.log(results);
        }).catch(function(reason){
    
    
            console.log(reason);
        });
        /*上面代码 requestImg 函数异步请求一张图片，timeout 函数是一个延时 5 秒的异步操作。
        我们将它们一起放在 race 中赛跑。*/
        //如果 5 秒内图片请求成功那么便进入 then 方法，执行正常的流程。
        //如果 5 秒钟图片还未成功返回，那么则进入 catch，报“图片请求超时”的信息。

在工作中的应用

1.传统回调模式

/***
   第一步：找到北京的id
   第二步：根据北京的id -> 找到北京公司的id
   第三步：根据北京公司的id -> 找到北京公司的详情
   目的：模拟链式调用、回调地狱
 ***/
 
 // 回调地狱
 // 请求第一个API: 地址在北京的公司的id
 $.ajax({
    
    
   url: 'https://www.easy-mock.com/mock/5a52256ad408383e0e3868d7/lagou/city',
   success (resCity) {
    
    
     let findCityId = resCity.filter(item => {
    
    
       if (item.id == 'c1') {
    
    
         return item
       }
     })[0].id
     
     $.ajax({
    
    
     //请求第二个API: 根据上一个返回的在北京公司的id “findCityId”，找到北京公司的第一家公司的id
       url: 'https://www.easy-mock.com/mock/5a52256ad408383e0e3868d7/lagou/position-list',
       success (resPosition) {
    
    
         let findPostionId = resPosition.filter(item => {
    
    
           if(item.cityId == findCityId) {
    
    
             return item
           }
         })[0].id
         // 请求第三个API: 根据上一个API的id(findPostionId)找到具体公司，然后返回公司详情
         $.ajax({
    
    
           url: 'https://www.easy-mock.com/mock/5a52256ad408383e0e3868d7/lagou/company',
           success (resCom) {
    
    
             let comInfo = resCom.filter(item => {
    
    
               if (findPostionId == item.id) {
    
    
                 return item
               }
             })[0]
             console.log(comInfo)
           }
         })
       }
     })
   }
 })

promise模式

// Promise 写法
  // 第一步：获取城市列表
  const cityList = new Promise((resolve, reject) => {
    
    
    $.ajax({
    
    
      url: 'https://www.easy-mock.com/mock/5a52256ad408383e0e3868d7/lagou/city',
      success (res) {
    
    
        resolve(res)
      }
    })
  })

  // 第二步：找到城市是北京的id
    cityList.then(res => {
    
    
      let findCityId = res.filter(item => {
    
    
        if (item.id == 'c1') {
    
    
          return item
        }
      })[0].id
      
      findCompanyId().then(res => {
    
    
        // 第三步（2）：根据北京的id -> 找到北京公司的id
        let findPostionId = res.filter(item => {
    
    
            if(item.cityId == findCityId) {
    
    
              return item
            }
        })[0].id

        // 第四步（2）：传入公司的id
        companyInfo(findPostionId)

      })

    })

  // 第三步（1）：根据北京的id -> 找到北京公司的id
  function findCompanyId () {
    
    
    let aaa = new Promise((resolve, reject) => {
    
    
      $.ajax({
    
    
       url: 'https://www.easy-mock.com/mock/5a52256ad408383e0e3868d7/lagou/position-list',
        success (res) {
    
    
          resolve(res)
        }
      })
    })
    return aaa
  }

// 第四步：根据上一个API的id(findPostionId)找到具体公司，然后返回公司详情
function companyInfo (id) {
    
    
  let companyList = new Promise((resolve, reject) => {
    
    
    $.ajax({
    
    
      url: 'https://www.easy-mock.com/mock/5a52256ad408383e0e3868d7/lagou/company',
      success (res) {
    
    
        let comInfo = res.filter(item => {
    
    
            if (id == item.id) {
    
    
               return item
            }
        })[0]
        console.log(comInfo)
      }
    })
  })
}

async、await

词法定义

• async

async 是“异步”的简写， async 用于申明一个异步的 function

• await

await 可以认为是 async wait 的简写，await 用于等待一个异步方法执行完成。

借检https://www.cnblogs.com/airen123/p/9543490.html

特点：

1.asayc的用法，它作为一个关键字放到函数前面，这样普通函数就变为了异步函数
2.异步async函数调用，跟普通函数的使用方式一样
3.异步async函数返回一个promise对象
4.async函数配合await关键字使用(阻塞代码往下执行)
5.是异步方法，但是阻塞式的

案例

模拟出一个摇色子的异步操作，先通过一个方法三秒之后拿到一个筛子数，第二步进行输出

//基本用法的async函数
let asyncFun = async function(){
    
    
    return 1
}
console.log(asyncFun())
//会返回一个promise对象


//使用场景
//摇色子方法
function dice(){
    
    
    return new Promise((resolve,reject)=>{
    
    
        let sino = parseInt(Math.random()*6+1)  //生成一个1~6之间的随机小数
        setTimeout(()=>{
    
    
            resolve(sino)
        },2000)
    })
}
//异步方法
 async function text(){
    
    
     let n= await dice()
      //await 关键字后面调用摇色子方法执行完毕之后，才进行变量赋值
     console.log("摇出来"+n)  //最后打印出摇出来的数
 }
text()

async/await的优点

1.方便级联调用：即调用依次发生的场景；

2.同步代码编写方式： Promise使用then函数进行链式调用，一直点点点，是一种从左向右的横向写法；async/await从上到下，顺序执行，就像写同步代码一样，更符合代码编写习惯；

3.多个参数传递： Promise的then函数只能传递一个参数，虽然可以通过包装成对象来传递多个参数，但是会导致传递冗余信息，频繁的解析又重新组合参数，比较麻烦；async/await没有这个限制，可以当做普通的局部变量来处理，用let或者const定义的块级变量想怎么用就怎么用，想定义几个就定义几个，完全没有限制，也没有冗余工作；

4.同步代码和异步代码可以一起编写： 使用Promise的时候最好将同步代码和异步代码放在不同的then节点中，这样结构更加清晰；async/await整个书写习惯都是同步的，不需要纠结同步和异步的区别，当然，异步过程需要包装成一个Promise对象放在await关键字后面；

5.sync/await是对Promise的优化： async/await是基于Promise的，是进一步的一种优化，不过在写代码时，Promise本身的API出现得很少，很接近同步代码的写法；

使用场景

async主要来处理异步的操作，
需求：执行第一步，将执行第一步的结果返回给第二步使用。在ajax中先拿到一个接口的返回数据，后使用第一部返回的数据执行第二步操作的接口调用，达到异步操作。

Vue项目案例

普通案例promise：

methods: {
    
    
     getLocation(phoneNum) {
    
    
         return axios.post('/one接口', {
    
    
             phoneNum
         })
     },    
     getFaceList(province, city) {
    
    
         return axios.post('/two接口', {
    
    
             province,
             city
         })
     },  
     getFaceResult () {
    
    
          this.getLocation(this.phoneNum).then(res => {
    
    
              if (res.status === 200 && res.data.success) {
    
    
              let province = res.data.obj.province;
              let city = res.data.obj.city;
                  this.getFaceList(province, city).then(res => {
    
    
                        if(res.status === 200 && res.data.success) {
    
    
                             this.faceList = res.data.obj
                        }
                  })
              }
         }).catch(err => {
    
    
             console.log(err)
         })     
     }
}

这时你看到了then 的链式写法，有一点回调地域的感觉。现在我们在有async/ await 来改造一下。

async/ await案例：

首先把 getFaceResult 转化成一个async 函数，就是在其前面加async， 因为它的调用方法和普通函数的调用方法是一致，所以没有什么问题。然后就把 getLocation 和getFaceList 放到await 后面，等待执行， getFaceResult 函数修改如下：

async getFaceResult () {
    
    
                let location = await this.getLocation(this.phoneNum);
                if (location.data.success) {
    
    
                    let province = location.data.obj.province;
                    let city = location.data.obj.city;
                    let result = await this.getFaceList(province, city);
                    if (result.data.success) {
    
    
                        this.faceList = result.data.obj;
                    }
                }
            }

现在代码的书写方式，就像写同步代码一样，没有回调的感觉，非常舒服。

现在就还差一点需要说明，那就是怎么处理异常，如果请求发生异常，怎么处理？ 它用的是try/catch 来捕获异常，把await 放到 try 中进行执行，如有异常，就使用catch 进行处理。

async getFaceResult () {
    
    
                try {
    
    
                    let location = await this.getLocation(this.phoneNum);
                    if (location.data.success) {
    
    
                        let province = location.data.obj.province;
                        let city = location.data.obj.city;
                        let result = await this.getFaceList(province, city);
                        if (result.data.success) {
    
    
                            this.faceList = result.data.obj;
                        }
                    }
                } catch(err) {
    
    
                    console.log(err);
                }
            }

Vue项目案例（封装）

http.js

'use strict'
 
import axios from 'axios'
import qs from 'qs'
 
axios.interceptors.request.use(config => {
    
    
  // loading
  return config
}, error => {
    
    
  return Promise.reject(error)
})
 
axios.interceptors.response.use(response => {
    
    
  return response
}, error => {
    
    
  return Promise.resolve(error.response)
})
 
function checkStatus (response) {
    
    
  // loading
  // 如果http状态码正常，则直接返回数据
  if (response && (response.status === 200 || response.status === 304 ||
   response.status === 400)) {
    
    
    return response
    // 如果不需要除了data之外的数据，可以直接 return response.data
  }
  // 异常状态下，把错误信息返回去
  return {
    
    
    status: -404,
    msg: '网络异常'
  }
}
 
function checkCode (res) {
    
    
  /*如果code异常(这里已经包括网络错误，服务器错误，后端抛出的错误)，
  可以弹出一个错误提示，告诉用户
  if (res.status === -404) {
    alert(res.msg)
  }
  if (res.data && (!res.data.success)) {
    alert(res.data.error_msg)
  }
  return res
}
 
export default {
  post (data,url) {
    return axios({
      method: 'post',
      url: url,
      data: qs.stringify(data),
      timeout: 10000,
      headers: {
        'X-Requested-With': 'XMLHttpRequest',
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
      }
    }).then(
      (response) => {
        return checkStatus(response)
      }
    )
  },
  get (url, params) {
    return axios({
      method: 'get',
      baseURL: 'https://cnodejs.org/api/v1',
      url,
      params, // get 请求时带的参数
      timeout: 10000,
      headers: {
        'X-Requested-With': 'XMLHttpRequest'
      }
    }).then(
      (response) => {
        return checkStatus(response)
      }
    ).then(
      (res) => {
        return checkCode(res)
      }
    )
  }
}

api.js

export default {
    
    
  getCode: 'http://127.0.0.1:8888/.....'
}

auth.vue

import http from '../../utils/http'
import api from '../../utils/api'
 
   methods: {
    
    
      fetchData: async function () {
    
    
        var that = this
        var code = Store.fetchYqm();
        let params = {
    
    
          inviteCode: code
        }
        const response = await http.post(params,api.getCode)
         var resJson = response.data;
        
      }
}

公司的项目案例

es6中的generator函数详解

Generator 函数的定义

• 语法上，Generator 函数是一个状态机，封装了多个内部状态。
• 形式上，Generator是一个函数。不同于普通函数，是可以暂停执行的，所以函数名之前要加星号，以示区别。
• 整个Generator函数就是一个封装的异步任务，或者说是异步任务的容器，异步操作需要暂停的地方，都用yield语句。

什么是Generator函数

1.function 关键字和函数之间有一个星号(*),且内部使用yield表达式，定义不同的内部状态。
2.调用Generator函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象。

function fn(){
    
     // 定义一个Generator函数
yield ‘hello’;
yield ‘world’;
return ‘end’;
}
var f1 =fn(); // 调用Generator函数
console.log(f1); // fn {[[GeneratorStatus]]: “suspended”}
console.log(f1.next()); // {value: “hello”, done: false}
console.log(f1.next()); // {value: “world”, done: false}
console.log(f1.next()); // {value: “end”, done: true}
console.log(f1.next()); // {value: undefined, done: true}

但是，调用Generator函数后，函数并不执行，返回的也不是函数执行后的结果，而是一个指向内部状态的指针对象。

下一步，必须调用遍历器对象的next方法，使得指针移向下一个状态。即：每次调用next方法，内部指针就从函数头部或上一次停下来的地方开始执行，直到遇到下一个yield表达式（或return语句）为止。

Generator 函数是分段执行的，yield表达式是暂停执行的标记，而next方法可以恢复执行。

如下案例：

function* gen(x){
    
    //一个 Generator 函数
	console.log('x='+x)
	var y = yield x + 2;
    
	return y;
}
//调用Generator 函数
var g = gen(1);
 
g.next();
输出：x=1
{
    
    value: 3, done: false}
 
注意：调用g.next() 即执行异步任务的  x+2  

• next 方法的作用是分阶段执行 Generator 函数。每次调用 next 方法，会返回一个对象，表示当前阶段的信息（ value 属性和 done 属性）。
• value 属性是 yield 语句后面表达式的值，表示当前阶段的值；
• done 属性是一个布尔值，表示 Generator 函数是否执行完毕，即是否还有下一个阶段(done为false 继续执行)。

Generator 函数的数据交换

function* gen(x){
    
    
  var y = yield x + 2;
  return y;
}
 
var g = gen(1);
//第一次执行
g.next() // { value: 3, done: false }
//第二次执行 时，如果有带参数，
这个参数可以传入 Generator 函数，作为上个阶段异步任务的返回结果，被函数体内的变量 y 接收。
g.next(2) // { value: 2, done: true }
因此，这一步的 value 属性，返回的就是2（变量 y 的值）。
 
//如果没带参数
g.next() //{value: undefined, done: true}

1.迭代器协议： 定义了一种标准的方式来产生一个有限或无限序列的值；
当一个对象被认为是一个迭代器时，它实现了一个 next() 的方法，next()返回值如下

{
    
    
 done:true,//false迭代是否结束，
 value:v,//迭代器返回值
}

2.generator的用途：

在JavaScript中,一个函数一旦被执行,就会执行到最后或者被return,运行期间不会被外部所影响打断,而generator的出现就打破了这种函数运行的完整性。

3.generator函数与普通函数的区别:

    a.function关键字与函数名中间有一个*键
    b.Generator函数使用了yield表达式
    c. 直接调用 Generator函数并不会执行，也不会返回运行结果，
    而是返回一个遍历器对象（Iterator Object）
    d.调用Generator函数时需用到next(),如果有多个yield状态,要依次调用next()
    e.该生成器函数执行后会返回一个Iterator对象,对象内有yield的返回值
    ,以及还有一个状态done的属性(该属性表示当前生成器内yield表达式全部执行完毕,执行完毕返回true)
    {
    
    
         done:true,//false迭代是否结束，
         value:v,//迭代器返回值
    }

4.generator函数的语法：

   // 传统函数
      function foo() {
    
    
         return 'hello world'
     }

     foo()   // 'hello world'，一旦调用立即执行


     //Generator函数
        function* persition(){
    
    
            yield '我是generato生成器';
            yield '我要开始了';
            return '结束'
        }
        //创建一个句柄，赋值给生成器
        var iterator =persition();
        //直接调用并不能被立即执行
        console.log(iterator)
        //需使用next()方法来调用这个生成器 next()方法调用一次,
        //并不能将Generator函数内的yield值全部打印出来，需要依次进行调用
        console.log(iterator.next())
        console.log(iterator.next())
        //如果iterator对象内done为true，证明Generator函数执行完毕
        console.log(iterator.next())

5.yield表达式:

    yield 表达式只能用在 Generator 函数里面，用在其它地方都会报错
        function(){
    
    
            yield 1;
        }
        // SyntaxError: Unexpected number
        // 在一个普通函数中使用yield表达式，结果产生一个句法错误
}

6.next():
generator函数（生成器）调用的唯一方法,且注意需依次调用next方法,
对于普通的生成器，第一次next调用，相当于启动生成器，会从生成器函数的第一行代码开始执行，直到第一次执行完yield语句后，跳出生成器函数。
然后第二个next调用，进入生成器函数后，从yield语句的下一句语开始执行，然后重新运行到yield语句，执行后，跳出生成器函数，

promise generator aysnc/await

1.三者都是异步编程的解决方案,不同的是,promise为较早出来的,其次generator,最后为async/await,三者象征了前端进行解决异步编程的进化路程。

promise:

 promise比较简单，也是最常用的，主要就是将原来用  回调函数异步编程的方法  转成  
 relsove和reject触发事件；


    对象内含有四个方法，then()异步请求成功后
                      catch()异步请求错误的回调方法
                      finally()请求之后无论是什么状态都会执行
                      resolve()将现有对象转换为Promise对象
                      all()此方法用于将多个Promise实例包装成一个新的promise实例。
                      race()也是将多个Promise实例包装成一个新的promise实例
                      reject()返回一个状态为Rejected的新Promise实例。
                      
    有点：让回调函数变成了规范的链式写法，程序流程可以看的很清楚
    缺点:编写的难度比传统写法高，阅读代码也不是一眼可以看懂

Generator:

generator是一个迭代生成器,其返回值为迭代器(lterator),是ES6标准引入的新的数据类型，
主要用于异步编程,它借鉴于Python中的generator概念和语法；

generator函数内有两个重要方法，1 yield表达式 2.next()

Generator 函数是分段执行的，yield表达式是暂停执行的标记，而 next方法可以恢复执行

优点：1.利用循环，每调用一次，就使用一次，不占内存空间 2.打破了普通函数执行的完整性
缺点: 需要用next()方法手动调用,直接调用返回无效iterator 2.

async/await:

   
    async：异步函数
    await：同步操作

     es7中提出来的异步解决方法,是目前解决异步编程终它基极解决方案,于promise为基础,
     其实也就是generator的高级语法糖,本身自己就相当于一个迭代生成器(状态机)
     ,它并不需要手动通过next()来调用自己,与普通函数一样
     
    async就相当于generator函数中的*,await相当于yield,

    async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成。
     function getSomething() {
    
    
          return "something";
    }

    async function testAsync() {
    
    
        return Promise.resolve("hello async");
    }

    async function test() {
    
    
        //await是在等待一个async函数完成
        const v1 = await getSomething();
        //await后面不仅可以接Promise，还可以接普通函数或者直接量
        const v2 = await testAsync();
        console.log(v1, v2);
    }

运用场景

1、代替递归

斐波那契数列的实现

function * fibonacci(seed1, seed2) {
    
    
while (true) {
    
    
yield (() => {
    
    
seed2 = seed2 + seed1;
seed1 = seed2 - seed1;
return seed2;
})();
}
}
const fib = fibonacci(0, 1);
fib.next(); // {value: 1, done: false}
fib.next(); // {value: 2, done: false}
fib.next(); // {value: 3, done: false}
fib.next(); // {value: 5, done: false}
fib.next(); // {value: 8, done: false}

2、异步操作的同步化
Generator 函数的暂停执行的效果，意味着可以把异步操作写在yield表达式里面，等到调用next方法时再往后执行。这实际上等同于不需要写回调函数了，因为异步操作的后续操作可以放在yield表达式下面，反正要等到调用next方法时再执行。所以，Generator 函数的一个重要实际意义就是用来处理异步操作，改写回调函数。
Ajax 是典型的异步操作，通过 Generator 函数部署 Ajax 操作，可以用同步的方式表达。

function* main() {
    
    
var result = yield request(“http://some.url“);
var resp = JSON.parse(result);
console.log(resp.value);
}
function request(url) {
    
    
makeAjaxCall(url, function(response){
    
    
it.next(response);
});
}
var it = main();
it.next();

上面代码的main函数，就是通过 Ajax 操作获取数据。可以看到，除了多了一个yield，它几乎与同步操作的写法完全一样。注意，makeAjaxCall函数中的next方法，必须加上response参数，因为yield表达式，本身是没有值的，总是等于undefined。
逐行读取文本文件：

function * numbers() {
    
    
let file = new FileReader(“numbers.txt”);
try {
    
    
while(!file.eof) {
    
    
yield parseInt(file.readLine(), 10);
}
} finally {
    
    
file.close();
}
}

3、控制流的管理
如一个多步操作非常耗时，采用回调的话：

step1(function (value1) {
    
    
step2(value1, function(value2) {
    
    
step3(value2, function(value3) {
    
    
step4(value3, function(value4) {
    
    
// Do something with value4
});
});
});
});
采用promise改写：
Promise.resolve(step1)
.then(step2)
.then(step3)
.then(step4)
.then(function (value4) {
    
    
// Do something with value4
}, function (error) {
    
    
// Handle any error from step1 through step4
}).done();

而使用generator函数：

function* longRunningTask(value1) {
    
    
try {
    
    
var value2 = yield step1(value1);
var value3 = yield step2(value2);
var value4 = yield step3(value3);
var value5 = yield step4(value4);
// Do something with value4
} catch (e) {
    
    
// Handle any error from step1 through step4
}
}

总结：

从回调函数，到promise,再到generator,再到Async/await,这四种分别代表了JavaScript异步编程解决方案的进化路程。async和generator函数主要就是为了解决异步的并发调用使用的 ，直接将参数从then里取出来，相比promise的链式调用，传参更加方便，异步顺序更加清晰