Axios を使用して Vue で非同期リクエストとデータ対話を実装するにはどうすればよいですか?

Vue は広く使用されている JavaScript フレームワークで、Axios を含む多くの人気のあるライブラリやプラグインをサポートしています。 Axios は、Vue アプリケーションでの非同期リクエストとデータ対話を可能にする Promise ベースの HTTP ライブラリです。

この記事では、Axios を使用して Vue アプリケーションに非同期リクエストとデータ対話を実装する方法を学びます。具体的には、Vue コンポーネント内での使用方法、Axios のデフォルト設定の設定方法など、Axios の基本を見て、Axios インターセプターとエラー処理の使用方法について説明します。

準備

Axios を使用する前に、Axios を Vue アプリケーションにインストールする必要があります。 Axios のインストールは非常に簡単です。ターミナルで次のコマンドを実行するだけです。

npm install axios

Axios をインストールした後、Vue コンポーネントで使用できるようになります。 Vue コンポーネントに Axios ライブラリをインポートし、次のコードを使用して Axios インスタンスを作成する必要があります。

import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: 'https://api.example.com',
});

baseURL は、アクセスする API のルート URL です。

Axios のインストールと構成が完了したら、非同期リクエスト データ インタラクションの実装を開始しましょう。

非同期リクエストの開始

Axios は Promise を使用して非同期リクエストを管理します。 Axios インスタンスのさまざまなメソッドを使用して、GET、POST、PUT、DELETE などのさまざまなタイプのリクエストを送信できます。これらについては心配しないでください。各メソッドの実装については以下で詳しく説明します。

GET リクエスト

GET は、Axios で最も一般的に使用されるメソッドです。 API からリソースを取得するために使用されます。 Axios インスタンスの get メソッドを使用して、GET リクエストを開始できます。例:

axiosInstance.get('/users')
  .then(response => console.log(response.data));

このリクエストはデフォルトの Axios 設定を使用し、https://api.example.com/users から GET リクエストを送信します。成功すると、コンソールに応答データが表示されます。

POST リクエスト

POST リクエストは、ユーザーのログイン、登録、データの提供など、API にデータを送信するためによく使用されます。 Axios インスタンスの post メソッドを使用して、POST リクエストを開始できます。例:

axiosInstance.post('/login', {
  username: 'JohnDoe',
  password: 'secret'
})
.then(response => console.log(response.data));

は、ユーザー名とパスワードをパラメータとして含むオブジェクトを使用して、https://api.example.com/login に POST リクエストを送信します。成功すると、コンソールに応答データが表示されます。

PUT リクエスト

PUT リクエストは、既存のリソースを更新するためによく使用されます。 Axios インスタンスの put メソッドを使用して、PUT リクエストを開始できます。例:

axiosInstance.put('/users/1', {
  name: 'John Doe'
})
.then(response => console.log(response.data));

は、更新されたデータをパラメータとして含むオブジェクトを使用して、PUT リクエストを https://api.example.com/users/1 に送信します。成功すると、コンソールに応答データが表示されます。

DELETE リクエスト

DELETE リクエストは、リソースを削除するためによく使用されます。 Axios インスタンスの delete メソッドを使用して、DELETE リクエストを開始できます。例:

axiosInstance.delete('/users/1')
.then(response => console.log(response.data));

は、DELETE リクエストを https://api.example.com/users/1 に送信します。成功すると、コンソールに応答データが表示されます。

上記のメソッドはすべて Axios Promise を返すことに注意してください。 .then() または .catch() を使用して、非同期リクエストの成功と失敗を管理できます。

Axios のデフォルト設定

Vue アプリケーションで Axios を使用する場合、Axios インスタンスを作成し、何らかの設定を行うことでリクエストを管理できます。以下は、一般的な Axios 設定項目の一部です:

baseURL: API のルート URL
timeout: リクエストのタイムアウト (ミリ秒)
headers: リクエストのデフォルトのヘッダー
withCredentials: Cookie を送信するかどうか
validateStatus: どの HTTP ステータス コードを成功ステータス コードとみなすかを定義します

Axios モジュール レベルの設定を使用して、Axios のデフォルト設定を設定できます。例:

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.timeout = 5000;

この例では、Axios インスタンスは API のルート URL として https://api.example.com を使用し、デフォルトのリクエスト タイムアウトを 5000 ミリ秒に設定します。

Axios インターセプター

Axios インターセプターは、Axios のリクエストと応答中にデータをインターセプトして変更できる強力な機能です。インターセプターを使用して、リクエストを行う前に Authorization ヘッダーを挿入するなど、特定のデフォルトの動作を挿入できます。

Axios インターセプターは、リクエスト インターセプターとレスポンス インターセプターに分かれています。リクエスト インターセプターはリクエストの送信プロセスを処理し、レスポンス インターセプターはサーバーから返されたデータを処理します。

Axios では、interceptors 属性を使用してインターセプターを設定できます。リクエストとレスポンスごとに、各インターセプターをインターセプターに追加できます。例:

// 添加一个请求拦截器
axiosInstance.interceptors.request.use(config => {
    // 添加Authorization header
    config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
    return config;
}, error => Promise.reject(error));

// 添加一个响应拦截器
axiosInstance.interceptors.response.use(response => {
    // 如果响应是一个重定向到登录页面，我们就清空localStorage
    if (response.status === 302 && response.headers.location === '/login') {
        localStorage.removeItem('token');
        localStorage.removeItem('user');
    }
    return response;
}, error => Promise.reject(error));

この例では、リクエスト インターセプターとレスポンス インターセプターの 2 つのインターセプターを追加しました。リクエスト インターセプターは、各リクエストが送信される前に Authorization ヘッダーを追加します。応答インターセプターは、応答がログイン ページにリダイレクトされるかどうかを確認し、ログイン ページにリダイレクトされる場合は、ローカル アクセス トークンとユーザー情報をクリアします。

エラー処理

Axios には、エラーをチェックするためのメソッドがいくつか用意されています。原則として、Axios エラーは .then() または .catch() でキャッチできます。ただし、実際の運用環境では、より適切なエラー処理が必要です。 Axios エラーは、インターセプターを使用して捕捉して処理できます。例:

axiosInstance.interceptors.response.use(response => response, error => {
    // 处理错误
    if (error.response.status === 401) {
        // 如果响应状态码是401，我们就清空storage
        localStorage.removeItem('token');
        localStorage.removeItem('user');
        // 跳转到登录界面
        router.push('/login');
    }
    return Promise.reject(error);
});

この例では、レスポンス インターセプターを追加します。レスポンス ステータス コードが 401 の場合、ローカル ストレージ内のトークンとユーザー情報をクリアし、ログイン ページにジャンプします。 ＃＃＃＃＃＃結論は＃＃＃

Vue は、Axios を使用して API への非同期リクエストと Vue アプリケーションのデータ対話を実装する強力なフロントエンド フレームワークです。 Axios は、リクエストと応答中の非同期エラーを処理するためのさまざまな HTTP メソッドとインターセプターを処理する、使いやすい HTTP ライブラリです。 Axios を使用して Vue アプリケーションをバックエンド API に接続し、インターセプターとエラー処理で Vue アプリケーションを強化できます。

以上がAxios を使用して Vue で非同期リクエストとデータ対話を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。