如何在小程序中使用async/await
时间:2022-07-28
本文章向大家介绍如何在小程序中使用async/await,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
为什么要使用async/await
假如两个异步,第一个获取列表,第二个获取列表里的第一个的详情。这时候应该怎么做?
- 在第一个请求之后里写第二个请求,这可能是你第一个想法,可是这个深度是5层、10层呢?代码将会变的无法维护,也就是我们俗称的回调地狱
- 使用Promise,使用一直点then。但是如果出现错误,不容易捕捉到。
- 最优雅的写法,async 和 await。
我们使用 CNode Api 练习,先获取首页文章列表,然后在获取第一个文章的详情。
#一、使用Callback
Page({
onLoad: function () {
this.ajax1()
},
ajax1(){
const that = this;
wx.request({
url: 'https://cnodejs.org/api/v1/topics',
success:res=>{
console.log(1, res)
let firstId = res.data.data[0].id;
that.ajax2(firstId)
}
})
},
ajax2(id){
wx.request({
url: `https://cnodejs.org/api/v1/topic/${id}`,
success:res=>{
console.log(2, res)
}
})
}
})
#二、使用Promise
Page({
onLoad: function () {
this.ajax1()
.then(id => {
return this.ajax2(id)
}).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
},
ajax1() {
return new Promise((resolve, reject) => {
wx.request({
url: 'https://cnodejs.org/api/v1/topics',
success: res => {
console.log(1, res)
let firstId = res.data.data[0].id;
resolve(firstId)
},
fail: err => {
reject(err)
}
})
})
},
ajax2(id) {
return new Promise((resolve, reject) => {
wx.request({
url: `https://cnodejs.org/api/v1/topic/${id}`,
success: res => {
console.log(2, res)
resolve(res)
},
fail: err => {
reject(err)
}
})
})
}
})
对比回调,使用Promise的链式调用就优雅很多了。
#三、使用async、await
小程序增强编译:代码增强编译
需要在微信开发者工具中勾选 增强编译
Page({
onLoad: function () {
(async ()=>{
let id = await this.ajax1()
let res = await this.ajax2(id)
console.log(res)
})()
},
ajax1() {
return new Promise((resolve, reject) => {
wx.request({
url: 'https://cnodejs.org/api/v1/topics',
success: res => {
console.log(1, res)
let firstId = res.data.data[0].id;
resolve(firstId)
},
fail: err => {
reject(err)
}
})
})
},
ajax2(id) {
return new Promise((resolve, reject) => {
wx.request({
url: `https://cnodejs.org/api/v1/topic/${id}`,
success: res => {
console.log(2, res)
resolve(res)
},
fail: err => {
reject(err)
}
})
})
}
})
参考:微信小程序中使用 async/await的方法实例分析
- Immutable(不可变)集合
- nginx学习(2):启动gzip、虚拟主机、请求转发、负载均衡
- 使用WiX制作简单MSI安装程序
- 企业应用通用架构图
- CacheManager:–个通用缓存接口抽象类库
- silverlight: http请求的GET及POST示例
- 如何判断AI创造物能够成为“作品”?附独家视频讲解
- 程序员最喜欢的五大神器
- UE4新手编程之创建C++项目
- 如何启动“Microsoft File Transfer Manager”
- 职责链(Chain of Responsibility)模式在航空货运中的运用实例
- 灵活的 overflow
- 制作WordPress侧边栏“热门文章”小工具并集成在主题中的方法
- 好用的WCF Visualizers
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 使用 bind 设置 DNS 服务器的方法
- Linux jdk安装及环境变量配置教程(jdk-8u144-linux-x64.tar.gz)
- centos6.6 下 安装 php7 + nginx环境的方法
- 如何优雅地删除 Linux 中的垃圾文件的方法
- Ubuntu18.04 安装 Anaconda3的教程详解
- VScode Remote SSH通过远程编辑与调试代码
- Ubuntu18.04下安装配置SSH服务的方法步骤
- Openssl实现双向认证教程(附服务端客户端代码)
- centos8使用Docker部署Django项目的详细教程
- ubuntu18.04 安装qt5.12.8及环境配置的详细教程
- 安装Ubuntu20.04与安装NVIDIA驱动的教程
- Ubuntu下安装nvidia显卡驱动(安装方式简单)
- Ubuntu 20.04 apt 更换国内源的实现方法
- Android设计模式之单例模式解析
- Android屏蔽软键盘并且显示光标的实例详解