前回の記事では、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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Linux ssh サービス情報と実行ステータスを表示する方法
>>: MySQL 8.0.11 インストール概要チュートリアル図
最近、同社はitpubを皮切りに、コーポレートウェブサイト傘下の全サイトの評価を開始した。そのために...
以下は、Flex レイアウトを使用した棒グラフです。 HTML: <div class=&qu...
目次序文1. まず、既存のバージョンの MySQL を完全にアンインストールします。 2. deb ...
ステートフック例: 'react' から useState をインポートします。 関...
1. 要件Vue.js フレームワークを使用してフロントエンド プロジェクトを開発する場合、サーバ...
システム環境: Win10 64ビットMySQL バージョン: mysql-5.7.18-winX6...
ページが非常に長い場合は、下にさらにコンテンツがあることをユーザーに知らせるために矢印が必要になるこ...
1. ダウンロード: http://www.oracle.com/technetwork/java/...
目次概要意味インスタンスメソッドプリミティブ型とインスタンスオブジェクト間の自動変換カスタムメソッド...
1. ワイヤレス ネットワーク カードを挿入し、コマンドiwconfigを使用してワイヤレス ネット...
「通常 1em=16px」と言うのはなぜですか?ユーザーのブラウザによってレンダリングされるデフォル...
開発中にこのような問題に遭遇しましたビデオ視聴記録が 100 に更新されると、視聴されたことを意味し...
この記事では、USB ブート ディスクの作成とシステムのインストールについて説明します。システム構成...
JS で CSS 変数を使用する方法:export キーワードを使用して、js オブジェクトを le...
500 (内部サーバー エラー) サーバーでエラーが発生したため、要求を完了できませんでした。 50...