async await 理解

 

案例1：

async function testAsync() {
    return "hello async";
}

const result = testAsync();
console.log(result);

结果是：

Promise { 'hello async' }

返回的是一个 promise 对象

案例2：

function getSomething() {
    return "something";
}

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

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

test();

结果是：

something hello async

await  不仅用于等待promise对象，还可以用于任何其他值，是一样的

案例3：

 

function getSomething() {
    setTimeout(() => {
        return "something";
    }, 3000)
}



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




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




test();

结果是：

undefined 'hello async'

对于setTimeout也是一样，没有特殊待遇，会直接输出结果，如果在setTimeout前面增加return,则会将setTimeout函数返回

 

Timeout {
  _called: false,
  _idleTimeout: 1,
  _idlePrev: [TimersList],
  _idleNext: [Timeout],
  _idleStart: 85,
  _onTimeout: [Function],
  _timerArgs: undefined,
  _repeat: null,
  _destroyed: false,
  [Symbol(unrefed)]: false,
  [Symbol(asyncId)]: 8,
  [Symbol(triggerId)]: 1 }  'hello async'

案例4：

function getSomething() {
    return new Promise(() => {
        setTimeout(() => {
            return "something";
        }, 3000)
    })
}

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

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

test();

结果是：

没有输出值

案例5：

function getSomething() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("something");
        }, 3000)
    })
}

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

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

test();

结果是：

3s之后输出  something hello async

案例6：

function getSomething() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("something");
            return 111111;
        }, 3000)
    })
}

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

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

test();

结果是： 

3s之后输出  something hello async

 案例7：

function getSomething() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("something");
            return 111111;
        }, 3000)
    })
}

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

async function test() {
    console.log(1111);
    const v1 = await getSomething();
    console.log(2222);
    const v2 = await testAsync();
    console.log(3333);
}

test();

结果是：

先输出 1111， 3s后输出 2222， 之后输出 3333

原理：
1、async函数是generator函数的语法糖
2、async函数，就是将generator函数的*换乘async,将yield换成await
3、async不用使用next()手动执行
4、await命令后面可以使Promise对象或原始类型的值，yield命令后面只能是Thunk函数或Promise对象
5、返回值是Promise，返回非Promise时，async函数会将其包装成Promise返回
6、代码：

function fn(args){ 
    return spawn(function*() {
        return new Promise((resolve, reject) => {
            var gen = genF();
            function step(nextF) {
                try {
                    var next  = nextF();
                } catch (e) {
                    return reject(e);
                }
                if (next.done) {
                    return resolve(next.value);
                }
                Promise.resolve(next.value).then(function (v) {
                    step(function () { return gen.next(v) });
                }, function (e) {
                    step(function () { return gen.throw(e) });
                })
            }
            step(function () { return gen.next(undefined) });
        })
    }); 
  }

  参考：  https://segmentfault.com/a/1190000007535316
　　　　https://www.jianshu.com/p/72e36168944f

　　　　http://www.ruanyifeng.com/blog/2015/05/async.html