微信小程序中有些 Api 是异步的,无法直接进行同步处理。例如:wx.requestwx.showToastwx.showLoading等。如果需要同步处理,可以使用如下方法:

注意:

Async-await方法属于ES7语法,在小程序开发工具中如果勾选es6转es5, 会报错:

ReferenceError: regeneratorRuntime is not defined

避免报错,可以引入 regenerator

  1. 在根目录下创建 lib 文件夹,并将 https://github.com/facebook/regenerator/tree/master/packages 里面的 regenerator-runtime 文件夹放进去。

  2. 然后在使用async-awiat的页面中引入:

// pages/list/list.js

const regeneratorRuntime = require('../../lib/regenerator-runtime/runtime')

同步处理异步请求

在根目录下新建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://www.cnblogs.com/cckui/p/9915604.html

微信小程序中使用Async-await方法异步请求变为同步请求的更多相关文章

  1. 微信小程序中的不同场景,不同的判断,请求的时机

    本来5月1之前就想写一下一篇关于小程序不同场景下发送ajax请求的问题,但是放假的前一天,出了个大bug,就是因为我修改不同的场景下执行不同的逻辑造成的 1.首先,在小程序里,微信做了很多的缓存,我们 ...

  2. WeChat-SmallProgram:微信小程序中使用Async-await方法异步请求变为同步请求

    微信小程序中有些 Api 是异步的,无法直接进行同步处理.例如:wx.request.wx.showToast.wx.showLoading 等.如果需要同步处理,可以使用如下方法: 提示:Async ...

  3. 微信小程序中获取高度及设备的方法

    由于js中可以采用操纵dom的方法来获取页面元素的高度,可是在微信小程序中不能操纵dom,经过查找之后发现仅仅只有以下几个方法可以获取到高度 wx.getSystemInfoSync().window ...

  4. 微信小程序中显示html富文本的方法

    微信小程序中显示html富文本的方法 使用方法:git地址:https://github.com/icindy/wxParse 一.下载wxParse文件 二.在要引入的页面的js文件中,引入文件 j ...

  5. 微信小程序中同步 异步的使用

    https://www.jianshu.com/p/e92c7495da76   微信小程序中使用Promise进行异步流程处理 https://www.cnblogs.com/cckui/p/102 ...

  6. 网页或微信小程序中使元素占满整个屏幕高度

    在项目中经常要用到一个容器元素占满屏幕高度和宽度,然后再在这个容器元素里放置其他元素. 宽度很简单就是width:100% 但是高度呢,我们知道的是height:100%必须是在父元素的高度给定了的情 ...

  7. 在微信小程序中使用富文本转化插件wxParse

    在微信小程序中我们往往需要展示一些丰富的页面内容,包括图片.文本等,基本上要求能够解析常规的HTML最好,由于微信的视图标签和HTML标签不一样,但是也有相对应的关系,因此有人把HTML转换做成了一个 ...

  8. 微信小程序中发送模版消息注意事项

    在微信小程序中发送模版消息 参考微信公众平台Api文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/notice.html#模版消息管理 此参考地址 ...

  9. 微信小程序中转义字符的处理

    在微信小程序开发过程中,有时候会用到常用的一些特殊字符如:‘<’.‘>’.‘&’.‘空格’等,微信小程序同样支持对转义字符的处理,下面提供两种方法用来处理微信小程序中转义字符的处理 ...

随机推荐

  1. CentOS 与 Ubuntu 使用命令搭建 LAMP 环境

    LAMP指的Linux操作系统 + Apache服务器 + MariaDB/MySQL数据库软件 + PHP开发语言的第一个字母. ==================CentOS LAMP===== ...

  2. Java获取系统日期时间

    方法一:利用Calendar类来获取当前日期和时间,代码如下: /** * 获取系统时间 * @return */ public String getDate(){ Calendar calendar ...

  3. 控制台获取AngularJS某个元素的Scope

    如何在控制台获取到某个元素的Scope呢? 假设,页面元素为: <label>Name:</label><input type="text" ng-m ...

  4. ASP.NET Web API实现缓存的2种方式

    在ASP.NET Web API中实现缓存大致有2种思路.一种是通过ETag, 一种是通过类似ASP.NET MVC中的OutputCache. 通过ETag实现缓存 首先安装cachecow.ser ...

  5. C#高级编程----反射的小结

    C#反射的应用小结 1.何谓反射? 反射就是在运行的时候发现对象的相关信息.根据这些信息可以动态的执行对象的方法以及获取对象的属性所存储的值.使用.NET编写的代码时自动反射的,或者说是自我描述的.之 ...

  6. Gson全解析(中)-TypeAdapter的使用

    TypeAdapter介绍 前面的Gson全解析(上)中我们理解并分别运用了JsonSerializer和JsonDeserializer进行JSON和java实体类之间的相互转化.这里利用TypeA ...

  7. IDA反汇编学习

    1 转自:http://www.cnblogs.com/vento/archive/2013/02/09/2909579.html IDA Pro是一款强大的反汇编软件,特有的IDA视图和交叉引用,可 ...

  8. 基于redis 实现分布式锁(二)

    https://blog.csdn.net/xiaolyuh123/article/details/78551345 分布式锁的解决方式 基于数据库表做乐观锁,用于分布式锁.(适用于小并发) 使用me ...

  9. SqlDateTime overflow / SqlDateTime 溢出

    Error - SqlDateTime overflow. Must be between 1/1/1753 12:00:00 AM and 12/31/9999 11:59:59 PM SqlDat ...

  10. httpclient检查某个链接是否可用

    private boolean checkUrlIsValid(String url) { CloseableHttpClient httpClient = HttpClients.createDef ...