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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Promise を使用して wx.request アプレットをカプセル化する方法

<<:  Linux ssh サービス情報と実行ステータスを表示する方法

>>:  MySQL 8.0.11 インストール概要チュートリアル図

推薦する

アクセス速度を上げるためにウェブサイトを最適化する方法の更新

最近、同社はitpubを皮切りに、コーポレートウェブサイト傘下の全サイトの評価を開始した。そのために...

CSS の Flex レイアウトを使用してシンプルな縦棒グラフを作成する方法

以下は、Flex レイアウトを使用した棒グラフです。 HTML: <div class=&qu...

MySQL 8.0 アップグレード体験

目次序文1. まず、既存のバージョンの MySQL を完全にアンインストールします。 2. deb ...

Reactフック入門チュートリアル

ステートフック例: 'react' から useState をインポートします。 関...

Vue プロジェクトで axios をカプセル化する方法 (http リクエストの統合管理)

1. 要件Vue.js フレームワークを使用してフロントエンド プロジェクトを開発する場合、サーバ...

CSS と Bootstrap アイコンを使用して、上下にジャンプするインジケーター矢印のアニメーション効果を作成します。

ページが非常に長い場合は、下にさらにコンテンツがあることをユーザーに知らせるために矢印が必要になるこ...

WindowsにJDK8をインストールする方法

1. ダウンロード: http://www.oracle.com/technetwork/java/...

JSパッケージオブジェクトに関する簡単な説明

目次概要意味インスタンスメソッドプリミティブ型とインスタンスオブジェクト間の自動変換カスタムメソッド...

Ubuntu Server でのワイヤレス ネットワーク カードの詳細な設定

1. ワイヤレス ネットワーク カードを挿入し、コマンドiwconfigを使用してワイヤレス ネット...

CSSでemを開く正しい方法の詳細な説明

「通常 1em=16px」と言うのはなぜですか?ユーザーのブラウザによってレンダリングされるデフォル...

MySQL トランザクション同時実行問題の解決

開発中にこのような問題に遭遇しましたビデオ視聴記録が 100 に更新されると、視聴されたことを意味し...

Ubuntu 20.04 LTSの詳細なインストール履歴

この記事では、USB ブート ディスクの作成とシステムのインストールについて説明します。システム構成...

JS で CSS 変数を使用する方法

JS で CSS 変数を使用する方法:export キーワードを使用して、js オブジェクトを le...

Nginxサービス500:内部サーバーエラーの原因の1つ

500 (内部サーバー エラー) サーバーでエラーが発生したため、要求を完了できませんでした。 50...