js中回调函数，promise 以及 async/await 的对比用法 对比！！！

Posted 2022-02-07 teamemory

在编程项目中，我们常需要用到回调的做法来实现部分功能，那么在js中我们有哪些方法来实现回调的？

方法1：回调函数

首先要定义这个函数，然后才能利用回调函数来调用！

login: function (fn) 
    var app = getApp()
      wx.login(
        success: res => 
          let code = res.code;
          wx.getSetting(
            success: res => 
              if (res.authSetting[‘scope.userInfo‘]) 
                wx.getUserInfo(
                  success: res => 
                    console.log(res)
                    var inviteUid = wx.getStorageSync(‘inviteUid‘)
                    let dataMap = new Map();
                    dataMap.set(‘from‘, 3);
                    dataMap.set(‘superiorId‘, inviteUid);
                    dataMap.set(‘code‘, code);
                    dataMap.set(‘encryptedData‘, res.encryptedData);
                    dataMap.set(‘iv‘, res.iv);
                    dataMap.set(‘scene‘, 6);
                    app.get_sign(dataMap, function (...reo) 
                      let [time, version, client, sign] = reo;
                      wx.request(
                        url: app.globalData.url + ‘/api3_1/WxLogin/login‘,
                        data: 
                          time,
                          version,
                          client,
                          sign,
                          from: 3,
                          superiorId: inviteUid,
                          code,
                          encryptedData: res.encryptedData,
                          iv: res.iv,
                          scene: 6
                        ,
                        method: ‘POST‘,
                        header: 
                          ‘content-type‘: ‘application/x-www-form-urlencoded‘
                        ,
                        success: function (res) 
                          console.log(res)
                          var identity_id = res.data.data.identity_id
                          wx.setStorageSync(‘identity_id‘, identity_id)
                          if (res) 
                             fn(res) 
                          
                        
                      )
                    )
                  
                )
              
            
          )
        
    )

  ,

调用

app.login（（res）=>
　　
）

方法2：es6的 promise 

同样，我们先定义一个带有promise的函数

 login: function (fn) 
    var app = getApp()
    return new Promise((resolve, reject) => 
      wx.login(
        success: res => 
          let code = res.code;
          wx.getSetting(
            success: res => 
              if (res.authSetting[‘scope.userInfo‘]) 
                wx.getUserInfo(
                  success: res => 
                    console.log(res)
                    var inviteUid = wx.getStorageSync(‘inviteUid‘)
                    let dataMap = new Map();
                    dataMap.set(‘from‘, 3);
                    dataMap.set(‘superiorId‘, inviteUid);
                    dataMap.set(‘code‘, code);
                    dataMap.set(‘encryptedData‘, res.encryptedData);
                    dataMap.set(‘iv‘, res.iv);
                    dataMap.set(‘scene‘, 6);
                    app.get_sign(dataMap, function (...reo) 
                      let [time, version, client, sign] = reo;
                      wx.request(
                        url: app.globalData.url + ‘/api3_1/WxLogin/login‘,
                        data: 
                          time,
                          version,
                          client,
                          sign,
                          from: 3,
                          superiorId: inviteUid,
                          code,
                          encryptedData: res.encryptedData,
                          iv: res.iv,
                          scene: 6
                        ,
                        method: ‘POST‘,
                        header: 
                          ‘content-type‘: ‘application/x-www-form-urlencoded‘
                        ,
                        success: function (res) 
                          console.log(res)
                          var identity_id = res.data.data.identity_id
                          wx.setStorageSync(‘identity_id‘, identity_id)
                          if (res) 
                     resolve(res)
                          
                        
                      )
                      var userInfo = res.userInfo
                      wx.setStorageSync(‘userInfo‘, userInfo)
                    )
                  
                )
              
            
          )
        
      )
    )

  ,

来来来，这么调用，这里主要是最后通过.then来进行回调的写法

app.login().then((res) => 
       console.log(res);
)

方法3：es6中async / await 

同样，还是先定义函数，这个和方法2其实是一样的定义方法，还是用promise来进行定义一个返回，只是调用这个函数的时候不一样。

login: function (fn) 
    var app = getApp()
    return new Promise((resolve, reject) => 
      wx.login(
        success: res => 
          let code = res.code;
          wx.getSetting(
            success: res => 
              if (res.authSetting[‘scope.userInfo‘]) 
                wx.getUserInfo(
                  success: res => 
                    console.log(res)
                    var inviteUid = wx.getStorageSync(‘inviteUid‘)
                    let dataMap = new Map();
                    dataMap.set(‘from‘, 3);
                    dataMap.set(‘superiorId‘, inviteUid);
                    dataMap.set(‘code‘, code);
                    dataMap.set(‘encryptedData‘, res.encryptedData);
                    dataMap.set(‘iv‘, res.iv);
                    dataMap.set(‘scene‘, 6);
                    app.get_sign(dataMap, function (...reo) 
                      let [time, version, client, sign] = reo;
                      wx.request(
                        url: app.globalData.url + ‘/api3_1/WxLogin/login‘,
                        data: 
                          time,
                          version,
                          client,
                          sign,
                          from: 3,
                          superiorId: inviteUid,
                          code,
                          encryptedData: res.encryptedData,
                          iv: res.iv,
                          scene: 6
                        ,
                        method: ‘POST‘,
                        header: 
                          ‘content-type‘: ‘application/x-www-form-urlencoded‘
                        ,
                        success: function (res) 
                          console.log(res)
                          var identity_id = res.data.data.identity_id
                          wx.setStorageSync(‘identity_id‘, identity_id)
                          if (res) 
                     resolve(res)
                          
                        
                      )
                      var userInfo = res.userInfo
                      wx.setStorageSync(‘userInfo‘, userInfo)
                    )
                  
                )
              
            
          )
        
      )
    )

  ,

咱再来进行调用，这个理论上，你要自己在定义一个新的函数，然后才能用async/await ，可以理解为 await 的等一等，然后就能拿到app.login的返回值，这个方法，在多重回调中就能发挥很大的作用。

async onGotUserInfo(e) 
    let res = await app.login();
    console.log(res);

小结：

如果我们只有一次回调，我们可以用回调函数，也可以用promise，然后用.then来获取值。

如果有多次回掉，那么我们推荐用方法3，这个终极的方案来进行获取回调的值。