uniapp がリクエストリクエストをカプセル化する方法

coldplay.xixi
リリース: 2023-01-13 00:44:17
オリジナル
6779 人が閲覧しました

Uniapp はリクエスト request メソッドをカプセル化します。最初にプロジェクトの下に共通フォルダーを作成し、次に [request.js] ファイルを作成します。次に、[request.js] ファイルを開いてカプセル化されたコードの記述を開始します。 Promise を通じて非同期リクエストを作成し、最後にメソッドをエクスポートします。

uniapp がリクエストリクエストをカプセル化する方法

#このチュートリアルの動作環境: Windows7 システム、uni-app2.5.1 バージョン、thinkpad t480 コンピューター。

推奨 (無料):uni-app 開発チュートリアル

Uniapp はリクエスト request メソッドをカプセル化します。

1. プロジェクトの下に新しい共通フォルダーを作成し、request.js ファイルを作成します

uniapp がリクエストリクエストをカプセル化する方法

2. request.js を開きますファイルを作成してパッケージの作成を開始します コード

アイデアは非常にシンプルです

  • ドメイン名を定義します:baseUrl;

  • 定義method: api;

Promise による非同期リクエスト、そして最後にメソッドをエクスポートします。

request.js の参照コードは次のとおりです

const baseUrl = 'https://unidemo.dcloud.net.cn' const request = (url = '', date = {}, type = 'GET', header = { }) => { return new Promise((resolve, reject) => { uni.request({ method: type, url: baseUrl + url, data: date, header: header, dataType: 'json', }).then((response) => { setTimeout(function() { uni.hideLoading(); }, 200); let [error, res] = response; resolve(res.data); }).catch(error => { let [err, res] = error; reject(err) }) }); } export default request
ログイン後にコピー

3. main.js へのグローバル登録

import request from 'common/request.js' Vue.prototype.$request = request
ログイン後にコピー

uniapp がリクエストリクエストをカプセル化する方法

4. ページ呼び出し

this.$request('/api/news', { // 传参参数名:参数值,如果没有,就不需要传 }).then(res => { // 打印调用成功回调 console.log(res) })
ログイン後にコピー

ページによって呼び出されるindex.vue

  
ログイン後にコピー

は、無料で学習することをお勧めします:

プログラミング ビデオ

以上がuniapp がリクエストリクエストをカプセル化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!