Axios のカプセル化と Vue の一般的なメソッドの概要

Axios のカプセル化と Vue での一般的なメソッドの紹介

Axios は Promise をベースにした HTTP ライブラリであり、可読性、使いやすさ、拡張性が優れていることが利点です。人気のあるフロントエンド フレームワークとして、Vue は Axios の完全なサポートも提供します。この記事では、Vue で Axios をカプセル化する方法と、Axios でよく使用されるメソッドをいくつか紹介します。

1. Axios のカプセル化

開発プロセス中、多くの場合、固定ヘッダーの追加、エラー戻りの統一処理など、Axios のカスタマイズされたカプセル化を実行する必要があります。これにより、コードがクリーンになり、保守が容易になります。以下では、Axios をカプセル化する方法について説明します。

(1) リクエスト構成のカプセル化

まずはリクエスト構成を一元管理するための config.js ファイルを定義します。

import axios from 'axios'

// 创建一个axios的实例
const Axios = axios.create({
  baseURL: '',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  }
})

// 添加请求拦截
Axios.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    return config
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

// 添加响应拦截器
Axios.interceptors.response.use(
  response => {
    // 对响应数据做些什么
    return response
  },
  error => {
    // 对响应错误做些什么
    return Promise.reject(error)
  }
)

export default Axios

このファイルでは、Axios インスタンスを定義し、リクエスト インターセプトとレスポンス インターセプターを追加します。このように、リクエストを送信するときは、まずリクエスト インターセプターによって処理され、応答するときも、最初にレスポンス インターセプターによって処理されます。

(2) カプセル化リクエストメソッド

Axios インスタンスは config.js ファイルに定義されており、必要に応じてさまざまなリクエストメソッドを作成できます。たとえば、ここで get メソッドを定義する必要があります。

import Axios from './config'

export function get(url, params = {}) {
  return new Promise((resolve, reject) => {
    Axios.get(url, {
        params: params
      })
      .then(response => {
        resolve(response.data)
      })
      .catch(error => {
        reject(error)
      })
  })
}

ここでの get メソッドは Axios インスタンスの get メソッドを使用し、リクエスト時に URL と params を渡すことで GET リクエストを送信できます。リクエストが成功した場合は、Promise を使用して返されたデータを解決し、リクエストが失敗した場合はエラーを拒否します。

同様に、必要に応じてさまざまなタイプのリクエスト メソッドをカプセル化できます。

2. Axios のよく使われるメソッドの紹介

Axios のカプセル化が完了したら、以下に Axios のよく使われるメソッドをいくつか紹介します。

(1) GET request

get(url[, config])

url: リクエストされた URL には相対パスまたは絶対パスを使用できます。

config: パラメータ、ヘッダーなどを含む、要求された構成。

import Axios from './config'

Axios.get('/user?id=1')
  .then(response => {})
  .catch(error => {})

(2) POST リクエスト

post(url[, data[, config]])

url: リクエストされた URL は相対パスまたは絶対パスを使用できます。 。

data: 要求されたデータ。

config: ヘッダーなどを含む、要求された構成。

import Axios from './config'

Axios.post('/user', {
    id: 1,
    name: 'user'
  })
  .then(response => {})
  .catch(error => {})

(3) PUT リクエスト

put(url[, data[, config]])

url: リクエストされた URL は相対パスまたは絶対パスを使用できます。 。

data: 要求されたデータ。

config: ヘッダーなどを含む、要求された構成。

import Axios from './config'

Axios.put('/user', {
    id: 1,
    name: 'user'
  })
  .then(response => {})
  .catch(error => {})

(4) DELETE リクエスト

delete(url[, config])

url: リクエストされた URL には相対パスまたは絶対パスを使用できます。

config: ヘッダーなどを含む、要求された構成。

import Axios from './config'

Axios.delete('/user?id=1')
  .then(response => {})
  .catch(error => {})

(5) リクエスト インターセプト

config.js ファイルで、リクエスト インターセプターを定義します。リクエスト インターセプターを使用して、カスタム データ処理を実行したり、リクエスト ヘッダーを追加したりできます。

Axios.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    config.headers.Authorization = 'token'
    return config
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

(6) レスポンス インターセプト

config.js ファイルで、レスポンス インターセプタを定義します。応答インターセプターを使用して、カスタム エラー処理、データ処理などを行うことができます。

Axios.interceptors.response.use(
  response => {
    // 对响应数据做些什么
    return response
  },
  error => {
    // 对响应错误做些什么
    if (error.response) {
      // do something
    }
    return Promise.reject(error)
  }
)

3. 概要

この記事では、Vue で Axios をカプセル化する方法と、Axios で一般的に使用されるメソッドをいくつか紹介します。 Axios の利点は使いやすさとスケーラビリティにあり、開発中に HTTP リクエストを迅速に送信し、応答結果を処理するのに役立ちます。 Axios を使用する場合、後のメンテナンスを容易にするために、統一されたリクエスト構成管理を実現する必要があります。同時に、さまざまな開発ニーズを満たすために、必要に応じてさまざまな種類のリクエスト メソッドをカプセル化する必要があります。

以上がAxios のカプセル化と Vue の一般的なメソッドの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。