async..await 和 Generator (es6)

async..await 解释

async 异步，修改一个函数 await 等待，await后面一般跟的是promise对象，一般是用来执行异步操作的 async和await是es7的标准，若是浏览器兼容必须使用对应的babel。它的思想是用同步的语法解决异步，避免异步带来的层层嵌套。此函数返回的是一个promise对象。

• 使用async...await写定时器

function test2(){
  var _promise = new Promise(function(resolve,reject){
    setTimeout(function(){
      resolve("哈品牌")
    },1000)
  });
  return _promise;
}
async function test(){
  const value = await test2();
  console.log(value)
}
test();  //将在1秒过后返回"哈品牌"

• 使用async...await写定时器接口

function test2(){
  var _promise = new Promise(function(resolve,reject){
      $.post('http://190.100.10.23:6080/cdpit//##.do',function(re){
          if(re.success){
            resolve(re)
          }else{
            reject("fail")
          }
      })
  });
  return _promise;
}
async function test(){
  const value = await test2();
  console.log(value)  //返回 http://190.100.10.23:6080/cdpit//##.do的数据
}
test();

• 层层嵌套

function test1() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(20);
      }, 3000);
    });
  }

  function test2(x) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(x * 20);
      }, 3000);
    });
  }

  async function test() {
    let x1 = await test1();
    let x2 = await test2(x1);
    console.log(x1, x2);
  }

  test();

async..await的缺点

.缺点： 1由于 async..await 是返回的promise对象。所以在async..await的函数中不能直接return "**" 返回具体的值。 2.await必须配合async使用

优点 1：回调函数是前端的一大弊病。Promise解决了回调函数的层层嵌套的痛楚。而async和await是基于Promiset和Generator 的语法糖，从使用上来说，更加的清晰简洁。

Generator

函数中next()表示继续执行，yield 表示暂停。通过调用next().value可以获取yield后面的值。 如：

function* main() {
    let x = yield "wt";  //此处进行赋值 x = 20
    let y = yield x * 2;
  }
  let it = main();
  let res = it.next();    
  console.log(res.value) //返回值为：‘wt’
  res = it.next(20);  
  console.log(res.value); //返回值为：40