WeChat アプレットをゼロから 1 まで独学: プロジェクト構築後の http リクエストのカプセル化

1. http モジュールの再パッケージ

まず第一に、なぜ WeChat の http モジュールを再パッケージする必要があるのでしょうか? まず、WeChat の組み込み http リクエストがどのように記述されているかを見てみましょう。

wx.request({
  url: 'test.php', //仅为示例，并非真实的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log(res.data)
  }
})

このリクエスト メソッドは、古代の jquery メソッドに似ています。成功コールバック関数でいくつかのビジネス操作を実行する必要があります。このメソッドはコールバック 地獄の問題を引き起こすため、コードは十分直感的ではありません。そして、コードは次のとおりです。面倒すぎます;

次に、promise を使用してコードをパッケージ化し、リクエスト メソッドを簡素化します

1. プロジェクト ディレクトリの構築

utils ディレクトリの下に request.js ファイルを作成して http リクエストをカプセル化します。Promise を通じてカプセル化します。これはエラーの処理に役立ち、ビジネス ロジックも表示できますカプセル化されたサンプル コードは次のとおりです:

/**
 * 
 * @param {String} url 
 * @param {Object} data 
 * @param {String} method 
 * @param {String} header 
 */
function request(url, data={}, method='GET', header="Content-Type: application/json",) {
    return new Promise(function (resolve, reject) {
        wx.request({
            url: url,
            data: data,
            header: header,
            method: method,
            dataType: 'json',
            responseType: 'text',
            success: (res)=>{
                if(res.statusCode === 200) {
                    if (res.data.code === 200) {
                        resolve(res.data)
                    } else {
                        wx.showToast({
                            title: res.data.msg,
                            icon: 'none',
                            image: '',
                            duration: 1500,
                            mask: false,
                            success: (result)=>{
                                resolve(res.data);
                            },
                        });
                    }
                } else {
                   
                }
            },
            fail: (res)=>{
                // 需要我们加上统一的错误处理代码
                reject(res)
            },
            complete: ()=>{}
        });
    }) 
}

// 封装方法
// 如果对于header有什么特殊的要求，可以在请求参数里面做一些添加，例如后续我们会在headder中加入我们的sessionkey这些内容
// header = {}里面添加header内容
// 这块是一个简版的说明
const header = {
    "Content-Type": "application/json",
    // 这个token是微信登录以后，将token存入在缓存中
    "token": "*****************"
}

const get = function(url, data, header) {
    return request(url, data, 'GET', header);
}

const post = function(url, data, header) {
    return request(url, data, 'POST', header);
}

const del = function(url, data, header) {
    return request(url, data, '', header);
}


module.exports = {
    get,
    post,
    del,
}

2. プロジェクトでのリクエストの使用

最初に、次の場所にカプセル化された http モジュールを紹介します。 use

import webHttp from './utils/request';

次に、カプセル化された webhttp ツールを使用できます。これにより、以前の WeChat のリクエスト request メソッドの直接使用と比較して、コードの量が削減されます。同時に、チェーン メソッドにより、ロジックがより明確になります

webHttp.get(api.user.info, {
    // nick_name: 
    ...self.globalData.userInfo
}).then((res) => {
    console.log(res);
})

ざっくりこんな感じの処理ですが、実際の処理ではバックエンドのRestful APIのメソッドに合わせてカプセル化をさらに改良する必要があるかもしれません、ポストリクエストのデータパラメータも別の処理をします。実際の状況に応じて対応する調整を行ってください。この記事が役に立った場合は、保存して「いいね！」してください。より良い方法がある場合は、コミュニケーションを歓迎します。進歩は決して止まりません。

推奨チュートリアル: 「WeChat ミニ プログラム>>

以上がWeChat アプレットをゼロから 1 まで独学: プロジェクト構築後の http リクエストのカプセル化の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。