WeChatアプレットで非同期処理を行う方法

この記事では、WeChat アプレット開発における非同期処理方法を紹介しますので、これから WeChat アプレット開発を学習する友人の参考になれば幸いです。

WeChat アプレットが非同期処理を実行する方法

WeChat アプレットは、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() 
        } 
    }) 
}

また、WeChat アプレットのネットワークリクエスト 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 中国語 Web サイト、多数のプログラミング チュートリアルと Web サイト構築チュートリアル、学習へようこそ!

以上がWeChatアプレットで非同期処理を行う方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。