【前端】优化异步方法async---异步同步问题

         前言

存在问题的代码   

 一、业务场景

二、存在的问题

三、修改思路

优化后的代码

一、抽离方法，定义为async方法

二、主方法体

小结

---

前言

     小编之前做过一个抽奖的功能，其中使用http协议请求后端方法，当时虽然知道这是一个异步的方法，但是并没有过多的考虑，没想到一位大神发现了其中存在的漏洞和隐患，便指导了去如何修改优化，在这个过程中，也是加深了自己对于异步同步概念的理解，以及哪些地方使用到了异步同步。

存在问题的代码   

 一、业务场景

1.  抽奖功能，点击抽奖后，请求后端，之后返回给前端结果：成功或失败

2.  区别点：http协议中有Status状态码、还有response的数据，其中response数据里面有后台封装的数据结构（code/msg/data）

（1）status状态码：200 ，它只能说明和服务器连接状态正常，并不能说明请求的结果是否成功或失败；

（2）response中的code:执行方法的结果码，可以说明执行结果的成功与失败，一般定义“0000”成功、“1111”失败；

3.具体代码

 const alert = await this.alertController.create({
                header: '是否购买抽奖机会?',
                message: '将消耗您5积分！',
                buttons: [
                    {
                        text: '取消',
                        role: 'cancel',
                        handler: () => { }
                    },
                    {
                        text: '购买',
                        handler: async () => {
                            this.loginID = localStorage.getItem('userId');
                            this.loginName = localStorage.getItem('userName');
                            const dataUrl = 'game-web/lotteryChance/exchangeLotteryChange/' + this.loginID + '/' + this.loginName;
                         // 存在问题代码---开始  
                            this.http.get(dataUrl).subscribe(
                                res => { 
                                                                       
                                        this.flag = res.json();                                   
                                });
                                if (this.flag === true) {
                                    const alert1 = await this.alertController.create({
                                        header: '',
                                        subHeader: '购买成功',
                                        buttons: [
                                            {
                                                text: '我已了解~',
                                                handler: () => {
                                                    this.getLotteryChance();
                                                }
                                            }
                                        ],
                        
                        
                                    });
                                    await alert1.present();
                                } else {
                                    const alert3 = await this.alertController.create({
                                        header: '',
                                        subHeader: '购买失败,请刷新重试',
                                        buttons: ['我已了解~']
                                    });
                                    await alert3.present();
                                }
                            //存在问题代码---结束

                        }

                    }
                ]
            });
            await alert.present();

二、存在的问题

   上面的代码中，小编标识了有问题的代码块，这个代码块中存在两个方法，一个是http请求接口，另一个是根据this.flag结果执行的代码块。

   http请求后端的方法是异步方法，它下面的方法不用等待它的返回结果，就可以执行，如此一来，this.flag的结果就出现问题。

三、修改思路

1.将if...else..放在res=>()中，结果await this.alertController.create()需要异步方法；

2.所以改变修改思路，将if..else..方法抽离成一个异步方法。

优化后的代码

一、抽离方法，定义为async方法

/**
     * 抽出购买抽奖机会的方法体，实现异步方法async
     * @param flag 
     * @author 冯浩月
     * @since 2019年3月5日07:46:40
     */
    async IsbuyChance(flag: any) {

        if (flag === true) {
            const alert1 = await this.alertController.create({
                header: '',
                subHeader: '购买成功',
                buttons: [
                    {
                        text: '我已了解~',
                        handler: () => {
                            this.getLotteryChance();
                        }
                    }
                ],


            });
            await alert1.present();
        } else {
            const alert3 = await this.alertController.create({
                header: '',
                subHeader: '购买失败,请刷新重试',
                buttons: ['我已了解~']
            });
            await alert3.present();
        }
    }

二、主方法体

 const alert = await this.alertController.create({
                header: '是否购买抽奖机会?',
                message: '将消耗您5积分！',
                buttons: [
                    {
                        text: '取消',
                        role: 'cancel',
                        handler: () => { }
                    },
                    {
                        text: '购买',
                        handler: async () => {
                            this.loginID = localStorage.getItem('userId');
                            this.loginName = localStorage.getItem('userName');
                            const dataUrl = 'game-web/lotteryChance/exchangeLotteryChange/' + this.loginID + '/' + this.loginName;
                            this.http.get(dataUrl).subscribe(
                                res => {
                                    if (res.json().code ==='50001' ) {
                                        this.flag = false;
                                    } else {
                                        this.flag = res.json();
                                    }
                                 // 调用抽离的异步方法   
                                 this.IsbuyChance(this.flag);
                                });

                        }
                    }
                ]
            });
            await alert.present();
        

 

小结

      通过这个优化的过程，明确了后端封装result体，也是非常重要的，前端接收结果时，也要注意判断code码，不要不处理。同时也感谢大神的帮助指导，让我对于深入思考和对http协议的认识更加深入，抽离方法体的切入点也更加明确。

                                                                           感谢您的访问！