例子:
myAsyncFunc: function () {
return new Promise(function (resolve, reject) {
setTimeout(function () {
console.log("myAsyncFunction done!");
resolve({ data: "Hello,World" });
}, 2000);
});
},myAsyncFunc2: function () {
return new Promise(function (resolve, reject) {
setTimeout(function () {
console.log("myAsyncFunction2 done!");
resolve({ data: "I am coming" });
}, 2000);
});
},doit: async function () {var res = await this.myAsyncFunc();
console.log(" res: " + res.data);
var res2 = await this.myAsyncFunc2();
console.log(" res2: " + res2.data);
return res2.data + res.data ;
},
调用的时候
onLoad: function(options) {this.doit().then(res => {
console.log(' onLoad: ' + res);
})
}
【微信小程序 异步阻塞(Promise、resolve,await,then)】打印结果:
文章图片
本文中下面的代码直接来源与直接项目中,所以无法直接拷贝使用!
1.调用的的函数 获取用户信息(new Promise(function (resolve, reject)resolve({ data: ‘xxxx’ }); )
/**
* 获取openid信息
* add by wp 20180906
*/
getOpenId: function() {
return new Promise(function (resolve, reject) {
var openId = '';
var seKey = '';
// 登录
let that = this;
wx.login({
success: function (res) {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
if (res.code) {
//发起网络请求
wx.request({
url: util.url.baseUrl + 'wxpro/jscode2session',
data: {
appid: util.appConfig.appId,
secret: util.appConfig.secret,
js_code: res.code,
grant_type: util.appConfig.grantType,
},
header: {
"Content-Type": "application/x-www-form-urlencoded"
},
method: 'POST',
success: function (result) {
if(result.data.code == 0){
seKey = result.data.msg.session_key;
openId = result.data.msg.openid;
wx.setStorageSync(util.key.openId, openId);
wx.setStorageSync(util.key.seKey, seKey);
resolve({ data: openId });
}else{
return wx.showToast({
title: '请求失败',
icon: 'none',
duration: 2000
})
}},
fail: function (res) {
return wx.showToast({
title: '请求失败',
icon: 'none',
duration: 2000
});
}
})
} else {
console.log('--获取openid失败--');
}},
fail: function (res) {
console.log('微信登录失败');
}
})
});
},
2. 获取地址位置信息(new Promise(function (resolve, reject)resolve({ data: ‘xxxx’ }); )
function getLocation(ck) {
return new Promise((resolve, reject)=>{
const app = getApp();
wx.getLocation({
type: appConfig.locType,
success: function(res) {
var lat = res.latitude;
var lng = res.longitude;
log(TAG, 'lat=' + lat + ",lng=" + lng);
if (lat == 'undefined' || lng == 'undefined') return;
wx.request({
url: url.locInfo(lat, lng),
method: 'GET',
success: function(res) {
if (res) {
var cityInfo = res.data.result.addressComponent;
var cityCode = String(cityInfo.adcode).substring(0, 4).concat('00');
var cityName = cityInfo.city;
wx.setStorageSync(key.cityName, cityName);
wx.setStorageSync(key.cityCode, cityCode);
app.globalData.baseInfo.cityCode = cityCode;
app.globalData.baseInfo.cityName = cityName;
resolve({ data: cityCode });
if(ck && ck.success)ck.success(cityName, cityCode);
} else {
// ck.fail(res);
log("Error", "loc fail...");
}},
fail: function(res) {
ck.fail(res);
log("Error", res.errMsg);
}
})
},
fail:function(res){
log(TAG,'获取经纬度失败~');
},})
});
}
3.获取用户信息(new Promise(function (resolve, reject)resolve({ data: ‘xxxx’ }); )
getBaseUserInfo(){
return new Promise(function (resolve, reject) {
var openId = wx.getStorageSync(util.key.openId);
//用户id
var cityCode = wx.getStorageSync(util.key.cityCode);
if(!cityCode)return;
if (openId == '') return;
let that = this;
wx.request({
url: util.url.baseUrl + 'wxpro/getUserInfo',
data: {
openId: openId,
cityCode: cityCode
},
header: {
"Content-Type": "application/x-www-form-urlencoded"
},
method: 'POST',
success: function (res) {
console.log(res.data);
if (res.data.code == 0 || res.data.code == 1) {
wx.setStorageSync(util.key.bindStatus, res.data.msg.bindStatus ? res.data.msg.bindStatus : '0');
var bindStatus =wx.getStorageSync(util.key.bindStatus);
if (bindStatus == 0) wx.navigateTo({ url: '../login/login'});
resolve({ data: bindStatus });
}
else{
// return wx.showToast({
//title: '获取用户信息失败,错误码:'+res.data.code,
//icon: 'none',
//duration: 2000
// })
}
}
})
});
}
4.异步阻塞函数响应处理(await)
//异步阻塞操作 add by wupeng 20180925
start: async function () {
//获取openid
var openId = wx.getStorageSync(util.key.openId);
//用户id
if (openId == '') {
await app.getOpenId();
}//获取获取城市代码
var cityCode = wx.getStorageSync(util.key.cityCode);
if (!cityCode) {
await util.getLocation();
}//获取绑定状态
var bindStatus = await app.getBaseUserInfo();
//获取证书
var ctf = wx.getStorageSync(util.key.ctf);
if (util.isNull(ctf)){
await this.loadCtf();
}return bindStatus.data;
},
5.在onload中执行调用 (this.start().then(res =>)
onLoad: function(options) {
var bindStatus = app.globalData.baseInfo.bindStatus || wx.getStorageSync(util.key.bindStatus);
console.log(TAG + ' onLoad: ' + bindStatus);
if ( 0 == bindStatus){
this.start().then(res => {
var city = options.city || wx.getStorageSync(util.key.cityName);
this.setData({
loc: {
addr: city,
}
});
if (!options.flag) this.loadCtf();
this.flushQRCode();
this.loadNotify();
this.loadAds();
this.getPhoneHeight();
})
}else{
var city = options.city || wx.getStorageSync(util.key.cityName);
this.setData({
loc: {
addr: city,
}
});
if (!options.flag) this.loadCtf();
this.flushQRCode();
this.loadNotify();
this.loadAds();
this.getPhoneHeight();
}
},
推荐阅读
- react|react-native支付宝,微信支付对接接口
- 前端|Taro安装步骤
- 原生JS实现移动端轮播图。
- 1px问题|vue解决移动端1px边框的问题 border.css
- 仿京东移动端手指拨动切换轮播图效果
- 移动端|移动端 touch事件 过渡事件 动画事件