微信小程序中使用Async-await方法异步请求变为同步请求方法


Posted in Javascript onMarch 28, 2019

微信小程序中有些 Api 是异步的,无法直接进行同步处理。例如:wx.request、wx.showToast、wx.showLoading等。如果需要同步处理,可以使用如下方法:

注意:

Async-await方法属于ES7语法,在小程序开发工具中如果勾选es6转es5, 会报错:

ReferenceError: regeneratorRuntime is not defined

避免报错,可以引入 regenerator

在根目录下创建 lib 文件夹,并将 https://github.com/facebook/regenerator/tree/master/packages 里面的 regenerator-runtime 文件夹放进去。

然后在使用async-awiat的页面中引入:

// pages/list/list.js

const regeneratorRuntime = require('../../lib/regenerator-runtime/runtime')

微信小程序中使用Async-await方法异步请求变为同步请求方法

同步处理异步请求

在根目录下新建api文件夹,里面新建index.js

// request get 请求
const getData = (url, param) => {
 return new Promise((resolve, reject) => {
 wx.request({
  url: url,
  method: 'GET',
  data: param,
  success (res) {
  console.log(res)
  resolve(res.data)
  },
  fail (err) {
  console.log(err)
  reject(err)
  }
 })
 })
}

// request post 请求
const postData = (url, param) => {
 return new Promise((resolve, reject) => {
 wx.request({
  url: url,
  method: 'POST',
  data: param,
  success (res) {
  console.log(res)
  resolve(res.data)
  },
  fail (err) {
  console.log(err)
  reject(err)
  }
 })
 })
}

// loading加载提示
const showLoading = () => {
 return new Promise((resolve, reject) => {
 wx.showLoading({
  title: '加载中...',
  mask: true,
  success (res) {
  console.log('显示loading')
  resolve(res)
  },
  fail (err) {
  reject(err)
  }
 })
 })
}

// 关闭loading
const hideLoading = () => {
 return new Promise((resolve) => {
 wx.hideLoading()
 console.log('隐藏loading')
 resolve()
 })
}

module.exports = {
 getData,
 postData,
 showLoading,
 hideLoading
}

在入口文件 app.js 中引入:

//app.js 
const api = require('./api/index')

App({
 onLaunch: function () {
 
 },
 // 全局数据中暴露api
 globalData: { 
 api
 }
})

在需要使用api 的页面中处理如下:

// pages/list/list.js
const app = getApp()

const api = app.globalData.api

Page({
 
 onLoad () {
 this.init()
 },

 // 初始化
 async init () {
 await api.showLoading() // 显示loading
 await this.getList() // 请求数据
 await api.hideLoading() // 等待请求数据成功后,隐藏loading
 },

 // 获取列表
 getList () {
 return new Promise((resolve, reject) => {
  api.getData('http://127.0.0.1:3000/list', {
   x: '',
   y: ''
  }).then((res) => {
  this.setData({
   list: res
  })
  console.log(res)
  resolve()
  })
  .catch((err) => {
   console.error(err)
   reject(err)
  })
 })
 },
 
})

参考:https://3water.com/article/158645.htm

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于JQUERY的两个ListBox子项互相调整的实现代码
May 07 Javascript
javascript中$(function() {});写与不写有哪些区别
Aug 10 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
Aug 25 Javascript
11种ASP连接数据库的方法
Sep 18 Javascript
JS+CSS实现仿msn风格选项卡效果代码
Oct 22 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
Aug 31 Javascript
利用Angularjs和bootstrap实现购物车功能
Aug 31 Javascript
详解Angular2中的编程对象Observable
Sep 17 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
May 17 Javascript
angular4笔记系列之内置指令小结
Nov 09 Javascript
Vue项目引发的「过滤器」使用教程
Mar 12 Javascript
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
详解Js里的for…in和for…of的用法
Mar 28 #Javascript
ES7之Async/await的使用详解
Mar 28 #Javascript
详解vue-cli3多环境打包配置
Mar 28 #Javascript
微信小程序之onLaunch与onload异步问题详解
Mar 28 #Javascript
详解vue使用插槽分发内容slot的用法
Mar 28 #Javascript
详解一个基于套接字实现长连接的express
Mar 28 #Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
Mar 28 #Javascript
You might like
laravel 5 实现模板主题功能
2015/03/02 PHP
smarty中改进truncate使其支持中文的方法
2016/05/30 PHP
php smtp实现发送邮件功能
2017/06/22 PHP
些很实用且必用的小脚本代码
2006/06/26 Javascript
JavaScript中for..in循环陷阱介绍
2013/11/12 Javascript
JS自调用匿名函数具体实现
2014/02/11 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
2014/08/16 Javascript
JQuery设置时间段下拉选择实例
2014/12/30 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
2016/03/07 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
2016/07/05 Javascript
Angular2学习笔记——详解NgModule模块
2016/12/02 Javascript
AngularJS的脏检查深入分析
2017/04/22 Javascript
vue bootstrap小例子一枚
2017/06/09 Javascript
jquery+css实现下拉列表功能
2017/09/03 jQuery
Vue 3.x+axios跨域方案的踩坑指南
2019/07/04 Javascript
VUE组件中的 Drawer 抽屉实现代码
2019/08/06 Javascript
Python struct模块解析
2014/06/12 Python
Windows和Linux下使用Python访问SqlServer的方法介绍
2015/03/10 Python
Python科学计算之Pandas详解
2017/01/15 Python
python中利用Future对象回调别的函数示例代码
2017/09/07 Python
python+opencv轮廓检测代码解析
2018/01/05 Python
Python线性方程组求解运算示例
2018/01/17 Python
Django实现单用户登录的方法示例
2019/03/28 Python
django drf框架中的user验证以及JWT拓展的介绍
2019/08/12 Python
Python实现TCP通信的示例代码
2019/09/09 Python
python 解决cv2绘制中文乱码问题
2019/12/23 Python
浅谈Python线程的同步互斥与死锁
2020/03/22 Python
从零开始的TensorFlow+VScode开发环境搭建的步骤(图文)
2020/08/31 Python
python切片作为占位符使用实例讲解
2021/02/17 Python
计算机系毕业生推荐信
2013/11/06 职场文书
最新奶茶店创业计划书
2014/01/25 职场文书
2014年学习雷锋活动总结
2014/03/01 职场文书
ktv好的活动方案
2014/08/17 职场文书
获奖感言范文
2015/07/31 职场文书
Vue图片裁剪组件实例代码
2021/07/02 Vue.js
Python多线程 Queue 模块常见用法
2021/07/04 Python