Promise カプセル化 wx.request メソッド

前回の記事では、Promise を使用して小さなプログラム wx.request をカプセル化する実装方法を紹介しました。この記事では、promise を使用して wx.request をカプセル化する方法について重点的に説明します。具体的な内容は次のとおりです。

wx.request をカプセル化する理由は何ですか?

インターフェースを要求するとき、インターフェースの複数の API を要求することがあるためです。カプセル化を使用しないと、コードの記述が面倒になり、パフォーマンスの問題も発生します。

カプセル化により、コードの作成が容易になり、ユーザーエクスペリエンスが向上し、コードの変更が容易になります。

カプセル化の選択に Promise を使用するのはなぜですか?

WeChat アプレットを書くとき、wx.request を書くとき、この書き方は $.ajax の書き方に似ているので、皆さんもよくご存知だと思います。 $.ajax のカプセル化についてはよく知っているはずなので、それを promise と関連付けることは難しくありません。また、WeChat アプレットは es6 構文をサポートしているため、promise はカプセル化に適した選択肢です。

wx.request をカプセル化するにはどうすればいいですか?

カプセル化の理由とツールがわかったので、次のステップは、難しいwx.requestをカプセル化することです。まず、開発ツールでファイルを作成します。

大きなフォルダーに包み、中身を別々に処理します。

ここに画像の説明を挿入

まず、fetch.js ファイルで、promise を使用して wx.request をカプセル化します。

//promiseはwx.requestをカプセル化する
    module.exports=(url,データ,メソッド)=>{
        //まずpromiseを定義する
        promise = new Promise((resolve, deny) => { とする
            wx.リクエスト({
                url:url,
                データ:データ、
                メソッド:メソッド、
 
                //実行成功(res){
                    解決する
                },
 
                //実行 fail(err){
                    拒否(エラー)
                },
    })
    })
                //Promise をプッシュして Promise を返す
    }

次に、api.js ファイルで、統合管理のために要求する必要があるすべてのものをここに配置します。

//インターフェース管理モジュール.exports={
    "バナー":"/h8/home/multidata"
}

最後に、http.js ファイルでこれを一元管理して使用します。

// ファイルを導入 const api=require("./api")
    const フェッチ = require("./fetch")
 
//パスを定義する let baseUrl="http://123.207.32.32:8000/api"
 
//コンテンツをエクスポートする関数banner(){
        戻り値: fetch(baseUrl+api.banner,{},'get')
    }
 
    モジュール.エクスポート={
        バナー
    }

カプセル化後、使用する前にグローバル app.js にインポートする必要があります。

  定数 http = require('./http/http.js')
 
    アプリ（{
      http,
    })

ファイル内での使用:

    //アプリの紹介
    const アプリ = getApp()
 
    ページ（{
      データ： {
       リスト：[]
      }
 
    onLoad: 関数 () {
        app.http.banner().then(res)=>{
            this.setData({
                リスト:res.data.data.banner.list        
        })
            }
    }

wx.request の promise カプセル化に関するこの記事はこれで終わりです。wx.request の promise カプセル化に関するより関連性の高い内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: