宏工作和微工作的队列入门常识，能够参考之前的文章：

  • JavaScript的事件循环机制

宏工作和微工作在前端面试中，被常常提及到，包含口头和口试题

async && await概念

async

  • 应用async关键字申明的函数，是AsyncFunction构造函数的实例，在async函数体内，能够应用await接管promise实例
  • async和await关键字，在开发过程中，能够简洁地去做一些异步操作。

await

  • await操作符承受一个Promise 对象，并且只能和异步函数async function搭配应用。
  • await 表达式会暂停以后 async function 的执行，期待 Promise 解决实现。
  • 若 Promise 失常解决 (fulfilled)，其回调的 resolve 函数参数作为 await 表达式的值，继续执行
  • 若 Promise 解决异样 (rejected)，await 表达式会把 Promise 的异样起因抛出。
  • 如果 await 操作符后的表达式的值不是一个 Promise，则返回该值自身。

async && await根本应用

/** * async 函数是应用async关键字申明的函数。 * async 函数是AsyncFunction构造函数的实例， 并且其中容许应用await关键字。 * async和await关键字让咱们能够用一种更简洁的形式写出基于Promise的异步行为，而无需刻意地链式调用promise。 * * await  操作符用于期待一个Promise 对象。它只能在异步函数 async function 中应用。 * await 表达式会暂停以后 async function 的执行，期待 Promise 解决实现。若 Promise 失常解决 (fulfilled)，其回调的 resolve 函数参数作为 await 表达式的值，继续执行 * async function。 * 若 Promise 解决异样 (rejected)，await 表达式会把 Promise 的异样起因抛出。 * 另外，如果 await 操作符后的表达式的值不是一个 Promise，则返回该值自身。 * * * */// 模仿申请接口function userInfo() {    return new Promise((resolve) => {        setTimeout(() => {            resolve("zhangsan");        }, 2000);    });}// 接管申请的返回值async function fetchUserInfo() {    let res = await userInfo();    console.log(res);}fetchUserInfo(); // zhangsan// 不是异步promiselet testFn = function test(){}async function notPromise() {    var str = await testFn;    console.log(str); // function test(){}}notPromise();

async&& await联合promise在面试时回遇到的队列问题

function userInfo() {    return new Promise((resolve) => {        setTimeout(() => {            resolve(`接口返回值---------------1`);        }, 2000);    });}console.log("1");let p1 = new Promise((resolve, reject) => {    resolve("p1");});let p2 = new Promise((resolve, reject) => {    resolve("p2");});async function getUserInfo() {    console.log("2");        p1.then((res) => {        console.log(res);    });            var awaitRes = await userInfo();    console.log(awaitRes); // 接口返回值---------------1        p2.then((res) => {        console.log(res);    });        console.log("3");}console.log("4");getUserInfo(); // 异步办法，退出工作队列执行console.log("5");/** * * 执行程序 * * 1 * 4 * 2 * 5 * p1 * 接口返回值---------------1 * 3 * p2 * * * */
  • 同步工作1，4，执行
  • getUserInfo作为异步办法，优先执行同步代码2
  • p1和userInfo办法，p2这三个作为promise会放在异步队列当中,并且await前面的代码会阻塞后续的代码执行，因而3也会作为异步工作，放在await之后执行
  • 此时，会先执行5
  • 所有的同步代码执行实现之后，从队列中，执行异步工作，p1,awaitRes---->接口返回值---------------1
  • 到这里值得注意的是，因为await会阻塞同步代码的执行，因而await执行实现之后，会先执行在它之后阻塞的同步代码，执行实现之后，才会执行p2这个promise异步工作

所以整个代码块执行的程序是：

1，4，2，5，p1，接口返回值---------------1，3，p2

总结：

  • async和await作为ecmascript的新个性，目前更多的场景应用在前端获取后端接口和进行一些异步操作等。
  • 作为面试点，async和await，联合promise和定时器等联合起来，作为一些面试的必备常识。
  • 宏工作和微工作的队列入门常识，能够参考之前的文章：
  • JavaScript的事件循环机制
  • 具体的async和await的应用，能够参考：
  • 阮一峰ES6 async 函数

以上就是js中async和await简略解析以及在面试中可能会问到的对于队列的一些场景和知识点，有任何问题欢送留言，后续的文章整顿而后作为补充。

文章博客地址：JavaScript中async和await的应用以及队列问题

源码地址

  • 码云 https://gitee.com/lewyon/vue-note
  • githup https://github.com/akari16/vue-note

欢送关注公众号：程序员布欧，不定期更新一些文章

创作不易，转载请注明出处和作者。