如果对您有帮助，请关注我，欢迎加入微信小程序开发交流QQ群（173683866），有问题可以加群问我或者问群里的大神！！！
首先给来一个简单的demo看看Promise是怎么使用的：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
var myPromise;
function my_load() {
return myPromise = new Promise(function(resolve,reject) {
//当异步代码执行成功时，我们才会调用resolve(...),当异步代码失败时就会调用reject(...)
//在本例中，我们使用setTimeout(...)来模拟异步代码，实际编码时可能是XHR请求或是HTML5的一些API方法.
setTimeout(function() {
resolve("myPromise的resolve执行完毕!"); //代码正常执行！
},5000);
});
}
</script>
</head>
<body onload="my_load()">
<div、 color: red; height: 100px;width: 100px;" onclick="test_1(this)">
测试
</div>
<script>
function test_1(e) {
//当myPromise的resolve执行完毕以后下面才会执行
myPromise.then(function(resolve_finish) {
//resolve_finish随便命名，的值是上面调用resolve()方法传入的值.
alert(resolve_finish);
});
}
</script>
</body>
</html>
下面提供两个示例,都是我在实际项目中使用的代码,如果有不足或理解不对还请批评指正.另外欢迎大家加入微信小程序开发交流群(173683895)
解决方案: 使用Promise对象,它是用来传递异步操作的消息的.它有三种状态,Pending(进行中) Resolved(已完成) Rejected(已失败). 这三种状态是由异步操作的结果来决定的.并且执行完成后无法更改,
实战示例一,
需求:我们有两个函数异步执行的情况下,
1.第一个函数是获取用户的openid(唯一标识),
2第二个函数是根据第一个函数获取到的openid的值做下一步操作,
在异步执行的情况下,由于网络请求是需要时间的,所以需要使用Promise对象来保证第一个函数的网络请求执行完了再执行第二个函数;
第一个函数: 重点是
return that.promise = new Promise((resolve) => {resolve(data.openid)}
函数解析:执行onLaunch函数返回一个promise对象,promise对象的resolve状态里面输入一个data.openid参数,
App({
onLaunch: function () {
var that = this;
that.appid = '';
that.secret = '';
that.program_id = '';
// that.openid = 'cvzc'
return that.promise = new Promise((resolve) => {
wx.login({
success: function (res) {
that._code = res.code;
wx.request({
//获取openid接口
url: 'info',
data: {
code: res.code,
appid: that.appid,
secret: that.secret
},
method: 'post',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: function (res) {
var data = JSON.parse(res.data)
that.openid = data.openid
resolve(data.openid)
}
})
}
})
})
}
})
第二个函数:需求:循环的后续操作必须等所有异步请求都返回了才继续下一步操作
app.promise.then(function (openid) {
函数解析: 这里调用了app.js里面的promise对象,参数就是第一个函数网络请求得到的用户唯一标识(openid),{ //这里面是得到唯一标识以后执行的代码 }
// pages/login/lunh.js
const app = getApp();
const util = require("../../utils/util.js")
Page({
data: {
},
onLoad: function (options) {
var that = this;
app.promise.then(function (openid) {
var data = {
program_id: app.program_id,
openid: openid
}
util.request('demo.php','get',data,'正在加载数据',function (res) {
wx.setStorageSync('btn',res.data.as_id)
if (res.data.state == 1) {
wx.switchTab({
url: '../index/index',
})
} else {
wx.navigateTo({
url: 'login',
})
}
})
// success
},function (openid) {
// failure
});
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
实战示例二,
获取用户手机本地的地址并计算出本地地址到指定地址的距离,单位米:
// index.js
const app = getApp()
const util = require("../../utils/util.js")
const qqmap = require("../../utils/qqmap-wx-jssdk.js")
var qqmapsdk;
data_list: function () {
const that = this
const syncArr = []
const url = util.apiUrl + 'Index/index_show?program_id=' + app.program_id
util.request(url,'post','',function (res) {
for (let i = 0; i < res.data.k4.length; i++) {
syncArr.push(util.map(res.data.k4[i].sh_jd))
}
Promise.all(syncArr).then(results => {
for (let j = 0; j < results.length; j++) {
res.data.k4[j].sh_jd = results[j]
}
that.setData({
arr: res.data,
lunbo: res.data.k1,
images: res.data.k2,
nearby_merchant: res.data.k4
})
})
})
},
// 加载数据列表
const app = getApp()
const util = require("../../utils/util.js")
const qqmap = require("../../utils/qqmap-wx-jssdk.js")
var qqmapsdk;
data_list: function () {
const that = this
const syncArr = []
const url = 'demo.php?program_id=' + app.program_id
util.request(url,function (res) {
for (let i =0; i < res.data.k4.length; i++) {
syncArr.push(util.map(res.data.k4[i].sh_jd))
}
Promise.all(syncArr).then(results => {
for (let j =0; j < results.length; j++) {
res.data.k4[j].sh_jd = results[j]
}
that.setData({
arr: res.data,
// util.js
var qqmapsdk = new qqmap({
key: 'WFLBZ-ABRHX-A474W-75TT3-L2NZF-VAF5Q'
});
return new Promise((resolve) => {
const latitude = data.split(',')
qqmapsdk.calculateDistance({
to: [{
latitude: latitude[0],
longitude: latitude[1]
}],
success(res) {
const distance = Math.floor(res.result.elements[0].distance / 1000 * 100) / 100
resolve(distance)
},
fail() {
resolve('')
}
})
})
}
module.exports = {
map: map,
}
