シリーズ記事ディレクトリ
uniapp-----カプセル化インターフェース
uniapp-----下請け
記事ディレクトリ
序文
uniapp のメイン パッケージのサイズは 2MB を超えてはなりません。そのため、冗長なコードを減らすために、どこでも繰り返されるコードをカプセル化する必要があります。
1. テクノロジー
uniapp、globalData、vue
2. 梱包手順
1. 準備する
request.js と api.js の 2 つのファイルを含む新しいフォルダーを作成します。
2. コードの入力
request.js：
const Url = '域名';
export default (method, i, data) => {//接收的参数 method：请求方式、i：接口路径、data：参数
return new Promise((resolve, reject) => {//实列化promise即异步方法，方便使用resolve, reject
console.log(i, method, data);//打印接收参数是否有误
uni.request({//uniap请求
method: method,
url: Url + i,//拼接路径
data: data,
}).then((res) => {
resolve(res.data)//抛出成功信息
}).catch((res) => {
console.log('请求失败', res);//失败打印返回数据
})
})
};api.js：
import request from "./request.js"//リファレンス リクエスト ファイル
export default {//default export
tokenTimeOut(params) {//インターフェイス名
return request('POST', '/api/Begin/index', params)/ /スローパラメータ
},
}
min.js
import api from "api/api.js" //接口api
Vue.prototype.$api = api
ページの使用
let params = 1;//パラメータ
this.$api.tokenTimeOut(params).then(res => {//カプセル化された API を呼び出します
console.log(res,'1234');//結果を返します
})
要約する
インターフェイスのカプセル化はプロジェクトにとって非常に必要であり、後からドメイン名を変更する場合でも一か所のみの変更で済み、コードの再利用性を下げることができ、コストパフォーマンスも比較的高いです。