Promise - js异步控制神器

微信小程序开发交流qq群 581478349

承接微信小程序开发。扫码加微信。

正文：

首先给来一个简单的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、 style="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.openidresolve(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 = thisconst syncArr = []const url = util.apiUrl + 'Index/index_show?program_id=' + app.program_idutil.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, '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
})
})
})
},

// 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) / 100resolve(distance)},fail() {resolve('')}})
})
}
module.exports = {map: map,
}

Promise - js异步控制神器相关推荐

码农干货系列【17】--Wind.js与Promise.js
示例先引入wind.js与promise.js: <script src="wind-all-0.7.3.js"></script> <script ...
ERROR:Module not found: Error: Can‘t resolve ‘core-js/modules/es.promise.js‘ in ‘address‘
遇到的问题: ERROR in ./src/main.js 8:0-45 Module not found: Error: Can't resolve 'core-js/modules/es.prom ...
这可能是全网最详细的Node.js编程
NodeJS起步下载安装下载历史版本 windows下安装过程: 此安装路径尽量不要改对于已经装过的,重新安装就会升级安装成功后,打开命令行,输入 node --version 或者 nod ...
promise then err_Promise 原理解析与实现(遵循Promise/A+规范)
1什么是Promise? Promise是JS异步编程中的重要概念,异步抽象处理对象,是目前比较流行Javascript异步编程解决方案之一 2对于几种常见异步编程方案回调函数事件监听发布/订阅 ...
Promise 原理解析与实现(遵循Promise/A+规范)
1.什么是Promise? Promise是JS异步编程中的重要概念,异步抽象处理对象,是目前比较流行Javascript异步编程解决方案之一 2.对于几种常见异步编程方案回调函数事件监听发布/ ...
实现一个符合 Promise/A+ 规范的 MyPromise
Promise 实现一个符合 Promise/A+ 规范的 MyPromise,并实现 resolve.reject.all.race.defer.deferred等静态方法. MyPromise 作 ...
JavaScript异步编程【中】 -- Promise 详细解析
文章内容输出来源:拉勾教育大前端高薪训练营前言在ES6中,新增加了一种异步编程的解决方案Promise,它是一种规范,是一套处理JavaScript异步的机制. Promise的含义简单来说, ...
AngularJS 使用 Promise
如何在 AngularJS 中使用 Promise 要在 AngularJS 中使用 Promise, 要使用 AngularJS 的内置服务 $q. 我们可以先使用 $q 的 defer() 方法创 ...
关于Promise详解
异步回调回调地狱在需要多个操作的时候,会导致多个回调函数嵌套,导致代码不够直观,就是常说的回调地狱并行结果如果几个异步操作之间并没有前后顺序之分,但需要等多个异步操作都完成后才能执行后续的任务 ...

Promise - js异步控制神器

承接微信小程序开发。扫码加微信。

正文：

Promise - js异步控制神器相关推荐

最新文章

热门文章