async/await解决异步调用

async/await是新增的用于解决异步回调的方法，虽然在ES5的环境下还不可以使用该特性，但是基于babel我们可以添加如下配置来使用该特性：transform-async-to-generator。

async关键字表明后面的函数时异步执行函数，函数会返回一个Promise对象。如果在async函数执行的时候遇到await，就会先返回(此时Promise的状态为Pending)并等到await执行完后再继续执行下面的语句。如果async函数返回的是一非Promsie的变量，则会执行Promse.resolve()方法将该变量返回。

await关键字表明会等待后面的执行结果，该结果可以是任何东西，如果是Promise则会阻塞后面的执行，直到得到Promise的resolve结果。当然这里的阻塞只是会阻塞async函数的执行，对于async函数外面的执行是不会阻塞的。这也是为什么await关键字只能用在async表明的函数中的原因。

下面来看示例代码：

var asyncFirstFun = () => {
  return new Promise((resolve) => {
      setTimeout(() => resolve(10), 1000);
    }
  )
};

var asyncSecondFun = (value) => {
  return new Promise((resolve) => {
      setTimeout(() => resolve(value + 1), 1000);
    }
  )
};

var asyncResult = async function () {
  console.log('inner asyncFunction');
  var firstValue = await asyncFirstFun();
  console.log(firstValue, 'firstValue');
  var secondValue = await asyncSecondFun(firstValue);
  console.log(secondValue, 'secondValue');
  return secondValue;
};

console.log('before async run');
var result = asyncResult();
console.log('after async function',result);
setTimeout(() => console.log(result, 'result after 5s'), 5000);

该示例的输出为：

before async run
inner asyncFunction
after async function Promise { <pending> }
10 'firstValue'
11 'secondValue'
Promise { 11 } 'result after 5s'

由示例可以看出：

await不会阻塞async外面的执行，因为遇到await后after async function Promise { <pending> }马上执行
async返回的是一个Promise，在log中可以看出没resolve前为Promise{<pending>}，执行完后为Promise{11}。

async/await解决异步调用

猜你喜欢