WeChat アプレット (ネットワーク リクエストをカプセル化)

---

序文

次の理由により、WeChat アプレットに付属のネットワーク リクエストを使用しない理由は次のとおりです。

1. コードの重複を避ける
2. コールバック地獄を回避する

---

1. 梱包要件

1. カプセル化機能
   1. 機能ポイントが明確
   2. 関数内では固定コード（静的）を保持する必要があります
   3. 動的データはパラメータとして抽出され、実際のパラメータはユーザーが自分の状況に応じて動的に渡します。
   4. 優れた機能関数では、仮パラメータのデフォルト値 (ES6 の仮パラメータのデフォルト値) を設定する必要があります。
2. 機能コンポーネントをカプセル化する
   1. 機能ポイントが明確
   2. 静的コードをコンポーネント内に保持する
   3. 動的データを props パラメータに抽出し、ユーザーは独自の条件に従ってラベル属性の形式で props データを動的に渡すことができます。
   4. 優れたコンポーネントは、コンポーネントの必要性とデータ型を設定する必要があります。

   props: {
         
         
   	msg: {
         
         
   		required: true,
   		default: 默认值,
   		type: string
   	}
   }
   

2. WeChat アプレットに付属するネットワーク リクエスト

Page({
    
    
	onLoad(options) {
    
    
	   wx.request({
    
    
	     url: 'http://localhost:3000/banner',
	     data: {
    
    
	       type: 2
	     },
	     success: (res) => {
    
    
	       console.log('请求成功：', res)
	     },
	     fail: (err) => {
    
    
	       console.log('请求失败：', err)
	     }
	   })
	 },
})

2 番目に、特定のパッケージの実装

ディレクトリ構造

request.js ファイル

import config from "./config";
export default (url, data={
    
    }, method="GET") => {
    
    
  // 1. new Promise 初始化 promise 实例的状态为 pending
  return new Promise((resolve, reject) => {
    
    
    wx.request({
    
    
      url: config.host + url,
      data,
      method,
      success: (res) => {
    
    
        // console.log('请求成功：', res)
        // 2.1 修改 promise 实例的状态为成功
        resolve(res.data)
      },
      fail: (err) => {
    
    
        // console.log('请求失败：', err)
        // 2.2 修改 promise 实例的状态为失败
        reject(err)
      }
    })
  })
}

config.js ファイル

// 配置服务器相关信息
export default {
    
    
  host: 'http://localhost:3000'

}

特定の通話

Page({
    
    
	async onLoad(options) {
    
    
	   let result = await request('/banner', {
    
    type: 2})
	   console.log('结果数据：', result);
	 },
})