本篇文章介紹了微信小程式開發中非同步處理的方法,希望對學習微信小程式開發的朋友有幫助!
微信小程式如何進行非同步處理
微信小程式是透過wx.request進行非同步處理,使用起來確實有很多不方便,不能忍,幸好小程式是支援ES6語法的,所以可以使用promise稍加改造。
推薦學習:小程式開發
Page({ data: { myData: }, // loadMyData函数用于打印myData的值 loadMyData () { console.log(获取到的数据为: + this.data.myData) }, // 生命周期函数onload用于监听页面加载 onload: function () { wx.request({ url: https://api, // 某个api接口地址 success: res => { console.log(res.data) this.setData({ myData: res.data }) console.log(this.data.myData) } }) // 调用之前的函数 this.loadMyData() } })
然後我們會在控制台到這樣的結果:
這其實是一個很簡單的非同步問題,wx.request是異步請求,JS不會等待wx.request執行完畢再往下執行,所以JS按順序會先執行this.loadMyData(),等伺服器回傳資料以後,loadMyData()早就執行了,當然也就沒有拿到值啦。
其實我們在同步流程中才說“返回”,非同步沒有“返回”這個概念(或者說非同步返回是沒有意義的),非同步對應的是“回調”,也就是說,對於一個非同步函數,我們應該傳入一個「回呼函數」來接收結果。
初步解決:透過回呼接收結果
最簡單的解決方案,就是把需要使用非同步資料的函數寫在回調裡:
onload: function () { wx.request({ url: https://api, // 某个api接口地址 success: res => { console.log(res.data) this.setData({ myData: res.data }) console.log(this.data.myData) // 把使用数据的函数写在回调函数success中 this.loadMyData() } }) }
而我們發現,微信小程式的網路請求wx.request,也正是這種依靠回呼函數的形式,類似於以前的$.ajax,它在邏輯複雜、頁面執行順序要求多的情況下,弊端也是很明顯的。不過好在小程式支援ES6,我們可以盡情擁抱Promise!
使用Promise包裝wx.request
Promise這東西簡單說來就是,它可以將非同步的執行邏輯和結果處理分離,摒棄了一層又一層的回呼嵌套,使得處理邏輯更加清晰。
/** * requestPromise用于将wx.request改写成Promise方式 * @param:{string} myUrl 接口地址 * @return: Promise实例对象 */ const requestPromise = myUrl => { // 返回一个Promise实例对象 return new Promise((resolve, reject) => { wx.request({ url: myUrl, success: res => resolve(res) }) }) } // 我把这个函数放在了utils.js中,这样在需要时可以直接引入 module.exports = requestPromise
現在再使用試試:
// 引用模块 const utilApi = require(../../utils/util.js) Page({ ... // 生命周期函数onload用于监听页面加载 onLoad: function () { utilApi.requestPromise(https://www.bilibili.com/index/ding.json) // 使用.then处理结果 .then(res => { console.log(res.data) this.setData({ myData: res.data }) console.log(this.data.myData) this.loadMyData() }) } })
結果和使用回呼函數一致。當有多個非同步請求時,直接不斷地.then(fn)去處理即可,邏輯清晰。
當然,這裡只是寫了一個最簡單的Promise函數,還不完整。更完整的Promise化wx.request,等以後業務需要再完善吧。另外各種小程式開發框架也都有了現成的promise化API,拿來即用。
PHP中文網,大量程式教學和網站建立教學,歡迎學習!
以上是微信小程式如何進行非同步處理的詳細內容。更多資訊請關注PHP中文網其他相關文章!