当前位置：首页 > 编程日记 > 正文

Promise - js异步控制神器

编程日记 2024-08-13 13:30:00

微信小程序开发交流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,
}

https://www.dkcj.cn/info/14085.html

lab_2 Selenium

1、安装SeleniumIDE插件添加组件-搜索Selenium IDE 安装后重启浏览器可以看到工具中存在此IDE 2、学会使用SeleniumIDE录制脚本和导出脚本工具--Selenium IDE，得到界面如图以百度搜索天津大学为例，如下图红色的是录制按钮，base url是当前…

编程日记2024/08/13 13:20:00

android进度指示器_等待的痛苦—浏览进度指示器地狱的7个级别

android进度指示器by Mike Zetlow由Mike Zetlow 等待的痛苦—浏览进度指示器地狱的7个级别 (The Pain of Waiting — Navigating the 7 Levels of Progress Indicator Hell) How much hell are you willing to put your users through?您愿意让用户承受多少痛苦？ …

编程日记2024/08/13 13:10:00

Oracle基础动态SQL语句

一、静态SQL和动态SQL的概念。 1、静态SQL 静态SQL是我们常用的使用SQL语句的方式，就是编写PL/SQL时，SQL语句已经编写好了。因为静态SQL是在编写程序时就确定了，我们只能使用SQL中的DML和事务控制语句，但是DDL语句，以及…

编程日记2024/08/13 13:00:00

dataTables常用参数

一、新版本和老版本的区别新版本的改进：https://datatables.net/new/1.10 新老版本参数变化列表：http://datatables.club/upgrade/1.10-convert.html 老版本参数列表： http://legacy.datatables.net/usage/features http://legacy.datatable…

编程日记2024/08/13 12:50:00

[微信小程序]获取用户当前的城市

有问题可以扫码加我微信，有偿解决问题。承接小程序开发。微信小程序开发交流qq群 173683895 、 526474645 ； 正文： // 获取用户当前位置的名称和城市 util.jsfunction location() {// 实例化腾讯位置服务里面微信小程序JS SDK的API核心…

编程日记2024/08/13 12:40:00

构建一个react项目_您想要了解更多有关React的内容吗？让我们构建一个游戏，然后玩。...

构建一个react项目by Samer Buna通过Samer Buna 您想要了解更多有关React的内容吗？ 让我们构建一个游戏，然后玩。 (Do you want to learn more about React? Let’s build — and then play — a game.) Update: This article is now part of my book …

编程日记2024/08/13 12:30:01

vijos 1476 旅游规划题解

题目链接：https://vijos.org/p/1476 解：因为这一定是一棵树，所以我们多画几次图，就会发现所有的最长路径中心点都一样，且中心点把这条最长路径分成两段等长的路。那么做法就很简单啦，先求出图的最长路径长…

编程日记2024/08/13 12:20:00

JQ实现导航效果(附效果图)

微信小程序开发交流qq群 581478349 承接微信小程序开发。扫码加微信。正文： 为了不浪费大家时间, 首先来一张效果图看是不是你需要的下面是完整的代码和详细的注释. 直接copy就可以用了. html <div id"tab" class"tab"><div…

编程日记2024/08/13 12:10:00

.NET如何从配置文件中获取连接字符串

一.设置配置文件 <configuration><connectionStrings><add name"连接名" connectionString"连接字符串"/>…

编程日记2024/08/13 12:00:00

javascript 代码_如何使您JavaScript代码保持简单并提高其可读性

javascript 代码by Leonardo Lima莱昂纳多利马(Leonardo Lima) 如何使您JavaScript代码保持简单并提高其可读性 (How to keep your JavaScript code simple and increase its readability) After a few years working almost exclusively with Ruby on Rails and some jQuery,…

编程日记2024/08/13 11:50:00

《转》Python学习(14)-对文件的操作（一）

转自 http://www.cnblogs.com/BeginMan/p/3166644.html 一、文件对象我理解的文件对象就是一个接口，通过这个接口对文件进行相关操作。《Python 核心编程》上说的很晦涩，这里没有深刻理解到，希望有人能解释给我听。 >>> f open(d…

编程日记2024/08/13 11:40:00

[微信小程序]组件化开发,以一个自定义模块框组件当做示例(附完整示例代码和效果图)

微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。正文： 自定义组件我把它分为简单的三个步骤, 1.创建组件 --- 2.编写组件 --- 3.调用,使用组件. 第一步:创建组件创建一个modal文件夹,里面包含 josn.wxml.wcss.js 四个文件,然后在jo…

编程日记2024/08/13 11:30:00

openstack安装在虚拟机上重启之后无法启动问题

http://www.byywee.com/page/M0/S931/931767.html 运行rejoin-stack.sh脚本的核心： exec screen -c $TOP_DIR/stack-screenrc stack-screenrc文件存储启动的信息： 例如trove的启动 screen -t tr-api bash stuff "/usr/local/bin/trove-api --config…

编程日记2024/08/13 11:20:00

让我们讨论一下变量，以及为什么要在JavaScript中使用它们。

by Zell Liew由Zell Liew 让我们讨论一下变量，以及为什么要在JavaScript中使用它们。 (Let’s talk about variables — and why you should use them in JavaScript.) The main purpose of coding is to solve problems. For example, what happens when you clic…

编程日记2024/08/13 11:10:00

Services(服务)

开启服务有两种方式： 如果不会可以看老师的百度音乐盒的案例1、start方式：start方式的生命周期：*服务只会被开启一次，直到用户手动停止服务才会被销毁*开启需要调用startService 会执行onCreate(),onStartCommand() *注&…

编程日记2024/08/13 11:00:00

[敏捷开发实践]（2）用于开发和维持复杂产品的敏捷开发框架Scrum

[敏捷开发实践]（2） 用于开发和维持复杂产品的敏捷开发框架Scrum 1，Scrum概述上篇中提到敏捷开发有两种主流的方法，一个是XP，另一个是Scrum，本篇简要介绍Scrum方法。Scrum是一套开发和维护复杂产品的框架或…

编程日记2024/08/13 10:50:00

js 实现多选框(复选框) 和单选框,下拉框功能完整示例代码附效果图

<!DOCTYPE html> <html><head><meta charset"utf-8" /><script src"http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script><title>单选框,复选框,下拉菜单简单示例</title></head…

编程日记2024/08/13 10:40:00

ruby on rails_我成为了Ruby on Rails和React的贡献者，你也可以

ruby on railsI am really grateful to have contributed to a few open source projects, including two I currently use on a regular basis: Ruby on Rails and React.我非常感谢为一些开源项目做出了贡献，其中包括我目前定期使用的两个项目： Ruby o…

编程日记2024/08/13 10:30:00

MySQL加密算法

1.不可逆加密： PASSWORD()，ENCRYPT(，)，MD5()，SHA5()。 2.可逆的加密算法： ENCODE(,) DECODE(,)：加密解密字符串。该函数有两个参数：被加密或解密的字符串和作为加密或解密基础的密…

编程日记2024/08/13 10:20:00

js回调函数和函数带参数的使用示例

微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 //demo1 <html><head><meta charset"UTF-8"><script src"http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script></head>&…

编程日记2024/08/13 10:10:00

mvc-3模型和数据(1)

MVC和命名空间 var User function(atts) {this.attribute atts || {}; } //和具体user相关的方法 User.prototype.destroy function() {}; //和具体user不相关的函数和变量 User.fetchRemove function() {}; var user new User({name:jinks}); user.destroy();构建对象关系…

编程日记2024/08/13 10:00:00

初步了解：使用JavaScript进行表达式（De Do Do Do，De Da Da Da）

by Donavon West由Donavon West 初步了解：使用JavaScript进行表达式(De Do Do Do，De Da Da Da) (A first look: do expressions in JavaScript (De Do Do Do, De Da Da Da)) This article is not about about the The Police’s 1980 hit song from alb…

编程日记2024/08/13 09:50:00

div 下的img水平居中

设置text-align:center; 这个div必须要设置宽度； 如：{text-align:center; width:100%;}转载于:https://www.cnblogs.com/zzd0916/p/6626772.html

编程日记2024/08/13 09:40:00

Understanding SOAP

Understanding SOAP转载于:https://www.cnblogs.com/daishuguang/p/4227983.html

编程日记2024/08/13 09:30:00

js删除组数中的某一个元素(完整代码附效果图)

微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。正文： <view class"big-logos"> <imagebindtap"addimg"src../../../image/s.png></image> <blockwx:for"{{img_arr}}"wx:key"in…

编程日记2024/08/13 09:20:00

c专家编程/c陷阱_如何避免常见的初学者陷阱并像专家一样开始编码

c专家编程/c陷阱by Dmitri Grabov德米特里格拉波夫(Dmitri Grabov) 如何避免常见的初学者陷阱并像专家一样开始编码 (How to avoid common beginner pitfalls and start coding like a pro) Learning to code is tough. We’ve all encountered cryptic errors and code break…

编程日记2024/08/13 09:10:00

xmpp关于后台挂起的消息接收，后台消息推送，本地发送通知

想问下，在xmpp即时通讯的项目中，我程序如果挂起了，后台有消息过来，我这边的推送不过来，所以我的通知就会收不到消息，当我重新唤醒应用的时候，他才会接收到通知，消息就会推送过来&…

编程日记2024/08/13 09:00:00

[冲昏头脑]IDEA中的maven项目中学习log4j的日志操作

第一，你要有log4j的对应的包，由于我用的maven，所以直接在pom.xml文件依赖下载则可，如你尚为有此包，请自行百度下载导入，或上http://www.mvnrepository.com/搜索。上如则是我的log4j的包的版本。好了&#x…

编程日记2024/08/13 08:50:00

女神推荐, 卡片,广告图 ,点击查看更多

微信小程序开发交流qq群 581478349 承接微信小程序开发。扫码加微信。正文： <view><view classtitle>女神推荐 </view> <image stylemargin-top:25rpx; classtab_img src{{img list_data.q1[1].image}}></image><view classv…

编程日记2024/08/13 08:40:00

aws lambda_恐怕您正在考虑AWS Lambda的冷启动完全错误

aws lambdaby Yan Cui崔燕恐怕您正在考虑AWS Lambda的冷启动完全错误 (I’m afraid you’re thinking about AWS Lambda cold starts all wrong) When I discuss AWS Lambda cold starts with folks in the context of API Gateway, I often get responses along the line of…

编程日记2024/08/13 08:30:00

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

正文：

相关文章：