首頁  >  文章  >  微信小程式  >  微信小程式如何進行非同步處理

微信小程式如何進行非同步處理

angryTom
angryTom轉載
2020-03-18 10:07:208729瀏覽

本篇文章介紹了微信小程式開發中非同步處理的方法,希望對學習微信小程式開發的朋友有幫助!

微信小程式如何進行非同步處理

微信小程式如何進行非同步處理

微信小程式是透過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中文網其他相關文章!

陳述:
本文轉載於:zixun.jisuapp.cn。如有侵權,請聯絡admin@php.cn刪除