async与await的理解

具体的执行情况V8与浏览器环境可能会略有差异，这里主要做一些原理说明，具体的执行顺序可能需要视实际情况来定。

async

async是将一个方法等待，但是其并不是暂停到那边，而是将其抛出主线程，进入就绪队列等待，而整个async函数的返回值也是一个Promise对象，具体区分以下情况

async function fn1 () {
  // ....
  return 'foo'
}
// -> Promise.resolve('foo')


async function fn2 () {
  // ....
  
}
// -> Promise.resolve(undefined)


async function fn3 () {
  // ....
  return new Promise((resolve, reject) => {
    resolve('success')
  })
}
// -> Promise.resolve('success')


async function fn4 () {
  // ....
  return new Promise((resolve, reject) => {
    reject('fail')
  })
}
// -> Promise.reject('fail')

也就是说，async的作用，最后返回一个Promise对象。

await

await是将Promise的内容取出来的一个方式，方便我们进行异步编程的操作，他是取出Promise.resolve()的返回值，要根据需求加入try-catch来满足需求，他的操作必须在async中执行，因为要暂时抛出主线程（“暂时停止”）

// resolve的情况，也是正常的情况下

function getDataSuccess () {
  return new Promise((resolve, reject) => {
    resolve('success')
  })
}

(async () => {
  let dataSuccess = await getDataSuccess()
  console.log(dataSuccess) // 输出--> success
})()


// 如果有reject的情况，需要配合try-catch

function getDataFail () {
  return new Promise((resolve, reject) => {
    reject('fail')
  })
}
(async () => {
  try {
    let dataFail = await getDataFail()
    console.log(dataFail)
  } catch (error) {
    console.log(error) // 输出--> error
  }
})()

async和await搭配使用

// 其中async的作用相当于返回了Promise.resolve( foo() )  async foo () { }

// await的作用取出数据  await bar()
new Promise(resolve => {
  resolve( bar() )
}).then(val => {
  ret = val  
})

// 两个部分和起来相当于两块Promise
async fn() {
  return new Promise( ..... )
}
let ret = await fn()
...

======== 等价于 =======

new Promise((resolve) => {
 resolve( Promise.resolve(fn()) )
}).then((val)=>{
  const v1 = val
  ...
})

注意，由于浏览器的不同，以及运行环境的不同，可能运行顺序会略有差异

以下仅自己分析（不一定正确），可供思路参考，如有问题，欢迎指正。

async function testSometing() {
    console.log("执行testSometing");
    return "testSometing";
}

async function testAsync() {
    console.log("执行testAsync");
    return Promise.resolve("hello async");
}

async function test() {
    console.log("test start...");
    const v1 = await testSometing();
    console.log(v1);
    const v2 = await testAsync();
    console.log(v2);
    console.log(v1, v2);
}

test();

var promise = new Promise((resolve)=> { 
  console.log("promise start.."); 
  resolve("promise");
});
promise.then((val)=> console.log(val));

console.log("test end...")

执行情况一

1 test start...
2 执行testSometing
3 promise start..
4 test end...
5 promise  *
6 testSometing *
7 执行testAsync *
8 hello async
9 testSometing hello async

// 这种情况是 由于await 的函数是一个async,相当于两层Promise,如上，所以他抛出线程2次，让后面的运行（较难理解一种）
-> async的函数Promise抛出（剩余2个） -> new Promise的Promise抛出(剩余一个)
-> 运行栈空了,调入 ->async的函数Promise抛出（剩余1个）-> new Promise的Promise执行
-> 运行栈空了,调入 ->async的函数Promise执行

执行情况二

1 test start...
2 执行testSometing
3 promise start..
4 test end...
5 testSometing *
6 执行testAsync *
7 promise  *
8 hello async
9 testSometing hello async

// 这种情况是把两个Promise放到一起，也是比较容易理解的方式
-> async的函数Promise抛出 -> new Promise的Promise抛出
-> 运行栈空了,调入 -> async的函数Promise执行 -> new Promise的Promise执行