详解 js中的async和await

最新推荐文章于 2024-09-26 17:00:53 发布

ZZZ --- jh

最新推荐文章于 2024-09-26 17:00:53 发布

阅读量971

点赞数 2

分类专栏：项目

本文链接：https://blog.csdn.net/ZZZ___jh/article/details/117231044

版权

项目专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript中的异步编程概念，特别是async和await关键字的使用。async函数表示异步执行，不会阻塞后续代码，而await用于等待Promise对象完成。在Vue项目中，可以利用async函数获取异步数据，通过await等待数据处理后再进行后续操作，确保数据的正确赋值。

摘要由CSDN通过智能技术生成

js中的async和await

await 后面接一个会return new promise的函数并执行它
await 只能放在async函数里

async
作为一个关键字放在函数的前面，表示该函数是一个异步函数，意味着该函数的执行不会阻塞后面代码的执行异步函数的调用跟普通函数一样

async function timeout(){
    return "helloworld";
}
console.log(timeout());
console.log("我在异步函数后面，会先执行谁呢");
// Promise { 'helloworld' }
// 我在异步函数后面，会先执行谁呢

await
await即等待，用于等待一个promise对象。它只能在异步函数 async function中使用，否则会报错
它的返回值不是promise对象而是promise对象处理之后的结果
await表达式会暂停当前 async function的执行，等待promise 处理完成.若 promise 正常处理(fulfilled)，其回调的resolve函数参数作为 await 表达式的值，继续执行 async function，若 promise 处理异常(rejected)，await表达式会把promise 的异常原因抛出. 如果 await 操作符后的表达式的值不是一个 promise，那么该值将被转换为一个已正常处理的 promise.
语法: [返回值] = await 表达式;
表达式: 一个 promise 对象或者任何要等待的值.
返回值: 返回 promise 对象的处理结果. 如果等待的不是 promise 对象, 则返回该值本身.

在vue项目中应用举例:

data(){
   return {
     userInfo:{},
     activeName:'works', //确定点击的用户
     list:[],
   }
 },
async getInfo(){
   // 请求数据
   let data = await getOtherInfo[this.activeName]({userId:this.userInfo.userId});
   // 接收到的数据是不是点击到的数据,是的话赋值
   if(this.activeName === data.flag){
     this.list = data.list;
   }
 },