超详细 async和await 项目实战运用（附加文字解答+源码）

大家好！又到了愉快的周末假期，今天是2023年9月3日|农历七月十九，我最近还是比较忙的，但是觉得每一天过得也比较充实，无论在工作中遇到的技术难点，还是在生活中的点点滴滴。

本篇博文是我发布的第100篇文章，在上周收获了第一批粉丝(〃‘▽’〃)，这次主要是来说一下在项目实战中如何处理异步之间的函数调用，下面以文字解答+源码的方式一一分享给大家。

问题描述

本次异步调用实现方式我是运用到了微信小程序中，我有两个函数，举例说一下：函数A和函数B，函数A去调用数据库返回id，然后函数B拿着这个id再次去查询数据，没使用异步之前我的做法是在onLoad或onShow中，先调用函数A，在调佣函数B，我发现了一个问题，函数A中id打印出来时null，而且是在调用完函数B之后才打印出来的，这明显不符合我的应用场景，我的应用场景是必须在调用函数B之前把id查询到，因为id是作为函数B查询数据库的查询条件，后来我采用async和await 进行解决的，具体解决思路如下：

async

先来简答了解一下async.

什么是 async

async是一个关键字，用于定义异步函数.

async 的作用

简化异步编程.

async 的应用场景

1. 异步操作：当有需要处理异步操作的时候，如异步请求、文件读写等。
2. 顺序控制：当需要按照一定的顺序执行多个异步操作时，可以使用await关键字确保异步操作的顺序性，避免回调地狱和复杂的Promise链式调用。
3. 错误处理：async/await结合try/catch语句可以更方便地处理异步操作中的错误，使错误处理代码更加清晰和直观。

async 优点

1. 简化了异步编程，并提供了更直观、更易于理解和编写的方式来处理异步操作。
2. 适用于需要处理异步操作的场景，以及对代码的简洁性、可读性和可维护性有要求的场景下。

await

先来简答了解一下await .

什么是 await

await 是一个操作符，用于等待一个Promise对象的解决（resolved），并暂停当前异步函数的执行，直到Promise对象被解决并返回解决值。

await 的作用

使异步操作的代码看起来更像是同步的.

await 的应用场景

使用await时，它会暂停当前函数的执行，直到等待的Promise对象被解决。一旦Promise对象被解决，await表达式将返回Promise对象的解决值，并继续执行后面的代码。

await 的优点

1. 顺序控制：await关键字可以确保异步操作按照预期的顺序执行。当一个异步操作需要依赖于另一个异步操作的结果时，可以用await等待前一个操作完成，然后进行后续操作。这样可以避免回调地狱和嵌套的.then()方法调用。
2. 简化异步代码：await关键字使异步代码更易于理解和编写，尤其是在处理多个异步操作时。它可以使异步代码的结构更加线性，类似于同步代码，从而提高代码的可读性和可维护性。

async和 await结合使用

修改前

onShow()：页面加载渲染时，调用此函数.

onShow() {
  this.loaddata();// 相当于我前面举例说明的函数A
  this.getguardfamilyList();// 相当于我前面举例说明的函数B
}

loaddata() 函数，在调用getguardfamilyList()之前我输出来的this.modelvalue.id是undefined，后端是有值的，调用完getguardfamilyList()之后才有值。

loaddata(){
   get('后端接口地址',{id:uni.getStorageSync('values').id}).then(res=>{
    this.modelvalue = res.result
    console.log("this.modelvalue.id==============>",this.modelvalue.id)
  })
},

我在getguardfamilyList()中输出的modelvalue.id是undefined.

getguardfamilyList() {
  let modelvalue=this.modelvalue
  console.log("modelvalue.id========>",modelvalue.id)
  get('后端接口地址',model).then((res) => {
    if (res.success) {
      this.shouhuquanjia = res.result
      }
    }
  })
},

修改后

在调用loaddata()的函数中添加async ，将onShow()定义为异步函数.

async onShow() {
  await this.loaddata();// 相当于我前面举例说明的函数A
  this.getguardfamilyList();// 相当于我前面举例说明的函数B
}

在loaddata()函数前面加上async 关键字，定义为异步函数，并在get函数中添加await关键字，表示我在执行get查询数据库时，暂停其它函数执行，直到后端返回结果后，再接着往下执行，我原来的执行逻辑是在loaddata()去请求后端时，结果还没有返回，getguardfamilyList()就已经被执行了.

async loaddata(){
   await get('后端接口地址',{id:uni.getStorageSync('values').id}).then(res=>{
    this.modelvalue = res.result
    console.log("this.modelvalue.id==============>",this.modelvalue.id)
  })
},

结束语

这就是我遇到的问题及解决方案，希望本篇博文可以解决你遇到的问题，如果有不明白的博主，或者你也遇到了类似的问题，私信我，我会一一为你进行解答，不收取任何费用，欢迎打扰哦~