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

在编程项目中,我们常需要用到回调的做法来实现部分功能,那么在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,这个终极的方案来进行获取回调的值。

原文地址:https://www.cnblogs.com/teamemory/p/11076141.html

时间: 2024-12-21 18:58:01

js中回调函数,promise 以及 async/await 的对比用法 对比!!!的相关文章

node.js 中回调函数callback(转载),说的很清楚,看一遍就理解了

最近在看 express,满眼看去,到处是以函数作为参数的回调函数的使用.如果这个概念理解不了,nodejs.express 的代码就会看得一塌糊涂.比如: 复制代码 代码如下: app.use(function(req, res, next) { var err = new Error('Not Found'); err.status = 404; next(err); }); app是对象,use是方法,方法的参数是一个带参的匿名函数,函数体直接在后面给出了.这段代码怎么理解呢?我们先来了解

js中回调函数的三种写法

回调函数的三种写法: 1.通过指针来调用 2.通过匿名函数来调用 3.定义与执行同时进行 // 通过指针来调用 function math(num1,num2,callback){ return callback(num1 , num2); } function aa(num1,num2){ return num1 + num2; } function bb(num1,num2){ return num1 - num2; } console.log( math(2,1,aa) ); // 3 c

JS中回调函数的简单用法

a能拿b,b能拿到c,c能拿到d,实现a拿到d的东西. function a() { b(function (data) { console.log(data); }); } function b(cb) { c(function (data) { cb(data); }); } function c(cb) { d(function (data) { cb(data); }); } function d(cb) { setTimeout(() => { let data = "彩虹&qu

JS中回调函数的使用

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> Array.prototype.each = function(callback){ if(typeof callback === 'functio

node.js异步控制流程 回调,事件,promise和async/await

写这个问题是因为最近看到一些初学者用回调用的不亦乐乎,最后代码左调来又调去很不直观. 首先上结论:推荐使用async/await或者co/yield,其次是promise,再次是事件,回调不要使用. 接下来是解析,为什么我会有这样的结论 首先是回调,理解上最简单,就是我把任务分配出去,当你执行完了我就能从你那里拿到结果执行相应的回调, 这里演示一个对setTimeout的封装,规定时间后打印相应结果并执行回调函数 并且这个函数传给回调函数的参数符合node标准,第一个为error信息,如果出错e

callback vs async.js vs promise vs async / await

需求: A.依次读取 A|B|C 三个文件,如果有失败,则立即终止. B.同时读取 A|B|C 三个文件,如果有失败,则立即终止. 一.callback 需求A: let read = function (code) { if (code) { return true; } else { return false; } } let readFileA = function (callback) { if (read(1)) { return callback(null, "111");

重构:从Promise到Async/Await

摘要: 夸张点说,技术的发展与历史一样,顺之者昌,逆之者亡.JS开发者们,赶紧拥抱Async/Await吧! GitHub仓库: Fundebug/promise-asyncawait 早在半年多之前,我就在鼓吹Async/Await替代Promise的6个理由,似乎还招致了一些批评.然而,直到最近,我才真正开始进行代码重构,抛弃Promise,全面使用Async/Await.因为,Node 8终于LTS了! Async/Await真的比Promise好吗? 是的是的. 这些天,我大概重构了10

JS之——回调函数的简单应用(插曲)

转载请注明出处:http://blog.csdn.net/l1028386804/article/details/46274893 JS无疑是前端页面与服务端交互数据的强大语言,那么如何利用JS的回调函数来封装JS的网络请求呢,本文就来简单说明这一问题 一.创建一个index.html文件 页面内容随便定义,重点是要引入如下自定义的两个js文件,一个是constants.js一个是validate.js 二.创建constants.js文件 /** * Created by liuyazhuan

JS中的函数、Bom、DOM及JS事件

本期博主给大家带来JS的函数.Bom.DOM操作,以及JS各种常用的数据类型的相关知识,同时,这也是JavaScript极其重要的部分,博主将详细介绍各种属性的用法和方法. 一.JS中的函数 [函数的声明及调用] 1.函数声明的格式: function 函数名(参数1,参数2,参数3,--){//函数体 return 结果; } >>>函数的调用格式: 直接调用:函数调用的格式:函数名(参数一的值,参数二的值,--): 事件调用:事件名=函数名( ); 2.函数声明的几点强调: ①函数名