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 シリーズファイルシステムフォーマットの詳細な説明
node-media-server を使用するプロセスの一部を記録します。この記事の環境はWindo...
この記事の例では、参考までにvueタイムラインコンポーネントの具体的な実装コードを共有しています。具...
js 実行字句解析フェーズ: 形式パラメータ解析、変数宣言解析、関数宣言解析の 3 つの部分が含まれ...
目次1. はじめに2. インストール3. 基本的な使い方3.1、-rパラメータ3.2、-aパラメータ...
1. Apache Benchの紹介ApacheBench は、Apache サーバーに付属する W...
さまざまなソースからデータを集約することで、中央倉庫を作成できます。データ ウェアハウスは、ビジネス...
1: Baiduウェブサイトログイン入口ウェブサイト: http://www.baidu.com/s...
プロジェクトでは、データを操作するためにバッチ操作ステートメントが必要になることがよくあります。バッ...
選択ドロップダウン リスト フォームは誰もがよく知っているかもしれませんが、デフォルトのドロップダウ...
Nginx は、リバース プロキシ機能を使用して負荷分散を実装できるほか、フォワード プロキシ機能を...
この記事で使用されているPHPベースイメージはphp:7.3-apacheです。この記事の Lara...
ページが非常に長い場合は、下にさらにコンテンツがあることをユーザーに知らせるために矢印が必要になるこ...
以下のように表示されます。 SELECT prod_name,prod_price FROM pro...
序文私は Win7 を搭載した古いラップトップを持っています。古いシステムを維持しながら、同時に U...
MySql インデックスの詳細な紹介と正しい使用方法1. はじめに:インデックスはクエリ速度に重大な...