js中A函数调用B函数，使用async/await的区别
背景，需要发起一个网络请求（setTimeout模拟），3秒得到结果。
要求必须在这个网路请求之后才能访问请求到的数据myRes。
要求调用方f4() 和 发起网络请求的f3()都必须用async/await。
假如f4()不用async/await，f3()用。代码执行到promise内部，执行完setTimeout加到宏任务-->输出“promise1000”，再遇见then加入到微任务。此时就跳出了await外部对应的async函数，继续执行同步代码"console.log(myRes+1);"，这个时候myRes还没有有从网络获取到值“999”。
promise 3000 1 setTimeout 3000ms result 999 f3 最后一行
假如f4()用，f3()不用。
promise 3000 f3 最后一行 1 setTimeout 3000ms result 999
这两种情况在访问myRes的数值的时候“console.log(myRes+1);”，都还是原来的值“1”。
let myRes = 0;
async function f3() {// 模拟网络请求 console.log("f3"); let t=3000; await new Promise((res,rej)=>{ setTimeout(()=>{ console.log(`setTimeout ${t}ms`); res(999); } , t); console.log(`promise ${t}`); } ).then((result)=>{ myRes = result; console.log(`result ${result}`); } ); console.log("f3 最后一行") }; async function f4() { await f3(); console.log(myRes+1) } f4() // then后面部分需要等到前面promise执行完毕，才会加到queue // 在f4()中await后面紧跟的函数f3()，如果该函数f3()内部有promise： // 如果在f4()中，f4()想要f3()内部的promise和`console.log("f3 最后一行")`都执行结束过后，才执行await f3()的下一步" console.log(myRes+1)"，那么f3()内的promise之前需要用await // 这种需求，f4()和f3()都需要用async/await
结果
f3 promise 3000 setTimeout 3000ms result 999 f3 最后一行 1000
1. tt()采用async/await，f()采用async/await.
会等到f()完全执行结束，才会输出“ffffffff”
console.log("code begin");
async function f() {
console.log("f")
await new Promise((res, rej) => {
let t = 1000;
setTimeout(() => {
console.log(`setTimeout ${t}ms`);
res(777);
}
, t);
console.log(`promise ${t}`);
})
.then((result) => {
console.log(`result ${result}`)
}
);
console.log("f-2")
}
async function tt() {
await f()
console.log("ffffffff")
}
console.log("f1")
tt();
console.log("code end");
// 1、tt()采用async/await，f()采用async/await.
// 会等到f()完全执行结束，才会输出“ffffffff”
// async function tt() {
// await f()
// console.log("fffffffff")
// }
/**
f1
f
promise 1000
code end
setTimeout 1000ms
result 777
f-2
ffffffff */
2. tt()不用（×）async/await，f()采用async/await。
tt()此时是同步代码，“ffffffff”会先于“code end”输出
console.log("code begin");
async function f() {
console.log("f")
await new Promise((res, rej) => {
let t = 1000;
setTimeout(() => {
console.log(`setTimeout ${t}ms`);
res(777);
}
, t);
console.log(`promise ${t}`);
})
.then((result) => {
console.log(`result ${result}`)
}
);
console.log("f-2")
}
async function tt() {
f()
console.log("ffffffff")
}
console.log("f1")
tt();
console.log("code end");
// 2、tt()不用（×）async/await，f()采用async/await。
// tt()此时是同步代码，“ffffffff”会先于“code end”输出
// async function tt() {
// f()
// console.log("ffffffff")
// }
/**
f1
f
promise 1000
ffffffff
code end
setTimeout 1000ms
result 777
f-2 */
3. tt()采用async/await，f()不采用（×）async/await.
console.log("code begin");
async function f() {
console.log("f")
new Promise((res, rej) => {
let t = 1000;
setTimeout(() => {
console.log(`setTimeout ${t}ms`);
res(777);
}
, t);
console.log(`promise ${t}`);
})
.then((result) => {
console.log(`result ${result}`)
}
);
console.log("f-2")
}
async function tt() {
await f()
console.log("ffffffff")
}
console.log("f1")
tt();
console.log("code end");
// 3、tt()采用async/await，f()不采用（×）async/await.
// 正确
// code begin
// f1
// f
// promise 1000
// f-2
// code end
//因为Promise中用了setTimeout，“code end”输出后，不会执行setTimeout（宏任务）中的console，所以也不执行then（微任务）。
// （因为then必须等到Promise中所有内容执行完毕，setTimeout在Promise内部，所以then必须等到setTimeout执行完毕）；
// 那tt()采用了async/await(awwit f())，为什么不等到f()执行完毕呢？
// 答：因为f()内部没有像第一点那样采用await Promise，其实f()已经执行完了，你看“f-2”都已经输出了。
// 如果Promise中没用用setTimeout，那么输出的情况将会是下面标记为【去掉setTimeout】的结果。
// ffffffff
// setTimeout 1000ms
// result 777
console.log("code begin");
async function f() {
console.log("f")
new Promise((res, rej) => {
let t = 1000;
// setTimeout(() => {
// console.log(`setTimeout ${t}ms`);
res(777);
// }
// , t);
console.log(`promise ${t}`);
})
.then((result) => {
console.log(`result ${result}`)
}
);
console.log("f-2")
}
async function tt() {
await f()
console.log("ffffffff")
}
console.log("f1")
tt();
console.log("code end");
// 【去掉setTimeout】
// code begin
// f1
// f
// promise 1000
// f-2
// code end
// result 777
// ffffffff
4. tt()不采用（×）async/await，f()不采用（×）async/await.
console.log("code begin");
async function f() {
console.log("f")
new Promise((res, rej) => {
let t = 1000;
setTimeout(() => {
console.log(`setTimeout ${t}ms`);
res(777);
}
, t);
console.log(`promise ${t}`);
})
.then((result) => {
console.log(`result ${result}`)
}
);
console.log("f-2")
}
async function tt() {
f()
console.log("ffffffff")
}
console.log("f1")
tt();
console.log("code end");
// 4、tt()不采用（×）async/await，f()不采用（×）async/await.
// code begin
// f1
// f
// promise 1000
// f-2
// ffffffff
// code end
// setTimeout 1000ms
// result 777
// 注释掉setTimeout
console.log("code begin");
async function f() {
console.log("f")
new Promise((res, rej) => {
let t = 1000;
// setTimeout(() => {
// console.log(`setTimeout ${t}ms`);
res(777);
// }
// , t);
console.log(`promise ${t}`);
})
.then((result) => {
console.log(`result ${result}`)
}
);
console.log("f-2")
}
async function tt() {
f()
console.log("ffffffff")
}
console.log("f1")
tt();
console.log("code end");
// code begin
// f1
// f
// promise 1000
// f-2
// ffffffff
// code end
// result 777
/**function f1() { asyncFunc() } async function f2() { await asyncFunc() } await f1() // 不会等待asyncFunc()，如果asyncFunc()返回rejection，直接触发 unhandledrejection await f2() // 会等待asyncFunc()，如果asyncFunc()返回rejection，会转回成错误并向上传播 链接：https://www.zhihu.com/question/462421951/answer/1916281835 */
