微信小程序使用 async , await

直接使用 async , await 会报错 regeneratorRuntime is not defined
下载第三方npm包 regenerator-runtime 下载地址
下载文件中的regenerator-runtime文件夹拿出来，放到小程序代码中去，一般是放在utils文件夹
查看下面示例 async应用

//index.js
const regeneratorRuntime =require('../../utils/regenerator-runtime/runtime.js')
Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/async MyAsync(){return 'this is async function'},onLoad: function (options) {this.MyAsync().then((res)=>{console.log('1111'+res)})}
})

控制台输出结果如图, async 函数返回的是一个 Promise 对象 , async 函数(包含函数语句、函数表达式、Lambda 表达式)会返回一个 Promise 对象，如果在函数中 return 一个直接量，async 会把这个直接量通过Promise.resolve() 封装成 Promise 对象。async 函数在没有 await 的情况下执行async函数，它会立即执行，并且返回一个 promise 对象，并且绝不会阻塞后面的语句
await 作用表达式会暂停当前 async function 的执行，等待 Promise 处理完成若 Promise 正常处理，其处理结果作为 await 表达式的值，继续执行 async function 。若 Promise 处理异常 (rejected) , await 表达式会把 Promise 的异常原因抛出。另外，如果 await 操作符号的表达式的值不是一个 Promise ，那么该值将被转换为一个正常处理的 Promise 。
async / await 的优势在于处理then链 ,查看下面示例

 //index.jsconst regeneratorRuntime =require('../../utils/regenerator-runtime/runtime.js') Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/getOneMes() {console.log('getOneMes one')return new Promise((resolve, reject) => {wx.request({url: 'http://suggest.taobao.com/sug?code=utf-8&q=衣服&callback=cb',method: 'GET',dataType: 'json',success: function (res) {console.log('one：')resolve(res)},})})},getTwoMes() {console.log('getOneMes two')return new Promise((resolve, reject) => {wx.request({url: 'http://suggest.taobao.com/sug?code=utf-8&q=帽子&callback=cb',method: 'GET',dataType: 'json',success: function (res) {console.log('two：')resolve(res)},})})},getThreeMes() {console.log('getOneMes three')return new Promise((resolve, reject) => {wx.request({url: 'http://suggest.taobao.com/sug?code=utf-8&q=裤子&callback=cb',method: 'GET',dataType: 'json',success: function (res) {console.log('three：')resolve(res)},})})},async MyAsync(){let one =await this.getOneMes()console.log(one)let two = await this.getTwoMes()console.log(two)let three = await this.getThreeMes()console.log(three)},onLoad: function (options) {this.MyAsync().then(()=>{console.log('MyAsync')})},})

输出结果异步变同步如图结果：先执行的one，等one完全执行结束然后是two，最后是three

本文内容借鉴er_ba的博客,推荐一下,大家相互学习

微信小程序使用 async , await相关推荐

微信小程序之async/await
出现问题: 新版本的微信小程序开发工具中不再拥有增强编译这一选项,这样导致在需要用到async/await的时候,出现报红. 先看一下新版本微信开发工具的本地设置根据官方文档,表示只要勾选将JS编 ...
微信小程序使用promise 一次封装全部接口
/*** Promise化小程序接口*/ class Wechat {static api(name, opts) {return new Promise((success, fail) => ...
async await 处理异步变同步(微信小程序内举例)
1.async起什么作用? 输出的是一个Promise对象注: 1)async函数返回的是一个Promise对象.Async函数(包含函数语句.函数表达式.Lambda表达式)会返回一个Prom ...
微信小程序 async await解决异步问题
小程序大部分函数和数据库操作都是异步执行的,如果希望同步执行,需要用到async 和await这对基友,必须成对出现. 为了快速验证 async/await 可用,在 App.js 的 onLaunc ...
微信小程序如何使用async和await
微信小程序如何使用async和await 首先微信小程序不支持ES7的语法,在新版的小程序开发工具中你需要勾选增强编译选项才可以使用. 我想到的是直接在方法前面加一个async,然后await接受参数 ...
微信小程序中使用async/await
在之前写了微信小程序中如何使用promise,其实使用promise的最终目的是要能使用async/await. 同时要使用async/await也必须在promise的基础之上. 1.下载regen ...
在微信小程序中使用 async/await
微信小程序中有大量接口是异步调用,比如 wx.login() . wx.request() . wx.getUserInfo() 等,都是使用一个对象作为参数,并定义了 success() . fai ...
微信小程序 - 富文本图片宽度自适应（正则）
引言:在微信小程序里,比如商品展示页面的商品详情会有图片展示,PC端设置的商品详情是PC端的宽度,所以在小程序里图片会显示不全,这时就应该做相应的处理,使小程序里图片显示正确思路把图片的宽度改为手 ...
微信小程序项目重构之Redux状态管理
1.以往处理状态的一些方式第一种:App上挂globalData 这种方式就是直接写在App里面啦,取值赋值比较方便 App.js App({globalData: {name: '前端学者',// ...

微信小程序使用 async , await

微信小程序使用 async , await相关推荐

最新文章

热门文章