微信小程序- Promise 以及 async await 使用示例

╰半橙微兮° 2022-12-02 12:26 301阅读 0赞

# JavaScript 的回调 #

在之前的代码中，我们通过云函数的方式获取`openid`就是使用的回调方式。  
而我们要获取回调中的结果再去处理接下来的操作，只能在对应的回调方法里面写  
这就是常说的死亡回调

getOpenid() { 
       wx.cloud.callFunction({ 
            name: 'getOpenid',
            success: res => { 
              console.log(res.result.openid)
              // 做获取到 openid 的相关操作
            },
            fail: e => { 
             // 做获取不到 openid 的相关操作
             console.log("获取openId 失败")
            },
          })
      }
      // 假如上面的代码肯定能获取到 openid
      // 但是不在 success 里面做获取到的操作，
      // 而在外面做，可能会出现 openid 为空的情况

为了解决这种死亡回调，网上提供了一些方案，如 Promise、async 函数等

相关介绍下面的文章：  
[菜鸟教程：JavaScript Promise 对象][JavaScript Promise]  
[阮一峰：async 函数的含义和用法][async]

下面提供几个示例，仅供参考

# Promise 使用 #

> 相关介绍在代码中，都比较很容易理解

未捕捉异常：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70_pic_center]  
捕捉异常：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70_pic_center 1]  
示例代码：

async testData(){ 
      	// 正确的结果
        const data = await that.testPromise(3)
        console.log("resolve data:",data)
    
        // 异常的结果，如果不捕获异常后面的代码将不会被执行到
        const data1 = await that.testPromise(1)
        console.log("resolve data:",data1)
        
        // 异常的结果，捕捉异常
        try{ 
          const data2 = await that.testPromise(1)
          console.log("reject try data:",data2)
        }catch(e){ 
          console.log("reject catch data:",e)
        }
    
    	// 通过 promise 的 then catch 获取结果
        that.testPromise(1).then( res =>{ 
          console.log("reject1 then data:",res)
        }).catch(e =>{ 
          console.log("reject1 catch data:",e)
        })
       
      },
      
    testPromise(number){ 
        return new Promise((reslove,reject) =>{ 
          if(number > 1){ 
            reslove(0)
          }else{ 
            reject("传入的数据小于1")
          }
        })
      },

# 参考 #

*  [菜鸟教程：JavaScript Promise 对象][JavaScript Promise]
 *  [阮一峰：async 函数的含义和用法][async]

[JavaScript Promise]: https://www.runoob.com/w3cnote/javascript-promise-object.html
[async]: http://www.ruanyifeng.com/blog/2015/05/async.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/2e08ba9d2c3a4535ae4d38fabbce8843.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/e81dd4eaa20940feb628d4dd683d2fff.png