异步编程——微信小程序

news2025/4/18 22:04:04

1. 前言

引用来自:微信小程序开发中的多线程处理与异步编程_微信小程序 多线程-CSDN博客

微信小程序是基于JavaScript开发的,与浏览器JavaScript不同,小程序运行在WebView内部,没有多线程的概念。小程序的 JavaScript 是单线程的,也就是说它只有一个主线程来处理所有的任务,包括用户交互、网络请求、动画等。但是,为了提高性能,小程序提供了一些异步编程的方法,比如使用 Promise、async/await 来处理网络请求和其他异步操作。

2. 异步编程的实现

2.1 Promise

参考:JavaScript Promise | 菜鸟教程

Promise 是一个 ECMAScript 6 提供的类,目的是更加优雅地书写复杂的异步任务。 

Promise 构造函数接受一个函数作为参数,该函数是同步的并且会被立即执行,所以我们称之为起始函数。起始函数包含两个参数 resolve 和 reject,分别表示 Promise 成功和失败的状态。

起始函数执行成功时,它应该调用 resolve 函数并传递成功的结果。当起始函数执行失败时,它应该调用 reject 函数并传递失败的原因。

Promise 构造函数返回一个 Promise 对象,该对象具有以下几个方法:

  • then:用于处理 Promise 成功状态的回调函数。
  • catch:用于处理 Promise 失败状态的回调函数。
  • finally:无论 Promise 是成功还是失败,都会执行的回调函数

2.1.1 示例1 Promise返回成功状态

 先以Promise返回成功状态为例,先执行“起始函数”,由于返回成功状态(即使用resolve),会再执行then,再执行finally。

onButton1Clicked(){
        const promise = new Promise((resolve,reject)=>{
            setTimeout(()=>{
                console.log("1秒-第一次打印");
                resolve();
            },1000)
        });
        promise.then(()=>{
            console.log("成功")
            setTimeout(()=>{
                console.log("2秒-第二次打印");
            },2000)
        }).finally(()=>{
            console.log("最后")
        });
    },

打印结果:

我好奇:then是成功才会调用的函数,finally无论成功失败都会调用,那谁先谁后呢?测试发现谁写前面先调用谁,比如我这样写:

promise.finally(...).then();

 打印结果是这样的:

 

不过菜鸟教程中说不建议这样写,建议:最好按 then-catch-finally 的顺序

Q: then、catch 和 finally 序列能否顺序颠倒?

A: 可以,效果完全一样。但不建议这样做,最好按 then-catch-finally 的顺序编写程序。

2.1.2 示例2  Promise 与网络请求wx.request 结合使用

    onReqAuth() {
        const request = new Promise((resolve, reject) => {
            wx.request({
                url: 'https://www.yourhost.cn/api/',
                data: {
                    sbxh: 'S20230831-001',
                    ident: 'T01',
                    parm: ''
                },
                method: 'POST',
                success: (res) => {
                    resolve(res.data);
                },
                fail: (err) => {
                    reject(err)
                }
            })
        });
        request.then((data) => {
            console.log('请求成功', data);
            // decodeURIComponent:解析URL编码
            let msg = decodeURIComponent(data.msg);
            console.log(msg);
            this.data.reqResult = msg;
            this.setData({
                reqResult: this.data.reqResult
            })
        }).catch((err) => {
            console.error('请求失败:', err);
        })

    },

2.1.3  示例3 then传递值给下一个then

这个示例完全照搬菜鸟教程,

resolve() 中可以放置一个参数用于向下一个 then 传递一个值,then 中的函数也可以返回一个值传递给 then。但是,如果 then 中返回的是一个 Promise 对象,那么下一个 then 将相当于对这个返回的 Promise 进行操作,这一点从刚才的计时器的例子中可以看出来。

new Promise(function (resolve, reject) {
    console.log(1111);
    resolve(2222);
}).then(function (value) {
    console.log(value);
    return 3333;
}).then(function (value) {
    console.log(value);
    throw "An error";
}).catch(function (err) {
    console.log(err);
});

注意:

  • resolve 和 reject 的作用域只有起始函数,不包括 then 以及其他序列;
  • resolve 和 reject 并不能够使起始函数停止运行,别忘了 return。

 resolve 和 reject 并不能够使起始函数停止运行,这个我是这样理解的:在起始函数内调用resolve 或 reject 不代表起始函数结束了,它会继续执行后面的语句,直到函数结束;然后在起始函数执行完毕后,再去执行对应的成功或失败后需要操作。比如在示例1的resolve后增加打印,将会打印如下:

2.2 async/await

5.3 ES6 async 函数 | 菜鸟教程

2.2.1 async 异步关键词

async 是 ES7 才有的与异步操作有关的关键字。

async 函数返回一个 Promise 对象,可以使用 then 方法添加回调函数。

async function testAsync(){
    return "testAsync";
}

onButton1Clicked(){
    console.log(testAsync());
    testAsync().then(v =>{
       console.log(v);
    })
}

 

2.2.2 await 操作符

 async 函数中可能会有 await 表达式,async 函数执行时,如果遇到 await 就会先暂停执行 ,等到触发的异步操作完成后,恢复 async 函数的执行并返回解析值。

await 关键字仅在 async function 中有效。

function testAwait(){
    return new Promise((resolve,reject)=>{
        console.log("testAwait");
        setTimeout(()=>{
            console.log("setTimeout");
            resolve();
        },1000);
    });
}

async function helloASync(){
    await testAwait();
    console.log("helloASync")
}


helloASync();

正常情况下,await 命令后面是一个 Promise 对象,它也可以跟其他值,如字符串,布尔值,数值以及普通函数。

function testAwait(){
   console.log("testAwait");
}
async function helloAsync(){
   await testAwait();
   console.log("helloAsync");
}
helloAsync();
// testAwait
// helloAsync

await针对所跟不同表达式的处理方式:

  • Promise 对象:await 会暂停执行,等待 Promise 对象 resolve,然后恢复 async 函数的执行并返回解析值。
  • 非 Promise 对象:直接返回对应的值。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2337566.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

STM32 四足机器人常见问题汇总

文章不介绍具体参数,有需求可去网上搜索。 特别声明:不论年龄,不看学历。既然你对这个领域的东西感兴趣,就应该不断培养自己提出问题、思考问题、探索答案的能力。 提出问题:提出问题时,应说明是哪款产品&a…

Windows 下实现 PHP 多版本动态切换管理(适配 phpStudy)+ 一键切换工具源码分享

🚀 Windows 下实现 PHP 多版本动态切换管理(适配 phpStudy) 一键切换工具源码分享 📦 工具特点🧪 效果展示🧱 环境要求🧑‍💻 源码展示:php_switcher.py🛠 打…

ReportLab 导出 PDF(图文表格)

ReportLab 导出 PDF(文档创建) ReportLab 导出 PDF(页面布局) ReportLab 导出 PDF(图文表格) 文章目录 1. Paragraph(段落)2. Table(表格)3. VerticalBarChart&#xff0…

yolov8复现

Yolov8的复现流程主要包含环境配置、下载源码和验证环境三大步骤: 环境配置 查看电脑状况:通过任务管理器查看电脑是否有独立显卡(NVIDIA卡)。若有,后续可安装GPU版本的pytorch以加速训练;若没有&#xff0…

RestSharp和Newtonsoft.Json结合发送和解析http

1.下载RestSharp和Newtonsoft.Json 2编写ApiRequest和ApiResponse和调用工具类HttpRestClient 请求模型 /// <summary>/// 请求模型/// </summary>public class ApiRequest{/// <summary>/// 请求地址/api路由地址/// </summary>public string Route {…

【Pytorch之一】--torch.stack()方法详解

torch.stack方法详解 pytorch官网注释 Parameters tensors&#xff1a;张量序列&#xff0c;也就是要进行stack操作的对象们&#xff0c;可以有很多个张量。 dim&#xff1a;按照dim的方式对这些张量进行stack操作&#xff0c;也就是你要按照哪种堆叠方式对张量进行堆叠。dim的…

数据中台(大数据平台)之数据资源目录

数据资源目录是数据管理的账本&#xff0c;是数据应用的基础&#xff0c;更是是数据治理成果的体现&#xff0c;因此数据中台产品应提供数据资源目录编制、发布、资源挂载、下架的管理能力。 1.数据资源目录分类 资源目录能够支持基于业务特点创建和维护基础目录分类和特色目…

【随身WiFi】随身WiFi Debian系统优化教程

0.操作前必看 本教程基于Debian系统进行优化&#xff0c;有些操作对随身WiFi来说可能会带来负优化&#xff0c;根据需要选择。 所有操作需要在root用户环境下运行&#xff0c;否则都要加sudo 随身wifi Debian系统&#xff0c;可以去某安的随声WiFi模块自行搜索刷机 点赞&am…

JAVA Web_定义Servlet2_学生登录验证Servlet

题目 页面StudentLogin.html中有一HTML的表单代码如下&#xff1a; <form action"studentLogin" method"post">学生姓名&#xff1a;<input type"text" name"stuName" value""><br>登录密码&#xff1a;…

Unity入门笔记(缘更)

内容来源SiKi学院的Luna’s Fantasy 文章目录 一、基础知识1.准备2.基础知识1.层级(Layer)2.轴心点3.预制体(Prefab)4.刚体组件(Rigidbody)5.碰撞器组件(BoxCollider) 二、代码1.移动 一、基础知识 1.准备 Unity安装&#xff1a; https://unity.cn 2.基础知识 1.层级(Layer…

【Python】用Python写一个俄罗斯方块玩玩

【Python】用Python写一个俄罗斯方块玩玩 一、引言1.成品效果展示 二、思考准备1.思考设计2.代码设计2.1 游戏页面2.2 控件设计2.2.1 方块生成2.2.2 方块碰撞2.2.3 方块消融2.2.4 游戏主循环2.2.5 游戏窗口 三、游戏完整版 一、引言 今日看到侄子在玩游戏&#xff0c;凑近一看…

记录一次生产中mysql主备延迟问题处理

登录库&#xff1a; mysql -uXXXX -pXXXX -P3306 -hXXXXXX -A 备库上执行&#xff1a;show slave status\G 查看 seconds_Behind_Master&#xff0c;延迟 2705s&#xff0c;而且还一直在增加。 SHOW CREATE TABLE proc_i_income_temp; -- 查看表的结构 show index from proc…

ffmpeg无损转格式的命令行

将ffmpeg.exe拖入命令行窗口 c:\users\zhangsan>D:\ffmpeg-2025-03-11\bin\ffmpeg.exe -i happy.mp4 -c:v copy -c:a copy 格式转换后.mkv -c:v copy 仅做拷贝视频,不重新编码 -c:a copy 仅做拷贝音频 ,不重新编码

强化学习算法系列(五):最主流的算法框架——Actor-Critic算法框架

强化学习算法 &#xff08;一&#xff09;动态规划方法——策略迭代算法(PI)和值迭代算法(VI) &#xff08;二&#xff09;Model-Free类方法——蒙特卡洛算法(MC)和时序差分算法(TD) &#xff08;三&#xff09;基于动作值的算法——Sarsa算法与Q-Learning算法 &#xff08;四…

设计模式(结构型)-桥接模式

目录 摘要 定义 类图 角色 具体实现 优缺点 优点 缺点 使用场景 使用案例 JDBC 和桥接模式 总结 摘要 在软件开发领域&#xff0c;随着系统规模和复杂性的不断攀升&#xff0c;如何设计出具有良好扩展性、灵活性以及可维护性的软件架构成为关键挑战。桥接模式作为一…

【MySQL】MySQL数据库 —— 简单认识

目录 1. 数据库的介绍 1.1 什么是数据库 1.2 数据库和数据结构之间关系 2. 数据库分类 2.1 关系型数据库&#xff08;RDBMS&#xff09; 2.2 非关系型数据库 2.3 区别 一些行内名词简单解释&#xff1a; 3. 关于mysql 主要学什么 4. MySQL中重要的概念 4.1 概念 4…

RNN - 语言模型

语言模型 给定文本序列 x 1 , … , x T x_1, \ldots, x_T x1​,…,xT​&#xff0c;语言模型的目标是估计联合概率 p ( x 1 , … , x T ) p(x_1, \ldots, x_T) p(x1​,…,xT​)它的应用包括 做预训练模型&#xff08;eg BERT&#xff0c;GPT-3&#xff09;生成本文&#xff…

过拟合、归一化、正则化、鞍点

过拟合 过拟合的本质原因往往是因为模型具备方差很大的权重参数。 定义一个有4个特征的输入&#xff0c;特征向量为,定义一个模型&#xff0c;其只有4个参数&#xff0c;表示为。当模型过拟合时&#xff0c;这四个权重参数的方差会很大&#xff0c;可以假设为。当经过这个模型后…

【python画图】:从入门到精通绘制完美柱状图

目录 Python数据可视化&#xff1a;从入门到精通绘制完美柱状图一、基础篇&#xff1a;快速绘制柱状图1.1 使用Matplotlib基础绘制1.2 使用Pandas快速绘图 二、进阶篇&#xff1a;专业级柱状图定制2.1 多系列柱状图2.2 堆叠柱状图2.3 水平柱状图 三、专业参数速查表Matplotlib …

基础知识:离线安装docker、docker compose

(1)离线安装docker 确认版本:Ubuntu 18.04 LTS - bionic 确认架构:X86_64 lsb_release -a uname -a 官方指南:https://docs.docker.com/engine/install/ 选择Ubuntu,发现页面上最低是Ubuntu20.04, 不要紧