重点:
1、等待指的是:遇见await,先执行await行的代码,然后暂停await行后面的代码(awai行执行的代码,如果是async函数:先返回promise对象,执行resolve后,promise对象将更新),先执行await所在函数的外部代码;
await三层意义:
1、async和await一起配合,完成函数等待,先执行外部调用函数;
2、await+promise一起配置,完成settimeout的等待,确保被调用函数内部的执行顺序。
3、await会简化then,直接获取promise的返回值。
详解:
1、函数使用async修饰后,函数的返回值将为promise;
2、函数内有await,必须要使用async修饰;
3、有async修饰符的函数,函数内不一定非要有await代码;
4、await后面是普通函数,也可以是async修饰的函数以及promise对象及普通对象;都将触发当前函数的进程等待;
详述:
async:
1、函数内部可能有await,函数为异步函数;
2、返回值为promise类型;确保异步函数可以嵌套;
3、async函数内的代码会顺序执行;
await:
1、替换了then,简化获取promise的值,代码清晰;
2、所属的函数必须要有async包围,因为有了await,就证明了该代码块是异步的;
3、await的代码执行完毕后,才会执行函数后续的代码;
代码汇总讲解:
非await 调用:
调用函数(调用前的代码)-->被调用函数(await+await前的代码)--->调用函数(调用后的代码)-->调用函数外部的代码-->被调用函数(await后的代码)
被调用函数:
let promise = async function () {
console.log("====promise start");
await new Promise((resolve, reject) => {
console.log(" promise await start");
setTimeout(() => {
console.log("====promise timeout");
resolve('异步操作成功!'); // 成功后调用resolve函数
}, 4000);
});
console.log("====promise end");
return 1;
};
调用函数:
(async () => {
console.log("====执行start");
result = promise();
console.log("====执行end" + result);
})();
console.log("====外部");
输出:
====执行start
====promise start
promise await start
====执行end[object Promise]
====外部
====promise timeout
====promise end
await 调用:
调用函数(await+await前的代码)-->被调用函数:await+await前的代码)--->调用函数外部的代码-->被调用函数(await后的代码)
--->调用函数(await后的代码)
被调用函数:
let promise = async function () {
console.log("====promise start");
await new Promise((resolve, reject) => {
console.log(" promise await start");
setTimeout(() => {
console.log("====promise timeout");
resolve('异步操作成功!'); // 成功后调用resolve函数
}, 4000);
});
console.log("====promise end");
return 1;
};
调用函数:
(async () => {
console.log("====执行start");
result = promise();
console.log("====执行end" + result);
})();
console.log("====外部");
输出:
await嵌套:
执行顺序:
调用函数(调用前+await行代码)-->
第一个await函数(await前+await行代码)-->
第二个await函数(await前+await行代码)-->
调用函数(外部代码)-->
第二个await函数(await后代码)-->
第一个await函数(await后代码)-->
调用函数(await后的代码)
代码:
第一个await
let promise = async function () {
console.log("====promise start");
await promise2();
console.log("====promise end");
return 1;
};
第二个await
let promise2 = async function () {
console.log("====promise2 start");
await new Promise((resolve, reject) => {
console.log(" promise2 await start");
setTimeout(() => {
console.log("====promise2 timeout");
resolve('异步操作成功!'); // 成功后调用resolve函数
}, 4000);
});
console.log("====promise2 end");
return 1;
};
await调用
(async () => {
console.log("====执行start");
result = await promise();
console.log("====执行end" + result);
})();
输出:
====执行start
====promise start
====promise2 start
promise2 await start
====外部
====promise2 timeout
====promise2 end
====promise end
====执行end1
1、promise代码
let promise2 = function () {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log("promise2" + (i++));
resolve('异步操作成功!'); // 成功后调用resolve函数
}, 4000);
})
};
输出:
2、使用then调用
promise2().then((successMessage) => {
console.log(successMessage); // 打印 "异步操作成功!"
}).catch((errorMessage) => {
console.log(errorMessage); // 不打印,因为只有resolve被调用
});
3、使用await调用
async function runawait() {
result = await promise2();
console.log("====4");
}
1、函数没有await,将不触发等待;
如果函数async修饰,则返回promise,否则返回正常值;
let promise = function () {
console.log("====promise start");
setTimeout(() => {
console.log("====promise timeout");
// resolve('异步操作成功!'); // 成功后调用resolve函数
}, 4000);
return 1;
};
(async () => {
result = promise();
console.log("====执行" + result);
})();
console.log("====外部");
输出:
====promise start
====执行1
====外部
====promise timeout
2、如果有await,将触发等待
let promise = async function () {
await 1;
console.log("====promise start");
setTimeout(() => {
console.log("====promise timeout");
// resolve('异步操作成功!'); // 成功后调用resolve函数
}, 4000);
return 1;
};
(async () => {
result = promise();
console.log("====执行" + result);
})();
console.log("====外部");
输出:
====执行[object Promise]
====外部
====promise start
====promise timeout
settimeout需要await+promise配合,完成函数内的顺序执行。
1、无await+promise配合
let promise = async function () {
console.log("====promise start");
setTimeout(() => {
console.log("====promise timeout");
// resolve('异步操作成功!'); // 成功后调用resolve函数
}, 4000);
console.log("====promise end");
return 1;
};
(async () => {
result = await promise();
console.log("====执行" + result);
})();
console.log("====外部");
输出:
====promise start
====promise end
====外部
====执行1
====promise timeout
2、有await+promise配合:
let promise = async function () {
await 1;
console.log("====promise start");
await new Promise((resolve, reject) => {
setTimeout(() => {
console.log("====promise timeout");
resolve('异步操作成功!'); // 成功后调用resolve函数
}, 4000);
});
console.log("====promise end");
return 1;
};
(async () => {
result = promise();
console.log("====执行" + result);
})();
console.log("====外部");
输出:
====执行[object Promise]
====外部
====promise start
====promise timeout
====promise end