ネットワーク リクエストの基本的なチュートリアルとカプセル化
ネットワーク リクエストの基本的なチュートリアル
WeChat は、ネットワーク リクエスト用の専用 API インターフェイスを提供します。wx.request(Object object)
| 属性 | タイプ | デフォルト | 必須 | 例証する |
|---|---|---|---|---|
| URL | ストリング | はい | 開発者サーバー インターフェイス アドレス | |
| データ | 文字列/オブジェクト/ArrayBuffer | 番号 | リクエストパラメータ | |
| ヘッダ | 物体 | 番号 | リクエストのヘッダーを設定します。リファラーはヘッダーに設定できません。content-typeデフォルトはapplication/json |
|
| タイムアウト | 番号 | 番号 | ミリ秒単位のタイムアウト時間。デフォルト値は 60000 です | |
| 方法 | ストリング | 得る | 番号 | HTTP リクエスト メソッド |
| データ・タイプ | ストリング | json | 番号 | 返されるデータ形式 |
| 応答タイプ | ストリング | 文章 | 番号 | 応答のデータ型 |
上記の属性のうち、主な属性は次のとおりです。
url: 渡す必要があります。そうでない場合は、何かをリクエストします。
data: リクエストパラメータ
method: リクエストのメソッド
成功: 成功時のコールバック
失敗: 失敗時のコールバック
ネットワーク リクエスト API の基本的なチュートリアル
通常、ページの onLoad ライフ サイクルでネットワーク リクエストを送信します。
パラメーターなしの GET 要求を直接
wx.request(Object object)送信することにより:
Page({
data: {
allCities: {
}
},
// onLoad生命周期发送网络请求
onLoad() {
wx.request({
// 发送网络请求的地址
url: "http://123.207.32.32:1888/api/city/all",
// 拿到请求的结果
success: (res) => {
// 将获取的结果保存到data中
const data = res.data.data
this.setData({
allCities: data
})
},
// 拿到错误信息
fail: (err) => {
console.log(err);
}
})
}
})
wx.request(Object object)パラメータを指定して GET リクエストを直接送信する方法:
Page({
onLoad() {
wx.request({
url: 'http://123.207.32.32:1888/api/home/houselist',
// 无论是POST请求还是GET请求, 参数都是在data中传递
data: {
page: 1
},
success: (res) => {
console.log(res);
},
fail: (err) =>{
console.log(err);
}
})
}
})
ネットワーク要求構成ドメイン名
各WeChatアプレットにはあらかじめ通信ドメイン名を設定する必要があり、アプレットは指定されたドメイン名としか通信できません。
小さなプログラムのログイン背景 - 開発管理 - 開発設定 - サーバー ドメイン名。
「Mini Program Background - Development - Development Settings - Server Domain Name」でサーバードメイン名を設定してください。
ドメイン名はhttps (wx.request、wx.uploadFile、wx.downloadFile) およびwss (wx.connectSocket) プロトコルのみをサポートします。
ドメイン名に IP アドレス (アプレットのローカル エリア ネットワーク IP を除く) または localhost を使用することはできません。
ポートは https://myserver.com:8080 のように構成できますが、構成後は、https://myserver.com:8080 に対してのみ要求を行うことができます。https://myserver.com、https://myserver.com:9091 などの URL へのリクエストは失敗します。
ポートが構成されていない場合。たとえば、https://myserver.com の場合、要求された URL には、デフォルトの 443 ポートであっても、ポートを含めることはできません。https://myserver.com:443 へのリクエストは失敗します。
ドメイン名は ICP レコードを通過する必要があります。
セキュリティ上の理由から、api.weixin.qq.com をサーバー ドメイン名として構成することはできず、関連する API をアプレット内で呼び出すことはできません。開発者は AppSecret をバックグラウンド サーバーに保存し、getAccessToken インターフェースを使用してサーバー経由で access_token を取得し、関連する API を呼び出す必要があります。
親ドメイン名を構成してサブドメイン名を使用することはサポートされていません。
ネットワーク リクエストのカプセル化
アプレットが提供するネットワーク リクエストは非常に使いにくく、コールバック地獄になりやすいため、通常、アプレットのネットワーク リクエストをカプセル化します。
ネットワーク リクエストをカプセル化するには、次の 2 つのアイデアがあります。
アイデア 1: 関数としてカプセル化する
export function yqRequest(options) {
return new Promise((resolve, reject) => {
wx.request({
...options,
success: (res) => {
resolve()
},
fail: reject
})
})
}
- このように、この関数を使用してネットワーク リクエストを送信し、この関数を使用してネットワーク リクエストを送信し、Promise または async and await を介して結果を取得できます。
import {
yqRequest } from "../../service/index"
Page({
onLoad() {
// 通过Promise获取结果
yqRequest({
url: "http://123.207.32.32:1888/api/city/all"
}).then(res => {
console.log(res);
})
yqRequest({
url: 'http://123.207.32.32:1888/api/home/houselist',
data: {
page: 1
}
}).then(res => {
console.log(res);
})
}
})
import {
yqRequest } from "../../service/index"
Page({
onLoad() {
// 此处调用封装的异步函数
this.getCityData()
this.getHouseListData()
},
// 使用async和await获取结果, 为了防止同步最好再封装成独立方法
async getCityData() {
const cityData = await yqRequest({
url: "http://123.207.32.32:1888/api/city/all"
})
console.log(cityData);
},
async getHouseListData() {
const houseListData = await yqRequest({
url: 'http://123.207.32.32:1888/api/home/houselist',
data: {
page: 1
}
})
console.log(houseListData);
}
})
アイデア 1: クラスにカプセル化する(クラスにカプセル化するとスケーラビリティが向上する)
// 网络请求封装成类
class YQRequest {
// 传入配置的baseurl
constructor(baseUrl) {
this.baseUrl = baseUrl
}
request(options) {
const {
url } = options
return new Promise((resolve, reject) => {
wx.request({
...options,
url: this.baseUrl + url,
success: (res) => {
resolve(res)
},
fail: reject
})
})
}
get(options) {
return this.request({
...options, method: "get" })
}
post(options) {
return this.request({
...options, method: "post" })
}
}
export const yqRequest = new YQRequest("http://123.207.32.32:1888/api")
- クラスのインスタンスを使用してネットワーク リクエストを送信すると、Promise または async と await を介して結果を取得することもできます (async と awaitはここでは説明しません) 。
import {
yqRequest } from "../../service/index"
Page({
onLoad() {
// 使用类的实例发送网络请求
yqRequest.request({
url: "/city/all"
}).then(res => {
console.log(res);
})
yqRequest.get({
url: '/home/houselist',
data: {
page: 1
}
}).then(res => {
console.log(res);
})
}
})