2018-04-03 async/await学习

async/await

async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成。

await 只能出现在 async 函数中。

async

//普通方法
function fn() {
  return 'Hello world'
};

let result1 = fn();

console.log(result1); //Hello world


//async方法
async function fn2() {
  return 'Hello world'
};

let result2 = fn2();

console.log(result2); //Promise对象

result2.then(value => {
  console.log(value); //Hello world
});

根据上面可以看到，如果直接return ，async会调用Promise.resolve() 封装成 Promise 对象

Promise.resolve('Hello world')等价于 new Promise(resolve => resolve('Hello world'))

---

await

await是在等待一个async函数的返回值，不仅仅用于等 Promise 对象，它可以等任意表达式的结果，所以，await 后面实际是可以接普通函数调用或者直接量的。

async function getSomething() {
  return "something";
}

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

async function test() {
  const v1 = await getSomething(); 
  const v2 = await testPromise();
  console.log(v1, v2); //something  hello async
}

test();

• await 是个运算符，用于组成表达式，await 表达式的运算结果取决于它等的东西。
• 因为testPromise返回的就是Promise对象， 在前面可以不用加async
• 上面async函数中，如果是直接return一个结果，会返回一个promise对象，但是当await等到是一个promise对象，会得到对象中resolve的值，作为await的运算结果

async/await 的优势

假设一个业务，分多个步骤完成，每个步骤都是异步的，而且依赖于上一个步骤的结果。我们仍然用 setTimeout 来模拟异步操作：

/**
 * 传入参数 n，表示这个函数执行的时间（毫秒）
 * 执行的结果是 n + 200，这个值将用于下一步骤
 */
function takeLongTime(n) {
    return new Promise(resolve => {
        setTimeout(() => resolve(n + 200), n);
    });
}

function step1(n) {
    console.log(`step1 with ${n}`);
    return takeLongTime(n);
}

function step2(n) {
    console.log(`step2 with ${n}`);
    return takeLongTime(n);
}

function step3(n) {
    console.log(`step3 with ${n}`);
    return takeLongTime(n);
}

• 现在用 Promise 方式来实现这三个步骤的处理

function doIt() {
  const time1 = 300;

  step1(300).then(time2 => {
    step2(time2).then(time3 => {
      step3(time3).then(result => {
        console.log(`result is ${result}`);
      })
    })
  })
};
doIt();

//step1 with 300
//step2 with 500
//step3 with 700
//result is 900

• async/await 实现

 async function doIt() {
   const time1 = 300;
   const time2 = await step1(time1);
   const time3 = await step2(time2);
   const result = await step3(time3);
   console.log(`result is ${result}`);
 };

 doIt();

 //结果一样，结构更清晰，几乎和同步代码一样；

​