微信小程序中使用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 相关文章推荐
window.addeventjs事件驱动函数集合addEvent等
Feb 19 Javascript
jQuery bind事件使用详解
May 05 Javascript
JavaScript中的面向对象介绍
Jun 30 Javascript
js的正则test,match,exec详细解析
Jan 29 Javascript
jquery easyui中treegrid用法的简单实例
Feb 18 Javascript
jquery对table中各数据的增加、保存、删除操作示例
May 14 Javascript
使用jquery修改表单的提交地址基本思路
Jun 04 Javascript
JavaScript学习心得之概述
Jan 20 Javascript
JQuery实现超链接鼠标提示效果的方法
Jun 10 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
Nov 23 Javascript
bootstrap模态框关闭后清除模态框的数据方法
Aug 10 Javascript
详解Vue的watch中的immediate与watch是什么意思
Dec 30 Javascript
详解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
Netflix将与CLAMP、乙一以及冲方丁等6名知名制作人合伙展开原创动画计划!
2020/03/06 日漫
一些常用的php函数
2006/12/06 PHP
php开启openssl的方法
2014/05/15 PHP
php 数组随机取值的简单实例
2016/05/23 PHP
修改Laravel自带的认证系统的User类的命名空间的步骤
2019/10/15 PHP
Javascript中的var_dump函数实现代码
2009/09/07 Javascript
Juqery Html(),append()等方法的Bug解决方法
2010/12/13 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
2011/06/27 Javascript
JavaScript中把数字转换为字符串的程序代码
2013/06/19 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
2014/04/15 Javascript
jquery实现点击文字可编辑并修改保存至数据库
2014/04/15 Javascript
AngularJS基础学习笔记之简单介绍
2015/05/10 Javascript
jQuery实现表格行上下移动和置顶效果
2015/06/05 Javascript
Knockout自定义绑定创建方法
2015/12/26 Javascript
实例讲解JavaScript中instanceof运算符的用法
2016/06/08 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
2019/05/26 Javascript
微信小程序实现音乐播放器
2019/11/20 Javascript
java遇到微信小程序 "支付验证签名失败" 问题解决
2019/12/22 Javascript
Python处理文本文件中控制字符的方法
2017/02/07 Python
Python实现将文本生成二维码的方法示例
2017/07/18 Python
Python中的Django基本命令实例详解
2018/07/15 Python
详解Django的CSRF认证实现
2018/10/09 Python
Python如何基于smtplib发不同格式的邮件
2019/12/30 Python
python爬虫开发之urllib模块详细使用方法与实例全解
2020/03/09 Python
详解查看Python解释器路径的两种方式
2020/10/15 Python
css3 条纹化和透明化表格Firefox下测试成功
2014/04/15 HTML / CSS
英国音乐设备和乐器商店:Gear4music
2017/10/16 全球购物
荷兰最大的儿童服装店:The Kids Republic
2019/04/13 全球购物
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
台湾时尚彩瞳专门店:imeime
2019/08/16 全球购物
《社戏》教学反思
2014/04/15 职场文书
企业精神口号
2014/06/11 职场文书
挂职个人工作总结
2015/03/05 职场文书
商务信函英语问候语
2015/11/10 职场文书
Python3 使用pip安装git并获取Yahoo金融数据的操作
2021/04/08 Python
解决mysql的int型主键自增问题
2021/07/15 MySQL