vue3 学習ノートにおける axios の使用の変更の概要

vue3 学習ノートにおける axios の使用の変更の概要

axios を使用する前に、まずインストールする必要があります。

糸追加アクシオス
 
npm インストール axios
 
bower axios をインストール
 
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

作成したプロジェクトに応じて、上記の 4 つのインストール方法を選択できます。

1. axioの基本的な使い方

まずコンポーネントを作成し、axios をインポートして、インポートが成功するかどうかをテストします。次のコードを記述します。

「axios」からaxiosをインポートします
「vue」から{onMounted}をインポートします
エクスポートデフォルト{
 設定(){
  マウント時(()=>{
   アクシオス({
    url:'https://xxxxxx.net/hj/mp/banner/l'
   })
  })
 }
}

onMounted はライフサイクル フック関数です。ページが読み込まれると、このネットワーク リクエストが呼び出されます。 axios メソッドはネットワーク要求メソッドを設定しません。デフォルトは GET リクエストです。

サービスを開いてネットワーク要求を確認すると、要求が失敗したことがわかりました。

エラー内容: オリジン 'http://localhost:3000' からの 'https://xxxxx/hj/mp/banner/l' の XMLHttpRequest へのアクセスが CORS ポリシーによってブロックされました: 要求されたリソースに 'Access-Control-Allow-Origin' ヘッダーが存在しません。

これはクロスドメインの問題を示しています。

2. クロスドメインの問題を解決するには?

この問題を解決するにはプロキシを使用し、新しい vue.config.js ファイルを作成して構成を追加します。

モジュール.エクスポート={
 開発サーバー:{
  プロキシ:{
   '/api':{
    ターゲット: 'https://xxxxx.net',
    変更元:true、
    パス書き換え:{
     '^/api':''
    }
   }
  }
 }
}

効果を確認するためにページを更新すると、恥ずかしいです。要求されたアドレスは完全に正しいのですが、404 アドレスが見つかりませんというプロンプトが繰り返し表示されます。

vue2 のプロジェクトではリクエストは通常​​どおりですが、vue3 では 404 になります。

ネットワーク要求時に、グローバル構成を追加し、要求の URL 内のドメイン名を削除します。

axios.defaults.baseURL = '/api'
axios.defaults.headers.post['Content-Type'] = 'application/json'
 アクシオス({
  url:'/hj/mp/banner/l'
})

変更が完了すると、ページを更新するためのネットワーク要求が成功します。

3. パッケージ

サードパーティのライブラリは一度も使ったことがありません。一番話題になるのは、どうやってカプセル化するか、カプセル化後はどう使うかです。直接使った方がよいのではないでしょうか。

はっきり言いますが、あなたはまだ若すぎます...もう少し損失を経験した後、あなたはそれを思い出すでしょう。カプセル化の最大の利点は、サードパーティのフレームワークにバグがあったり、サードパーティを変更する必要がある場合、1か所を変更するだけで変更が完了することです。メンテナンスが容易で、作業負荷が少なく、見逃しにくいです。

axios リクエスト メソッドは多数あるため、カプセル化には複数の種類が存在する可能性があります。

方法1:

'axios' から axios をインポートします
 
//グローバル設定 axios.defaults.baseURL = "/api"
axios.defaults.timeout = 5000
 
//インターセプター axios.interceptors.request.use(config=>{
 設定を返す
},エラー=>{
 Promise.error(error) を返します
})
axios.interceptors.response.use(response=>{
 応答データを返す
},エラー=>{
 Promise.error(error) を返します
})
 
エクスポート関数 request(url='',params={},type='POST'){
 //URLパラメータ型のデフォルト値を設定する return new Promise((resolve,reject)=>{
  約束させる
  if(type.toUpperCase()==='GET'){
   プロミス = axios({
    URL、
    パラメータ
   })
  }そうでない場合(type.toUpperCase()=== 'POST'){
   プロミス = axios({
    メソッド:'POST',
    URL、
    データ:パラメータ
  })
  }
    //処理 return promise.then(res=>{
   解決する
  }).catch(エラー=>{
   拒否(エラー)
  })
 })
}
 
// 使用時にimport {request} from '../network/request.js'を呼び出す
エクスポートデフォルト{
 マウントされた(){
  リクエスト('/hj/mp/banner/l')。その後(res=>{
   コンソールログ(res);
  }).catch(エラー=>{
   コンソールログ(エラー);
  })
 }
}

axios は promise オブジェクト自体を返すため、外側のレイヤーの promise オブジェクトをインスタンス化する必要がなくなり、カプセル化が簡単になります。

方法2:

'axios' から axios をインポートします
 
//グローバル設定 axios.defaults.baseURL = "/api"
axios.defaults.timeout = 5000
 
エクスポート関数リクエスト(config){
 定数インスタンス = axios.create({
  タイムアウト:50000、
  メソッド:'post'
 })
 
  //リクエストインターセプション instace.interceptors.request.use(config=>{
  設定を返す
 },エラー=>{})
 //レスポンスインターセプション instace.interceptors.response.use(res=>{
  res.dataを返す
 },エラー=>{
  // エラー処理 })
 インスタンス(config)を返す
}
// 使用時にimport {request} from './request'を呼び出す
リクエスト({
 url:'/hj/mp/banner/l',
}).then(res=>{
 コンソールログ(res);
}).catch(エラー=>{
 コンソールログ(エラー);
})

axios をカプセル化する方法はたくさんあります。興味がある場合は、axios ドキュメントにアクセスして詳細を学習し、自分でカプセル化してみるか、保存して直接コピーし、カプセル化せずに将来使用することもできます。

4. axiosへのグローバル参照

上記のカプセル化されたリクエスト メソッドはグローバルに参照できるため、プロジェクト内の任意のファイルで使用できます。

main.js にグローバル プロパティを追加する

const app = createApp(App)
app.config.globalProperties.$http = リクエスト
app.mount('#app')

上記3つの順番は調整できません!

コンポーネント内で使用する場合:

「vue」から{defineComponent、getCurrentInstance、onMounted}をインポートします。
デフォルトのdefineComponentをエクスポートする({
 セットアップ(props,ctx){
  const { プロキシ } = getCurrentInstance()
  マウント時(()=>{
   console.log(プロキシ);
   proxy.$http('/hj/mp/banner/l').then(res=>{
    コンソールログ(res);
   })
  })
 }
})

最後までお読みいただき、ありがとうございます。これは、vue3 での axios の使用で変更された唯一の点です。

vue3学習ノートにおけるaxiosの使い方の変更点についての記事はこれで終わりです。vue3関連のコンテンツについては、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue3はフロントエンドのログを出力するためにaxiosインターセプターを使用する
  • TypeScript を使用して Vue3 で axios をカプセル化する詳細な例
  • Vue3 (V) HTTPライブラリaxiosの統合の詳細
  • Vue3はaxiosのクロスドメイン実装プロセス分析を構成する

<<:  CSS スティッキーフッタークラシックレイアウトの実装

>>:  Firefox ブラウザでバックグラウンド ミュージックを再生するための究極のソリューション (Chrome マルチブラウザ対応)

推薦する

docker runの--rmオプションの使用方法

Docker コンテナが終了しても、デバッグを容易にし、ユーザー データを保持するために、デフォルト...

CSS における XHTML タグの対応する属性と使用法

XHTML CSS を使って Web ページをデザインし始めた頃は、タグの使用経験も少なく、あまり気...

nginx ssl を設定して https アクセスを実装する手順 (初心者向け)

序文サーバーを展開した後、私は大きな喜びを感じながら自分の Web サイトにアクセスし、見たものすべ...

相対幅と絶対幅が競合する場合の HTML+CSS div ソリューション

相対幅と絶対幅が競合する場合のdivソリューション概要: 一般的に、絶対幅を使用する場合は px を...

MySQLの左結合と内部結合について簡単に説明します

序文最近、X 省のコールド チェーン トレーサビリティ システムの開発で忙しくしています。毎日午後 ...

flexとは何か、flexレイアウト構文の詳細なチュートリアル

フレックスレイアウトFlex は Flexible Box の略で、「柔軟なレイアウト」を意味します...

mysqlはルートユーザーと一般ユーザーを作成し、機能を変更および削除します。

方法1: SET PASSWORDコマンドを使用する mysql -u ルート mysql> ...

CSS の 4 つのインポート方法と優先順位の簡単な分析

第一に: CSSを導入する4つの方法CSS を導入する方法には、インライン スタイル、埋め込みスタイ...

LinkedIn がウェブサイト閲覧を簡素化するためにリニューアル

ビジネス ソーシャル ネットワーキング サイト LinkedIn は最近、ナビゲーション バーとユー...

MySQL 8.0.20 Window10無料インストール版設定とNavicat管理チュートリアルグラフィック詳細説明

1. MySQL 8.0.20をダウンロードして解凍するダウンロードリンク: https://dev...

LDAP ユーザー認証を使用するように Linux を構成する方法

私は CentOS に実装された LDAP ユーザー管理を使用しています。これはインターネット上のほ...

imgタグ間のスペースの問題の詳細な説明

IMG タグの基本分析 HTML5 では、img タグには 4 つの要素があります。 (1) src...

Linux クラウド サーバーに JDK と Tomcat をインストールするための詳細な手順 (推奨)

JDKをダウンロードしてインストールするステップ 1: まず、公式 Web サイト http://...

HTML チュートリアル: よく使われる HTML タグのコレクション (6)

関連記事:初心者が学ぶ HTML タグ (5)導入された HTML タグは、必ずしも XHTML 仕...

Filebeat を使用して Nginx ログを収集する方法

Nginx ログは、ユーザーの住所の場所や行動プロファイルなどを分析するために使用できます。Elas...