用户
 找回密码
 立即注册

QQ登录

只需一步，快速开始

扫一扫，登录网站

搜索
小程序社区 › 首页 › 教程 › 查看内容

在微信小程序的JS脚本中使用Promise来优化函数处理

Rolan 2017-8-29 00:17

5644

在我们传统的Javascript开发函数编写中，我们习惯了回调函数的处理，不过随着回调函数的增多，以及异步处理的复杂性等原因，代码越来越难读，因此诞生了使用Promise来优化JS函数处理的需求，引入Promise确实能够很好 ...

在我们传统的Javascript开发函数编写中，我们习惯了回调函数的处理，不过随着回调函数的增多，以及异步处理的复杂性等原因，代码越来越难读，因此诞生了使用Promise来优化JS函数处理的需求，引入Promise确实能够很好的解决异步回调函数的可读性等问题，同时也使得我们调用的时候代码简洁一些，本文介绍如何在小程序的JS代码里面使用Promise来封装一些函数的做法。

1、小程序传统的回调处理

例如我们生成一个小程序，里面的app.js里面就自动带有一个getUserInfo的函数，这个是使用传统模式的回调函数。

  1. //app.js
  2. App({
  3.   onLaunch: function () {
  4.     //调用API从本地缓存中获取数据
  5.     var logs = wx.getStorageSync('logs') || []
  6.     logs.unshift(Date.now())
  7.     wx.setStorageSync('logs', logs)
  8.   },
  10.   getUserInfo:function(cb){
  11.     var that = this
  12.     if(this.globalData.userInfo){
  13.       typeof cb == "function" && cb(this.globalData.userInfo)
  14.     }else{
  15.       //调用登录接口
  16.       wx.login({
  17.         success: function () {
  18.           wx.getUserInfo({
  19.             success: function (res) {
  20.               that.globalData.userInfo = res.userInfo
  21.               typeof cb == "function" && cb(that.globalData.userInfo)
  22.             }
  23.           })
  24.         }
  25.       })
  26.     }
  27.   },
  28.   globalData:{
  29.     userInfo: null,
  30.     openid: null
  31.   }
  32. })

这种是通过 传入一个cb的回调函数进行处理，使用的时候为了安全性，还需要进一步判断其类型是否为函数：typeof cb == "function"，这种处理还是相对比较易懂。

但是，如果我们一段代码中，异步操作太多，又要保证这些异步操作是有顺序的执行，那我们的代码就看起来非常糟糕，就像这样的极端情况：

  1. asyncFunc1(function(){
  2.   //...
  3.   asyncFunc2(function(){
  4.     //...
  5.     asyncFunc3(function(){
  6.       //...
  7.       asyncFunc4(function(){
  8.         //...
  9.         asyncFunc5(function(){
  10.            //...
  11.         });
  12.       });
  13.     });
  14.   });
  15. });

如果我们改用Promise来处理，那么进行一层简单的包装即可。

  1. function asyncFunc1(){
  2.   return new Promise(function (resolve, reject) {
  3.     //...
  4.   })
  5. }

2、Promise的使用介绍

Promise的使用相对比较简单，我们入门可以参考下相关介绍：阮一峰 promise入门，如果我们在JS函数里面引入它的话，那么需要包含对应的javascript组件

我们可以在Github上下载对应的组件JS，引入小程序项目即可：es6-promise

我们为了方便，在项目中创建一个辅助类utils.js，然后在其中引入Promise的脚本，如下所示。

const Promise = require('./Promise') 
然后在APP.js里面，我们修改原来的getUserInfo函数如下

  1. //app.js
  2. const utils = require('./utils/util.js')
  4. App({
  5.     onLaunch: function() {
  6.         //调用API从本地缓存中获取数据
  7.         var logs = wx.getStorageSync('logs') || []
  8.         logs.unshift(Date.now())
  9.         wx.setStorageSync('logs', logs)
  10.     },
  12.     getUserInfo() {
  13.         return new utils.Promise((resolve, reject) => {
  14.             if (this.globalData.userInfo) {
  15.                 resolve(this.globalData.userInfo)
  16.             }
  17.             return utils.getUserInfo().then(res => {
  18.                 resolve(this.globalData.userInfo = res.userInfo)
  19.             })
  20.         })
  21.     },
  23.     //获取系统信息
  24.     getSystemInfo() {
  25.  
                 
                邀请 
              
     
               
              
     
            
             
                        
     
              
    

    


鲜花
    
                鲜花                    
    		



鸡蛋
    
                鸡蛋                    
    		

    

    



 
            
    
            
    

    
分享至 :


QQ空间

    


收藏

    
            
     
                        
     
              在微信小程序中使用富文本转化插件wxParse 
              微信小程序--后台数据管理实现商品数据的动态展示、维护 
            
    
             
            
    
                  原作者: 伍华聪 
                  来自: 博客园 
                   
                   
                              
    
            
    

     
            
                        
    
              
    
                
    相关阅读
    
              
    
              
    
                
              
    
            
    
             
            
          
          
     
        
      
       
       
      
        
    
    
    
     
    

    

    


    

    
                
    



    		


    









                
    

    
           
    
    
    
    
    
    

   
    
         

    
    
 
       
      
     
    
  
  
    
    
    

    推荐教程