uniapp がネットワーク リクエストのカプセル化を実装する方法

coldplay.xixi
リリース: 2020-12-21 17:25:19
オリジナル
9682 人が閲覧しました

Uniapp はネットワーク リクエストのカプセル化メソッドを実装します。最初に最初のリクエストを実装し、次に新しい [request.js] ファイルを作成します。コードは [return new Promise((resolved,ield) => {uni.request] です。 ..] ;最後に最適化するだけです。

uniapp がネットワーク リクエストのカプセル化を実装する方法

このチュートリアルの動作環境: Windows7 システム、uni-app2.5.1 バージョン、この方法はすべてのブランドに適しています

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

uniapp によるネットワーク リクエストのカプセル化の実装方法:

1. uniapp の最初のリクエストは次のように使用されます:

uni.request({ url: 'https://www.example.com/request', //仅为示例,并非真实接口地址。 data: { text: 'uni.request' }, header: { 'custom-header': 'hello' //自定义请求头信息 }, success: (res) => { console.log(res.data); }.fail = (err) => { console.log(err); } });
ログイン後にコピー

2. まず Promise を通じて単純なカプセル化を実行し、新しいリクエストを作成します.js ファイル:

//options参数我们后面会说 function service(options = {}) { return new Promise((resolved, rejected) => { uni.request({ url: options.url, //仅为示例,并非真实接口地址。 data: options.data, header: { 'content-type': 'application/x-www-form-urlencoded', 'accessToken': `${token}` //权限token }, success: (res) => { rejected(res.data); }.fail = (err) => { rejected(err) } }); } } export default service;
ログイン後にコピー

3. 最後に、前の手順に基づいて再度最適化します。

//把配置项单独处理 import store from '/store/index.js'; //vuex let server_url=' ';//请求地址 let token = ' '; 凭证 process.env.NODE_ENV === 'development' ? '192.168.0.1' : 'http://***/api' ; //环境配置 function service(options = {}) { store.state.token && (token = store.state.token); //从vuex中获取登录凭证 options.url = `${server_url}${options.url}`; //配置请求头 options.header = { 'content-type': 'application/x-www-form-urlencoded', 'accessToken': `${token}` //Bearer }; return new Promise((resolved, rejected) => { //成功 options.success = (res) => { if (Number(res.data.code) == 0) { //请求成功 resolved(res.data.data); } else { uni.showToast({ icon: 'none', duration: 3000, title: `${res.data.msg}` }); rejected(res.data.msg);//错误 } } //错误 options.fail = (err) => { rejected(err); //错误 } uni.request(options); }); } export default service;
ログイン後にコピー

4. 次に、それを使用します。

1. 新しいページを作成します。

#ディレクトリは次のとおりです

#┌─common

│ §─request.js //Request

┌─pages

│ §─index

│ │ └─api.js //api list

│ │ └─index.vue //ページファイル

til─static

─store

│ ├─index.js //vuex

§─main.js

─App.vue

─manifest.json

─pages.json

2. 設定します。 api list.api.js //api list

import request from '/common/request.js' export function login(data) { return request({ url: '/user/login', method: 'POST', data }) }
ログイン後にコピー

3. ページで

import { login} from './api.js'; //引入需要的api //发起请求 onLoad() { login('parameter').then(data => { console.log(data); }); }...
ログイン後にコピー
を使用します

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

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