微信小程序中使用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 相关文章推荐
Javascript 更新 JavaScript 数组的 uniq 方法
Jan 23 Javascript
Javascript实现视频轮播在pc端与移动端均可
Sep 29 Javascript
JavaScript实现信用卡校验方法
Apr 07 Javascript
基于JavaScript实现添加到购物车效果附源码下载
Aug 22 Javascript
Bootstrap进度条学习使用
Feb 09 Javascript
angularjs实现多张图片上传并预览功能
Feb 24 Javascript
BootStrap 动态表单效果
Jun 02 Javascript
原生JS实现多个小球碰撞反弹效果示例
Jan 31 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
Oct 19 Javascript
Vue项目打包压缩的实现(让页面更快响应)
Mar 10 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
Sep 29 Javascript
JavaScript WeakMap使用详解
Feb 05 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
php使用smtp发送支持附件的邮件示例
2014/04/13 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
解决laravel5中auth用户登录其他页面获取不到登录信息的问题
2019/10/08 PHP
关于PhpStorm设置点击编辑文件自动定位源文件的实现方式
2020/12/30 PHP
Ext修改GridPanel数据和字体颜色、css属性等
2014/06/13 Javascript
html的DOM中Event对象onabort事件用法实例
2015/01/21 Javascript
JavaScript中5种调用函数的方法
2015/03/12 Javascript
JavaScript中的DSL元编程介绍
2015/03/15 Javascript
JavaScript DOM操作表格及样式
2015/04/13 Javascript
js正则匹配出所有图片及图片地址src的方法
2015/06/08 Javascript
详解用函数式编程对JavaScript进行断舍离
2017/09/18 Javascript
基于Vue的ajax公共方法(详解)
2018/01/20 Javascript
使用javascript函数编写简单银行取钱存钱流程
2018/05/26 Javascript
微信小程序实现聊天对话(文本、图片)功能
2018/07/06 Javascript
深入理解Vue 的钩子函数
2018/09/05 Javascript
Python中使用HTMLParser解析html实例
2015/02/08 Python
python实现发送和获取手机短信验证码
2016/01/15 Python
python实现列表中最大最小值输出的示例
2019/07/09 Python
关于ZeroMQ 三种模式python3实现方式
2019/12/23 Python
Python3基本输入与输出操作实例分析
2020/02/14 Python
python实现文字版扫雷
2020/04/24 Python
浅谈如何使用python抓取网页中的动态数据实现
2020/08/17 Python
英国办公用品商店:Office Outlet
2018/04/04 全球购物
九年级家长会邀请函
2014/01/15 职场文书
优秀幼教自荐信
2014/02/03 职场文书
制冷与空调专业毕业生推荐信
2014/07/07 职场文书
学校领导班子四风问题整改意见
2014/10/02 职场文书
幼儿园教师工作总结2015
2015/04/02 职场文书
微信搭讪开场白
2015/05/28 职场文书
在校学生证明格式
2015/06/24 职场文书
2015国庆节宣传语
2015/07/14 职场文书
初级职称评定工作总结
2015/08/13 职场文书
2016感恩母亲节校园广播稿
2015/12/17 职场文书
基于Redis延迟队列的实现代码
2021/05/13 Redis
idea以任意顺序debug多线程程序的具体用法
2021/08/30 Java/Android
如何使用SQL Server语句创建表
2022/04/12 SQL Server