1. 要件Vue.js フレームワークを使用してフロントエンド プロジェクトを開発する場合、サーバー インターフェイスへの Ajax リクエストが頻繁に送信されます。開発プロセスでは、プロジェクトでの使用を容易にするために、axios をさらにカプセル化する必要があります。 2. Vueプロジェクト構造次のディレクトリ構造で Vue プロジェクトをローカルに作成します。
Vueプロジェクトにaxiosの管理ディレクトリとしてhttpディレクトリを作成します。httpディレクトリには2つのファイルがあります。
3. コード例/http/api.js ファイルのコードは次のとおりです。 エクスポートデフォルト{ 'users_add': '/users/add', 'users_find': '/users/find', 'users_update': '/users/update', 'users_delete': '/users/delete' } /http/index.js ファイルのコードは次のとおりです。 'axios' から axios をインポートします './api' から api をインポートします //axiosインスタンスオブジェクトを作成するlet instance = axios.create({ baseURL: 'http://localhost:3000', //サーバーアドレス タイムアウト: 5000 //デフォルトのタイムアウト期間}) //リクエストインターセプターinstance.interceptors.request.use(config=>{ //ここでリクエストインターセプトのコードを記述します。これは通常、読み込みウィンドウをポップアップするために使用されます。console.log('Requesting...') 設定を返す },エラー=>{ console.error('リクエストが失敗しました',err) }) //レスポンスインターセプターinstance.interceptors.response.use(res=>{ //ここで応答データを処理します console.log('リクエストが成功しました!') return res //返されたオブジェクトはリクエストメソッドのレスポンスオブジェクトに渡されます},err=>{ // 応答エラー処理 console.log('応答に失敗しました!', err) // Promise.reject(err) を返します。 }) //axios リクエスト メソッドをカプセル化します。パラメーターは構成オブジェクトです //option = {method,url,params} method はリクエスト メソッド、url はリクエスト インターフェイス、params はリクエスト パラメーターです async function http(option = {}) { 結果 = null とする if(option.method === 'get' || option.method === 'delete'){ // 取得および削除リクエストを処理する await instance[option.method]( api[オプション.url], {パラメータ: オプション.パラメータ} ).then(res=>{ 結果 = res.data }).catch(エラー=>{ 結果 = エラー }) }それ以外の場合(option.method === 'post' || option.method === 'put'){ //POSTおよびPUTリクエストを処理する await instance[option.method]( api[オプション.url], オプション.パラメータ ).then(res=>{ 結果 = res.data }).catch(エラー=>{ 結果 = エラー }) } 結果を返す } デフォルトのhttpをエクスポート カプセル化された /http/index.js ファイルを main.js エントリ ファイルにインポートします。サンプル コードは次のとおりです。 'vue' から Vue をインポートします './App.vue' からアプリをインポートします。 './router' からルーターをインポートします './store' からストアをインポートします './http' から http をインポートします Vue.config.productionTip = false Vue.prototype.$http = http Vue.use(Elementui) 新しいVue({ ルーター、 店、 レンダリング: h => h(App) }).$mount('#app') App.vue ルート コンポーネントで axios リクエストをテストします。サンプル コードは次のとおりです。 <テンプレート> <div> <button @click="getDate">リクエストを送信</el-button> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ メソッド: { 日付を取得する(){ this.$http({ メソッド: 'get'、 url: 'users_find' }).then(res=>{ コンソール.log(res) }) } } } </スクリプト> ここには http://localhost:3000/users/find インターフェースが必要です。そうでないと、リクエストは失敗します。 4. 効果の実証Vue プロジェクトを起動し、ブラウザで Vue プロジェクトのアドレスにアクセスします。私のアドレスは http://localhost:8080 です。ボタンをクリックしてリクエストを送信します。結果は下の図のようになります。 この時点で、Vue プロジェクトで単純な axios カプセル化が完了しました。実際のニーズに応じて axios をカプセル化することもできます。この記事は参考用です。 Vue プロジェクトで axios (http リクエストの統合管理) をカプセル化する方法についてはこれで終わりです。Vue カプセル化 axios 管理 http リクエストに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQL の InnoDB ストレージ ファイルの詳細な説明
>>: Linux の EXT シリーズファイルシステムフォーマットの詳細な説明
まず、MySQL とは何かを理解しましょう。 MySQL は、スウェーデンの会社 MySQL AB ...
実際、Apacheクラスタを構築するのは難しくありません。私もインターネットで情報を見つけて自分で設...
1 BEM命名標準とはBem は、ブロック、要素、修飾子の略語であり、Yandex チームによって...
導入MySQL InnoDB エンジンがレコードをクエリし、インデックス カバレッジを使用できない場...
現在、コンピュータモニターの画面解像度はますます高くなる傾向にありますが、携帯電話などのモバイルデバ...
目次1. binlogの3つのモード1.ステートメントレベルモード2. 行レベルモード3. 混合モー...
質問:最近、プロジェクトを展開すると文字化けしたデータが出てきました。確認したところ、プロジェクトは...
目次1. MySQLでよく使われる文字列関数2. 数値関数3. 日付と時刻の機能4. プロセス機能5...
目次1. 補足知識ポイント: 関数の暗黙的な変換2. 補足知識: call/apply を使って配列...
注意 ノーブレークスペース = ノーブレークスペース、 iexcl ¡ &...
みなさんこんにちは。今日はカルーセルの実装についてお話しします。私が作成したカルーセルの効果は次のと...
https ベースポート 443。これはキーと呼ばれるものに使用されます。これらのことを理解せずにで...
CSS の位置属性は要素の配置タイプを指定し、上、下、左、右を使用して要素を具体的に配置します...
123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...
また、多くの場合、メンテナンスのために Web サイトを少なくとも数分間オフラインにする必要がありま...