WeChat アプレットで Promise を使用してコールバックを実装するにはどうすればよいですか?

この記事では主に、WeChat アプレットでのコールバックを簡素化するための Promise の使用法を紹介し、参考として提供します。

Promise は、従来のソリューションであるコールバック関数やイベントよりも合理的かつ強力な非同期プログラミングのソリューションです。これは最初にコミュニティによって提案および実装され、ES6 がそれを言語標準に組み込み、その使用法を統一し、Promise オブジェクトをネイティブに提供しました。

いわゆる Promise は、将来終了するイベント (通常は非同期操作) の結果を保存する単純なコンテナーです。構文的に言えば、Promise は非同期操作のメッセージを取得できるオブジェクトです。 Promise は統一された API を提供しており、さまざまな非同期操作を同様に処理できます。

Promise オブジェクトとは何かを理解する

プロジェクトでは、さまざまな非同期操作が登場しますが、非同期操作のコールバックに非同期操作がある場合、コールバック ピラミッドが表示されます。

例:

promisify.js

// 模拟获取code，然后将code传给后台，成功后获取userinfo，再将userinfo传给后台
// 登录
wx.login({
  success: res => {
    let code = res.code
    // 请求
    imitationPost({
      url: '/test/loginWithCode',
      data: {
        code
      },
      success: data => {
        // 获取userInfo
        wx.getUserInfo({
          success: res => {
            let userInfo = res.userInfo
            // 请求
            imitationPost({
              url: '/test/saveUserInfo',
              data: {
                userInfo
              },
              success: data => {
                console.log(data)
              },
              fail: res => {
                console.log(res)
              }
            })
          },
          fail: res => {
            console.log(res)
          }
        })
      },
      fail: res => {
        console.log(res)
      }
    })
  },
  fail: res => {
    console.log(res)
  }
})

最初に最も単純なものを見てください:

module.exports = (api) => {
  return (options, ...params) => {
    return new Promise((resolve, reject) => {
      api(Object.assign({}, options, { success: resolve, fail: reject }), ...params);
    });
  }
}

上記の promisify.js を使用して単純化した後:

// 获取系统信息
wx.getSystemInfo({
  success: res => {
    // success
    console.log(res)
  },
  fail: res => {

  }
})

getSystemInfo

単純化されたコールバックのインデントが 1 つ少ないことがわかります。となり、コールバック関数が 9 行から 6 行に減りました。

コールバック ピラミッドの簡略化された効果

それでは、最初のコールバック ピラミッドを見てみましょう

const promisify = require('./promisify')
const getSystemInfo = promisify(wx.getSystemInfo)

getSystemInfo().then(res=>{
  // success
  console.log(res)
}).catch(res=>{

})

簡略化されたコールバック

上記は、皆様のお役に立てれば幸いです。将来。

関連記事:

vueでwebpackのパッケージ化最適化を実装する方法

vueのコーディングスタイルの詳しい説明

vue+iview+less+echartsでの実践的なプロジェクト(詳細なチュートリアル)

以上がWeChat アプレットで Promise を使用してコールバックを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。