微信小程序中使用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 (十) jQueryUI常用功能实战
Feb 23 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
Jan 15 Javascript
javascript实现带节日和农历的日历特效
Feb 01 Javascript
jquery 构造函数在表单提交过程中修改数据
May 25 Javascript
JavaScript学习笔记之数组求和方法
Mar 23 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
Sep 23 Javascript
jquery.validate表单验证插件使用详解
Jun 21 jQuery
小发现之浅谈location.search与location.hash的问题
Jun 23 Javascript
详解用JS添加和删除class类名
Mar 25 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
Apr 12 Javascript
关于layui toolbar和template的结合使用方法
Sep 19 Javascript
vue3语法糖内的defineProps及defineEmits
Apr 14 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
咖啡与牛奶
2021/03/03 冲泡冲煮
基于php在各种web服务器的运行模式详解
2013/06/03 PHP
php实现可逆加密的方法
2015/08/11 PHP
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
php7 错误处理机制修改实例分析
2020/05/25 PHP
jQuery Tools tooltip使用说明
2012/07/14 Javascript
JS获取并操作iframe中元素的方法
2013/03/21 Javascript
js 判断计算字符串长度/判断空的简单方法
2013/08/05 Javascript
JavaScript异步编程Promise模式的6个特性
2014/04/03 Javascript
jQuery使用post方法提交数据实例
2015/03/25 Javascript
Javascript中的作用域和上下文深入理解
2015/07/03 Javascript
浅谈JavaScript中的对象及Promise对象的实现
2015/11/15 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
2015/11/26 Javascript
设置jQueryUI DatePicker默认语言为中文
2016/06/04 Javascript
微信小程序 使用canvas制作K线实例详解
2017/01/12 Javascript
详解JS: reduce方法实现 webpack多文件入口
2017/02/14 Javascript
Angular.JS中的指令引用template与指令当做属性详解
2017/03/30 Javascript
JavaScript事件方法(实例讲解)
2017/06/27 Javascript
解决eclipse中没有js代码提示的问题
2018/10/10 Javascript
js实现无缝轮播图特效
2020/05/09 Javascript
js实现表格数据搜索
2020/08/09 Javascript
python 机器学习之支持向量机非线性回归SVR模型
2019/06/26 Python
基于Python实现签到脚本过程解析
2019/10/25 Python
python matplotlib如何给图中的点加标签
2019/11/14 Python
Django项目使用ckeditor详解(不使用admin)
2019/12/17 Python
Python 实现将大图切片成小图,将小图组合成大图的例子
2020/03/14 Python
Pycharm2020.1安装中文语言插件的详细教程(不需要汉化)
2020/08/07 Python
python 利用panda 实现列联表(交叉表)
2021/02/06 Python
工厂门卫岗位职责
2013/11/25 职场文书
体育教育个人自荐信范文
2013/12/01 职场文书
社团招新策划书
2014/02/04 职场文书
2014公安机关纪律作风整顿思想汇报
2014/09/13 职场文书
三严三实对照检查材料思想汇报
2014/09/28 职场文书
小学班主任心得体会
2016/01/07 职场文书
详解OpenCV获取高动态范围(HDR)成像
2022/04/29 Python