微信小程序中使用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 继承
May 04 Javascript
js href的用法
May 13 Javascript
EasyUI中实现form表单提交的示例分享
Mar 01 Javascript
10条建议帮助你创建更好的jQuery插件
May 18 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
Oct 09 Javascript
Vue.js中数组变动的检测详解
Oct 12 Javascript
jQuery日程管理控件glDatePicker用法详解
Mar 29 jQuery
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
Aug 17 Javascript
利用ES6实现单例模式及其应用详解
Dec 09 Javascript
vue源码入口文件分析(推荐)
Jan 30 Javascript
浅谈webpack SplitChunksPlugin实用指南
Sep 17 Javascript
35个最好用的Vue开源库(史上最全)
Jan 03 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仿博客园 个人博客(2) 数据库增添改删
2013/07/05 PHP
PHP基于MySQL数据库实现对象持久层的方法
2015/06/17 PHP
PHP中file_exists使用中遇到的问题小结
2016/04/05 PHP
PHP+JS实现的实时搜索提示功能
2018/03/13 PHP
JavaScript执行效率与性能提升方案
2012/12/21 Javascript
js和jquery对dom节点的操作(创建/追加)
2013/04/21 Javascript
Javascript异步编程模型Promise模式详细介绍
2014/05/08 Javascript
手机端转盘抽奖代码分享
2015/09/10 Javascript
vue如何使用 Slot 分发内容实例详解
2017/09/05 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
2018/01/25 Javascript
使用javascript做在线算法编程
2018/05/25 Javascript
vue1.0和vue2.0的watch监听事件写法详解
2018/09/11 Javascript
关于node-bindings无法在Electron中使用的解决办法
2018/12/18 Javascript
基于elementUI实现图片预览组件的示例代码
2019/03/31 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
2019/11/21 Javascript
jQuery AJAX应用实例总结
2020/05/19 jQuery
Python打印斐波拉契数列实例
2015/07/07 Python
Python排序算法之选择排序定义与用法示例
2018/04/29 Python
Python设计模式之适配器模式原理与用法详解
2019/01/15 Python
pyinstaller打包单个exe后无法执行错误的解决方法
2019/06/21 Python
python的等深分箱实例
2019/11/22 Python
使用python写一个自动浏览文章的脚本实例
2019/12/05 Python
python pip安装包出现:Failed building wheel for xxx错误的解决
2019/12/25 Python
python3 Scrapy爬虫框架ip代理配置的方法
2020/01/17 Python
python IDLE添加行号显示教程
2020/04/25 Python
小结Python的反射机制
2020/09/28 Python
pycharm Tab键设置成4个空格的操作
2021/02/26 Python
HTML5 canvas基本绘图之填充样式实现
2016/06/27 HTML / CSS
香港连卡佛百货官网:Lane Crawford
2019/09/04 全球购物
乌克兰移动电子产品和相关配件的在线商店:iTMag
2020/03/16 全球购物
消防战士优秀事迹材料
2014/02/13 职场文书
教师开学感言
2014/02/14 职场文书
遗嘱范文
2015/08/07 职场文书
保姆聘用合同
2015/09/21 职场文书
导游经典开场白——导游词
2019/04/17 职场文书
Redis如何使用乐观锁(CAS)保证数据一致性
2022/03/25 Redis