关于javascript:JavaScript中async和await的使用以及队列问题

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

• 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

// 不是异步 promise
let 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

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

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