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

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

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

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