このPromise ベースの Mini Program API の記事では、Mini Program で公式に提供されている非同期 API がコールバック関数に基づいて実装されていると述べていますが、このようなコールバック関数を多用すると、コールバック地獄とコードの可読性の問題が発生します。パフォーマンスと保守性の低さは、Mini Program API を Promising することで解決できるため、この記事では、WeChat Mini Program ネットワーク データ リクエストのインターフェイス リクエストをカプセル化する方法について説明します。
アプレット リクエスト リクエストをカプセル化する
/utils ディレクトリに request.js ファイルを作成して、アプレットのリクエスト リクエストをカプセル化します。
// 封装数据请求request
const BASE_URL = ''; // 基础地址
export default function request(url,params={}){
return new Promise((resolve,reject)=>{
wx.showLoading({ // 请求提示
title: '正在加载中...',
})
wx.request({
url: BASE_URL + url, // 请求url地址
data: params.data || {}, // 请求参数
header: params.header || {}, // 请求头
method: params.method || 'GET', // 请求方式
dataType: 'json', // 返回数据类型
success: (res)=> { // 成功调用
wx.hideLoading(); // 关闭请求提示
resolve(res.data) // 成功处理res.data中的数据
},
fail: (err)=> { // 失败调用
wx.hideLoading(); // 关闭请求提示
wx.showToast({ // 提示错误信息
title: err || '请求错误！',
})
reject(err) // 失败处理err
}
})
})
}リクエストのネットワーク データ リクエストのカプセル化はそれほど複雑ではなく、いくつかのコメントで理解しやすいはずです. new Promise(..) を返す前に、返されるのは Promise オブジェクトであり、新しい Promise を作成することができます Get をdata には 2 つのパラメーターがあり、2 つのパラメーターは関数、つまり高次関数です; リクエストの前に、wx.showLoading を使用してリクエストがロード中であることを知らせ、wx.request を介してデータ リクエストを開始し、ベース アドレス BASE_URL、および pass データが着信パラメーターを受け取り、ヘッダーとメソッドが同じである、success が正常に呼び出されて要求プロンプトが閉じられ、解決に引き渡されて成功した結果が処理された、fail が呼び出しに失敗して要求プロンプトを閉じた、および同時に、ユーザーに間違った情報を要求するように促し、それを拒否して失敗の結果を処理するように渡す必要があります。
カプセル化されたリクエストリクエストを呼び出す方法は?
まず、データリクエストのテストインターフェースを用意しましょう. ここでは、ローカル Node.js を搭載したサーバーが提供する API インターフェースをテストに使用します:
テスト インターフェイスが準備されました。BASE_URL ベース アドレスを http://127.0.0.1:3000 に設定します。
const BASE_URL = 'http://127.0.0.1:3000'ここで、WeChat Mini Program Developer Tools で [Check] [Details] - [Do not verify legal domain name...] を設定する必要があります。
index.wxml でボタンを設定します。
<button bindtap="handleClick">request请求</button>index.js にカプセル化リクエスト データ リクエスト ファイルを導入し、ボタンのトリガー イベント handleClcik を記述します。
// index.js
const app = getApp()
import request from '../../utils/request'
Page({
handleClick(){
request('/api/navList').then(res=>{
console.log(res);
})
}
})
各データ インターフェイス リクエスト関数をカプセル化する
プロジェクトで使用される多くのインターフェイス データ リクエストがありますが、現時点では、これらのインターフェイス関数はカプセル化されており、使用時に直接インポートして使用できます。
/util/api.js ファイルを作成して、各インターフェースのリクエスト機能をカプセル化します。
// 引入封装request请求函数
import request from './request'
// 获取swiperList数据
export const reqSwiperList = () => request('/api/swiperList')
// 获取navList数据
export const reqNavList = () => request('/api/navList')
// 获取category数据
export const reqCategory = () => request('/api/category')
以下は、index.js の onLoad で呼び出されて使用されます。
...
onLoad:function(){
reqSwiperList().then(res=>{console.log('reqSwiperList',res)});
reqNavList().then(res=>{console.log('reqNavList',res)});
reqCategory().then(res=>{console.log('reqCategory',res)});
}
...
非同期で待機
async と await を使用すると、.then(res=>{}) を使用するよりも簡潔になります; handleClick の request 関数を変更しましょう。
handleClick(){
reqSwiperList().then(res=>{
console.log(res);
})
}async を使用して書き込みを待機します。
async handleClick(){
const res = await reqSwiperList()
console.log(res)
}
上記は、アプレットのリクエストデータリクエストをカプセル化し、各インターフェースのデータリクエスト機能をカプセル化した内容であり、アプレットプロジェクトで使用でき、アプレットのリクエストリクエストをカプセル化し、各インターフェースのリクエストをカプセル化することができますアプレットプロジェクトの詳細 Go up! ご協力ありがとうございました！! !
