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

2022-11-21,,,,

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

如何一个函数返回的是promise对象,则调用这个函数即可用.then()来拿到回调的值。

如果一个函数本身返回的是promise对象,那么我们除了用.then()来拿到回调的值,也可以用await  来等一等,然后就能拿到这个回调的值,当然前提是本身外面需要async这个值来进行修饰!

js中回调函数,promise 以及 async/await 的对比用法 对比!!!的相关教程结束。

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

下载本文的Word格式文档,以方便收藏与打印。