async await实战小demo

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第12天，点击查看活动详情

之前学了这么久的promise在项目中一直没有用到，所以缺少了一些实际经验，今天在优化代码的时候发现了一个接口更改的问题，需要用到promise来进行解决，所以做了一个记录。

首先我们明确下需求，我需要调用到俩个接口，俩个接口分别存在俩个函数中发送请求，由于俩个接口都是异步的原因，所以第二个接口加载的时候会获取不到第一个接口的返回值，所以我用promise来进行优化一下

function getData(){
    this.data.api.getNewestActivity().then(async (res)=>{
          let p1 = await this.getActivityTypeProjectByUserId();
          this.getTeamData(p1.bizData.systemProjectInfos[0].id).then(()=>{
            this.findCertificateByUserId();
          });
        }).catch(res => {
        
        }
    })
}

其实过程并不难，只是想简单的记录一下遇到的坑，都是自己太年轻的原因，上面这个写法我是将getNewestActivity中的then函数设为async，然后在函数中设置getActivityTypeProjectByUserId，等待getActivityTypeProjectByUserId的返回

第一个坑是我用的是async放在了getData前面，所以一直没有达到预期的效果，之后才知道应该加到最近的getNewestActivity的then后面，因为这才是getActivityTypeProjectByUserId的函数

第二个坑是我将async写成了匿名函数，由于匿名函数的this指向和箭头函数的this指向不一样，我用this.getTeamData会发生not defined的报错，因为this指向错了所以找不到getTeamData函数

getActivityTypeProjectByUserId: function () {
    let params = {};
    params.activityId = this.data.activityId;
    params.createUserId = wx.getStorageSync('roleData').id;
    this.data.api.getActivityTypeProjectByUserId(params)

我们在上面的函数中通过await等待的是一个异步函数，所以需要有一个promise，但我们只是在函数中调用一个异步接口，函数本身不是异步函数，所以我借鉴了一下其他开发的代码进行改进，我们需要将请求的异步接口return出去，这样的话我们的函数也就是一个异步函数了，我的写法是这样的，如果大家有更好的写法欢迎在评论区指点我一下

let p1 = this.data.api.getActivityTypeProjectByUserId(params)
return p1

这样子我们的getActivityTypeProjectByUserId接口返回的参数就会在函数中返回出去，await会等待这个函数中的异步接口返回，然后return，await发现异步已经结束了就会将异步的回调参数返回被p1接受，这样我们就可以等到函数结束的时候，拿到参数并且继续向下执行，这样第二个函数就能拿到第一个函数的参数了，把俩个异步的函数变成了同步的函数