蓝狮注册JavaScript中async和await的使用以及队列问题

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简单解析以及在面试中可能会问到的关于队列的一些场景和知识点,有任何问题欢迎留言,后续的文章整理然后作为补充。

0 Comments
Leave a Reply