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]获取值)
简单的例子:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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的区别