经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 移动开发 » 微信小程序 » 查看文章
微信小程序中使用Async-await方法异步请求变为同步请求方法
来源:jb51  时间:2019/3/29 8:39:04  对本文有异议

微信小程序中有些 Api 是异步的,无法直接进行同步处理。例如:wx.requestwx.showToastwx.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的页面中引入:

  1. // pages/list/list.js
  2.  
  3. const regeneratorRuntime = require('../../lib/regenerator-runtime/runtime')


同步处理异步请求

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

  1. // request get 请求
  2. const getData = (url, param) => {
  3. return new Promise((resolve, reject) => {
  4. wx.request({
  5. url: url,
  6. method: 'GET',
  7. data: param,
  8. success (res) {
  9. console.log(res)
  10. resolve(res.data)
  11. },
  12. fail (err) {
  13. console.log(err)
  14. reject(err)
  15. }
  16. })
  17. })
  18. }
  19.  
  20. // request post 请求
  21. const postData = (url, param) => {
  22. return new Promise((resolve, reject) => {
  23. wx.request({
  24. url: url,
  25. method: 'POST',
  26. data: param,
  27. success (res) {
  28. console.log(res)
  29. resolve(res.data)
  30. },
  31. fail (err) {
  32. console.log(err)
  33. reject(err)
  34. }
  35. })
  36. })
  37. }
  38.  
  39. // loading加载提示
  40. const showLoading = () => {
  41. return new Promise((resolve, reject) => {
  42. wx.showLoading({
  43. title: '加载中...',
  44. mask: true,
  45. success (res) {
  46. console.log('显示loading')
  47. resolve(res)
  48. },
  49. fail (err) {
  50. reject(err)
  51. }
  52. })
  53. })
  54. }
  55.  
  56. // 关闭loading
  57. const hideLoading = () => {
  58. return new Promise((resolve) => {
  59. wx.hideLoading()
  60. console.log('隐藏loading')
  61. resolve()
  62. })
  63. }
  64.  
  65. module.exports = {
  66. getData,
  67. postData,
  68. showLoading,
  69. hideLoading
  70. }

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

  1. //app.js
  2. const api = require('./api/index')
  3.  
  4. App({
  5. onLaunch: function () {
  6. },
  7. // 全局数据中暴露api
  8. globalData: {
  9. api
  10. }
  11. })

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

  1. // pages/list/list.js
  2. const app = getApp()
  3.  
  4. const api = app.globalData.api
  5.  
  6. Page({
  7. onLoad () {
  8. this.init()
  9. },
  10.  
  11. // 初始化
  12. async init () {
  13. await api.showLoading() // 显示loading
  14. await this.getList() // 请求数据
  15. await api.hideLoading() // 等待请求数据成功后,隐藏loading
  16. },
  17.  
  18. // 获取列表
  19. getList () {
  20. return new Promise((resolve, reject) => {
  21. api.getData('http://127.0.0.1:3000/list', {
  22. x: '',
  23. y: ''
  24. }).then((res) => {
  25. this.setData({
  26. list: res
  27. })
  28. console.log(res)
  29. resolve()
  30. })
  31. .catch((err) => {
  32. console.error(err)
  33. reject(err)
  34. })
  35. })
  36. },
  37. })

参考:https://www.jb51.net/article/158645.htm

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号