2017-11-28

今天主要是学习了async和await，async对于现阶段处理异步来说是一种很好的方法了。

基本规则：

• async表示一个async函数，await只能用在其函数里面；
• await表示等待promise返回有结果了，然后才能继续向下执行；
• await后面跟着的是一个promise对象。

基本用法

首先，必须是一个promise对象

var sleep = function (time) {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      resolve('ok');
    }, time);
  })
};

var start = async function () {
  console.log('start');
  var result - await sleep(1000);
  console.log(result);
  console.log('end');
};

start();

最后返回的结果是：

1.png

如果sleep中返回的不是一个promise对象，则await后得到的结果是一个undefined

var sleep = function (time) {
  setTimeout(function () {
     console.log('ok');
   }, time);
};

var start = async function () {
  console.log('start');
  var result - await sleep(1000);
  console.log(result);
  console.log('end');
};

start();

得到的结果为：

2.png

关于其作用域

await只能在async的上下文中才能执行，否则会报错

var sleep = function (time) {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      resolve('ok');
    }, time);
  })
};

var start = async function () {
  //[1, 2, 3, 4, 5, 6].forEach(function (index) {    // SyntaxError: Unexpected identifier
    //console.log(`${index}次`);
    //await sleep(1000);
  //});

  for (var i = 0; i < 10; i++) {
    console.log(`${i} 次`);
    await sleep(1000);
  }
}
start();

如果不是在同一个上下文中，那么await则会报错。

最后

这里有一个小技巧，就是如果要输出1~10，那么除了通过闭包的方式外，还有通过async的方式去获取。

// method 1
for (var i = 0; i < 10; i++) {
  (function (i) {
    setTimeout(function () {
      console.log(`${i} 次`);
    }, 1000);
  })(i);
}

// method 2
var sleep = function (time) {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      resolve('ok');
    }, time);
  })
};

var start = async function () {
  for (var i = 0; i < 10; i++) {
    console.log(`${i} 次`);
    await sleep(0);
  }
}

start();