Vue での非同期リクエストの実装とカプセル化

Vue での非同期リクエストの実装とカプセル化

開発では、データを取得したりデータを送信したりするためにバックエンド サーバーと非同期リクエストを行うことが必要になることがよくあります。 Vue は、非同期リクエストを処理するためのシンプルかつ強力な方法、つまり、カプセル化に axios ライブラリを使用する方法を提供します。

1. 非同期リクエストの実装
Vue プロジェクトでは、コンポーネントのメソッドで axios を使用して非同期リクエストを実装できます。以下はユーザー情報を取得する例です:

1. まず、axios ライブラリをプロジェクトに導入する必要があります。npm 経由でインストールすることも、ページに直接導入することもできます。

   import axios from 'axios'

2. コンポーネントのメソッドで、非同期リクエストのコードを記述します。

   methods: {
     getUserInfo() {
    axios.get('/api/user').then(response => {
      // 请求成功后的处理逻辑
      console.log(response.data)
    }).catch(error => {
      // 请求失败后的处理逻辑
      console.error(error)
    })
     }
   }

3. コンポーネントのライフサイクルまたはイベントのときに getUserInfo メソッドを呼び出します。

   created() {
     this.getUserInfo()
   }

上記のコードでは、axios の get メソッドを使用して GET リクエストを送信しています。リクエストのアドレスは /api/user です。リクエストが成功した場合、返されたデータは then メソッドで取得され、リクエストが失敗した場合は、catch メソッドでエラー情報を取得します。

2. 非同期リクエストのカプセル化
コードの再利用性と保守性を向上させるために、非同期リクエストを複数のコンポーネントで使用できる独立したモジュールにカプセル化できます。

1. まず、すべての非同期リクエスト メソッドをカプセル化する api.js ファイルを作成します。

   import axios from 'axios'
   
   export function getUserInfo() {
     return axios.get('/api/user')
   }

2. api.js をコンポーネントに導入し、呼び出します。対応するメソッド:

   import { getUserInfo } from './api.js'
   
   methods: {
     getUser() {
    getUserInfo().then(response => {
      console.log(response.data)
    }).catch(error => {
      console.error(error)
    })
     }
   }

すべての非同期リクエスト メソッドを api.js にカプセル化すると、これらのメソッドを直接呼び出してデータを取得できるため、各コンポーネントでの重複を回避できます。同じコードを記述します。

3. axios インターセプターを使用する
非同期リクエストでは、リクエストの送信前またはレスポンスが返された後に、リクエスト ヘッダーの追加、リクエスト パラメーターの変更、エラーなどを一律に処理します。現時点では、axios インターセプターを使用してこれを実現できます。

1. api.js で、次のコードを追加します。

   // 添加请求拦截器，设置请求头
   axios.interceptors.request.use(
     config => {
    config.headers['Authorization'] = 'Bearer ' + localStorage.getItem('token')
    return config
     },
     error => {
    return Promise.reject(error)
     }
   )
   
   // 添加响应拦截器，统一处理错误
   axios.interceptors.response.use(
     response => {
    return response
     },
     error => {
    console.error(error)
    return Promise.reject(error)
     }
   )

インターセプターを追加することで、リクエストが送信される前にリクエスト ヘッダーを設定できます。エラーは応答が返された後に一律に処理されます。

2. インターセプターの要件を満たすように getUserInfo メソッドを変更します。

   export function getUserInfo() {
     return axios.get('/api/user').then(response => {
    return response.data
     }).catch(error => {
    console.error(error)
    return Promise.reject(error)
     })
   }

getUserInfo メソッドで .then と .catch を使用すると、返された Promise オブジェクトはインターセプターに渡されます。

上記の手順により、Vue での非同期リクエストのカプセル化と実装が実現します。カプセル化により、非同期リクエスト コードはより簡潔で統一され、保守しやすくなり、コードの再利用性も向上します。同時に、インターセプターを使用することで、リクエストの送信前と応答が返された後に、リクエストの変更とエラー処理を簡単に実行できます。

以上がVue での非同期リクエストの実装とカプセル化の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。