WeChat アプレット Promise の簡素化されたコールバックの例の共有

Promise は、コールバック関数やイベントといった従来のソリューションよりも合理的かつ強力な非同期プログラミングのソリューションです。これは最初にコミュニティによって提案および実装され、ES6 がそれを言語標準に組み込み、その使用法を統一し、Promise オブジェクトをネイティブに提供しました。この記事では主に、Promise を使用して WeChat アプレットのコールバックを簡素化する方法を紹介します。編集者はこれが非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

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

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

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

たとえば、次のようなものです

// 模拟获取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)
  }
})

次は、Promiseを使用してコードを簡素化する方法を分析しています

WeChatアプレットの非同期APIは成功と失敗の形式であるため、誰かがそのようなメソッドをカプセル化しました。

promisify.js

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

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

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

  }
})

上記の promisify.js を使用して簡略化した後:

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

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

})

getSystemInfo

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

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

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

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

// 登录
login().then(res => {
  let code = res.code
  // 请求
  pImitationPost({
    url: '/test/loginWithCode',
    data: {
      code
    },
  }).then(data => {
    // 获取userInfo
    getUserInfo().then(res => {
      let userInfo = res.userInfo
      // 请求
      pImitationPost({
        url: '/test/saveUserInfo',
        data: {
          userInfo
        },
      }).then(data => {
        console.log(data)
      }).catch(res => {
        console.log(res)
      })
    }).catch(res => {
      console.log(res)
    })
  }).catch(res => {
    console.log(res)
  })
}).catch(res => {
  console.log(res)
})

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

簡略化の効果が非常に明白であることがわかります。

Webページやnodejsなどにも適用できます。

関連する推奨事項:

WeChat アプレット getUserInfo コールバックの詳細な説明

jQuery コールバック メソッドの使用の詳細な説明

PHP コールバック関数の分析

以上がWeChat アプレット Promise の簡素化されたコールバックの例の共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。