微信小程序中使用Async-await方法異步請求變?yōu)橥秸埱蠓椒?/h1>
更新時間:2019年03月28日 15:10:30 作者:Mr.曹
這篇文章主要介紹了微信小程序中使用Async-await方法異步請求變?yōu)橥秸埱蠓椒?,具有一定的參考價值,感興趣的小伙伴們可以參考一下
微信小程序中有些 Api 是異步的,無法直接進行同步處理。例如:wx.request、wx.showToast、wx.showLoading等。如果需要同步處理,可以使用如下方法:
注意:
Async-await方法屬于ES7語法,在小程序開發(fā)工具中如果勾選es6轉es5, 會報錯:
ReferenceError: regeneratorRuntime is not defined
避免報錯,可以引入 regenerator
在根目錄下創(chuàng)建 lib 文件夾,并將 https://github.com/facebook/regenerator/tree/master/packages 里面的 regenerator-runtime 文件夾放進去。
然后在使用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)
})
})
},
})
參考:http://www.dbjr.com.cn/article/158645.htm
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
-
深入理解JavaScript系列(35):設計模式之迭代器模式詳解
這篇文章主要介紹了深入理解JavaScript系列(35):設計模式之迭代器模式詳解,迭代器模式(Iterator):提供一種方法順序一個聚合對象中各個元素,而又不暴露該對象內部表示,需要的朋友可以參考下 2015-03-03
最新評論
微信小程序中有些 Api 是異步的,無法直接進行同步處理。例如:wx.request、wx.showToast、wx.showLoading等。如果需要同步處理,可以使用如下方法:
注意:
Async-await方法屬于ES7語法,在小程序開發(fā)工具中如果勾選es6轉es5, 會報錯:
ReferenceError: regeneratorRuntime is not defined
避免報錯,可以引入 regenerator
在根目錄下創(chuàng)建 lib 文件夾,并將 https://github.com/facebook/regenerator/tree/master/packages 里面的 regenerator-runtime 文件夾放進去。
然后在使用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) }) }) }, })
參考:http://www.dbjr.com.cn/article/158645.htm
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
深入理解JavaScript系列(35):設計模式之迭代器模式詳解
這篇文章主要介紹了深入理解JavaScript系列(35):設計模式之迭代器模式詳解,迭代器模式(Iterator):提供一種方法順序一個聚合對象中各個元素,而又不暴露該對象內部表示,需要的朋友可以參考下2015-03-03