promise async await 基本用法和面试题详解

导语：异步编程的最高境界就是不关心它是否是异步。async、await很好的解决了这一点，将异步强行转换为同步处理。
async/await与promise不存在谁代替谁的说法，因为async/await是寄生于Promise，是Generater的语法糖。

温馨提示：如果你已经知道了关于async await的基本用法，请直接看分割线以下内容

async

1. async其实就是对Generator的封装，只不过async可以自动执行next()。

2. async必须等到里面所有的await执行完，async才开始return，返回的Promise状态才改变。除非遇到return和错误。

3. async默认返回一个Promise，如果return不是一个Promise对象，就会被转为立即resolve的Promise，可以在then函数中获取返回值。

 

async function fn () {
    await 100
    await 200
    return 300
}
fn().then(res => {
    console.log(res) // 300
})　

 

 再看下面这个例子：

 打印结果如下：（返回的是promise对象）

如果在async函数中抛出了错误，则终止错误结果，不会继续向下执行：

如果希望一个await失败，后面的继续执行，可以使用try...catch或者在await后面的Promise跟一个catch方法：

async function f() {
  try {
    await Promise.reject('出错了');
  } catch(e) {
  }
  return await Promise.resolve('hello world');
}

f()
.then(v => console.log(v))   // hello world

// catch
async function f() {
  await Promise.reject('出错了')
    .catch(e => console.log(e));   // 出错了
  return await Promise.resolve('hello world');
}

f()
.then(v => console.log(v))  // hello world

================================   分割线   ==================================

面试题

【例1】

async function async1() {
    console.log("async1 start");
    await async2();
    console.log("async1 end");
    return 'async return';
}

async function async2() {
    console.log("async2");
}

console.log("script start");

setTimeout(function() {
    console.log("setTimeout");
}, 0);

async1().then(function (message) { console.log(message) });

new Promise(function(resolve) {
    console.log("promise1");
    resolve();
}).then(function() {
    console.log("promise2");
});

console.log("script end");

输出顺序如下：

 【例2】：

var p = new Promise((res,rej) => {
    res('hello one')
    console.log('good morning')
})

function hello() {
    console.log('hello begins')
    return p
}

hello().then(res => {
    console.log(res)
    console.log('hello1111111111')
    return 'hello two'
}).then(res => {
    console.log(res)
    console.log('hello22222222222')
    return 'hello three'
}).then(res => {
    console.log(res)
    console.log('hello33333333333')
})

function test1 () {
    console.log('test1')
}

async function asy () {
    console.log('asy begins')
    await console.log('asy---111111')

    console.log('async1')
    await console.log('asy---222222')

    console.log('asy ends')
}

asy()

test1()

function* gnrt () {
    console.log(1)
    yield console.log(11111111)

    console.log(2)
    yield console.log(22222222)

    console.log(3)
    yield console.log(33333333)
}

var result = gnrt()
result.next()
result.next()
result.next()

输出顺序如下：