Promise与async/await：1、A函数调用B函数，A、B函数是否使用await的区别；2、B函数return new promise()与const res = new promise(); return res;的区别

本文目的为了说明：

1、A（cilent）函数调用B（fx）函数，B函数是否使用await

2、A函数调用B函数，A函数是否使用await

3、B函数中直接return new promise，与const  res = new promise(); return res;的区别

 

结论：

 1、发起调用的函数A（client）不使用await，不管被调的函数B（fx）是否使用await，client获取f1-f8的结果res全部为promise，不能得到得到res(xxx)返回值,也不能得到then中return的值。  必须对结果res调用.then((r)=>{console.log("r", r)}) 才能从promise取到结果。 （就是说：调用的函数client不使用await，被调用的函数写了res(xxx)或者return yyy也是无效，只有对client const res = fx()得到的res使用[.then]获取值）

简单的例子：

async function g1(){
    const a =  g();  // a is a promise
    console.log("g1",a)
    a.then((res)=>{
        console.log("g1.then", res)
    })
}
async function g2(){
    const a = await g(); // a is a number 101
    console.log("g2",a)
}

async function g(){
    return new Promise((res,rej)=>{
        res(100)
    }).then((r)=>{
        return r+1
    }).catch((err)=>{
        
    })
}
g1()
g2()

 

2、发起调用的函数使用await，如果B函数“返回了值”，就可以取到返回值。（什么算作“返回了值”，建议阅读【await等待对象的结果：https://www.cnblogs.com/sunupo/p/15793163.html】）

 

说明：

f1-f4直接return new Promiseromise或者return await new Promise
f5-f8 是先把new Promise或者await new Promise赋值给一个变量，最后再return

这两大类的区别是：

只要f5-f8创建Promise与返回Promise之间没有其它代码， 就是与f1-f4等价的。
但是f7、f8有了其它代码（这儿是console），这个时候，这部分console的输出时机，需要看f7、f8中是否使用了await。

 

建议使用Chrome的控制台的Snippets调试：

 

 

 demo：

function f1() {
    console.log("f1 return new promise ---then")
    return new Promise((res,rej)=>{
        setTimeout(()=>{
            res(100)
        }
        , 2000)
    }
    )
}

async function f2() {
    console.log("return await new promise ---then")
    return await new Promise((res,rej)=>{
        setTimeout(()=>{
            res(200)
        }
        , 2000)
    }
    )
}

function f3() {
    console.log("return new promise +++then")
    return new Promise((res,rej)=>{
        setTimeout(()=>{
            res(301)
        }
        , 2000)
    }
    ).then(()=>{
        return 302;
    }
    ).catch((err)=>{
        throw new Error("catch Error")
    }
    );
}

async function f4() {
    console.log("return await new promise +++then")
    return await new Promise((res,rej)=>{
        setTimeout(()=>{
            res(401)
        }
        , 2000)
    }
    ).then(()=>{
        return 402;
    }
    ).catch((err)=>{
        throw new Error("catch Error")
    }
    );
}

function f5() {
    console.log("res=new promise;return res; ---then")

    const res = new Promise((res,rej)=>{
        setTimeout(()=>{
            res(500)
        }
        , 2000)
    }
    )
    return res
}

async function f6() {
    console.log("res=await new promise;return res  ---then")

    const res = await new Promise((res,rej)=>{
        setTimeout(()=>{
            res(600)
        }
        , 2000)
    }
    )
    return res
}

function f7() {
    console.log("res=new promise;return res; +++then")

    const res = new Promise((res,rej)=>{
        setTimeout(()=>{
            res(701)
        }
        , 2000)
    }
    ).then(()=>{
        return 702;
    }
    ).catch((err)=>{
        throw new Error("catch Error")
    }
    );
    console.log(" no await，在promise之前执行")
    return res
}

async function f8() {
    console.log("res=await new promise;return res; +++then")

    const res = await new Promise((res,rej)=>{
        setTimeout(()=>{
            res(801)
        }
        , 2000)
    }
    ).then(()=>{
        return 802;
    }
    ).catch((err)=>{
        throw new Error("catch Error")
    }
    );
    console.log(" has await, 在promise执行完之后再执行")
    return res
}


// 调用的函数还要分是否使用await，一共16种情况。
async function client(select, isAwait) {
    console.log(select)
    const map = {
        1: f1,
        2: f2,
        3: f3,
        4: f4,
        5: f5,
        6: f6,
        7: f7,
        8: f8,
        9: f9
    }

    try {
        if (!isAwait) {
            // 调用的函数不使用await。结论：res始终是一个promise，不能得到res(xxx)返回值,也不能得到then中return的值。
            const res = map[select]();
            console.log("client", "res", res)
            res.then((r)=>{
                console.log('r',r)
            });
        } else {
            // 调用的函数使用await
            const res = await map[select]();
            //（注意：同时有res(xxx) 和 then的return yyy, 那么res将会得到yyy；如果都没有将会是undefined）
            console.log("client", "res", res)
        }

    } catch (err) {
        console.log("client", "err")
    }
}
console.clear()

// 调用的函数client不使用await，不管被调的函数是否使用await，client获取f1-f8的结果res全部为promise，不能得到得到res(xxx)返回值,也不能得到then中return的值。
// 必须对结果res调用.then((r)=>{console.log("r", r)}) 才能从promise取到结果。
// 就是说：调用的函数client不使用await，被调用的函数写了res(xxx)或者return yyy也是无效，只有对client const res = fx()得到的res使用[.then]获取值
// client(8,false)

// 调用的函数client使用await， 可以得到
// client(3, true)


client(8, false)

 其它参考：js中A函数调用B函数，使用async/await的区别