Einführung in die Axios-Kapselung und gängige Methoden in Vue

Einführung in die Axios-Kapselung und gängige Methoden in Vue

Axios ist eine auf Promise basierende HTTP-Bibliothek. Ihr Vorteil liegt in der guten Lesbarkeit, Benutzerfreundlichkeit und Skalierbarkeit. Als beliebtes Frontend-Framework bietet Vue auch volle Unterstützung für Axios. In diesem Artikel wird erläutert, wie Axios in Vue gekapselt wird, und es werden einige häufig verwendete Methoden von Axios vorgestellt.

1. Axios-Kapselung

Während des Entwicklungsprozesses müssen wir häufig eine benutzerdefinierte Kapselung von Axios durchführen, z. B. das Hinzufügen fester Header, die einheitliche Verarbeitung von Fehlerrückgaben usw. Dadurch wird der Code sauberer und einfacher zu warten. Im Folgenden wird beschrieben, wie Axios gekapselt wird.

(1) Kapselung der Anforderungskonfiguration

Lassen Sie uns zunächst eine config.js-Datei für die einheitliche Verwaltung der Anforderungskonfiguration definieren.

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

In dieser Datei definieren wir eine Axios-Instanz und fügen Request Interception und Response Interceptor hinzu. Auf diese Weise wird beim Senden einer Anfrage diese zuerst vom Anfrage-Interceptor verarbeitet, und beim Antworten wird sie ebenfalls zuerst vom Antwort-Interceptor verarbeitet.

(2) Kapselung der Anforderungsmethode

Die Axios-Instanz wurde in der Datei config.js definiert und wir können nach Bedarf verschiedene Anforderungsmethoden erstellen. Beispielsweise müssen wir jetzt eine Get-Methode definieren.

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)
      })
  })
}

Die Get-Methode hier verwendet die Get-Methode der Axios-Instanz und übergibt bei der Anfrage die URL und Parameter, sodass eine GET-Anfrage gesendet werden kann. Wenn die Anfrage erfolgreich ist, verwenden wir Promise, um die zurückgegebenen Daten aufzulösen, und wenn die Anfrage fehlschlägt, lehnen wir den Fehler ab.

Ähnlich können wir je nach Bedarf verschiedene Arten von Anforderungsmethoden kapseln.

2. Einführung in gängige Methoden von Axios

Nach Abschluss der Paketierung von Axios werden im Folgenden einige gängige Methoden von Axios vorgestellt.

(1) GET-Anfrage

get(url[, config])

url: Die angeforderte URL, Sie können einen relativen Pfad oder einen absoluten Pfad verwenden.

config: Angeforderte Konfiguration, einschließlich Parameter, Header usw.

import Axios from './config'

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

(2) POST-Anfrage

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

url: Angeforderte URL, Sie können einen relativen oder absoluten Pfad verwenden.

Daten: Angeforderte Daten.

config: Angeforderte Konfiguration, einschließlich Header usw.

import Axios from './config'

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

(3) PUT-Anfrage

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

url: Die angeforderte URL, Sie können einen relativen Pfad oder einen absoluten Pfad verwenden.

Daten: Angeforderte Daten.

config: Angeforderte Konfiguration, einschließlich Header usw.

import Axios from './config'

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

(4) DELETE-Anfrage

delete(url[, config])

url: Angeforderte URL, Sie können einen relativen Pfad oder einen absoluten Pfad verwenden.

config: Angeforderte Konfiguration, einschließlich Header usw.

import Axios from './config'

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

(5) Request Interception

In der Datei config.js definieren wir einen Request Interceptor. Sie können Anforderungsinterceptoren verwenden, um eine benutzerdefinierte Datenverarbeitung durchzuführen, Anforderungsheader hinzuzufügen usw.

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

(6) Antwort-Interception

In der Datei config.js definieren wir einen Antwort-Interceptor. Sie können Antwort-Interceptoren verwenden, um eine benutzerdefinierte Fehlerbehandlung, Datenverarbeitung usw. durchzuführen.

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

3. Zusammenfassung

Dieser Artikel stellt vor, wie man Axios in Vue kapselt, sowie einige häufig verwendete Methoden von Axios. Der Vorteil von Axios liegt in seiner Benutzerfreundlichkeit und Skalierbarkeit, die uns dabei helfen kann, während der Entwicklung schnell HTTP-Anfragen zu senden und Antwortergebnisse zu verarbeiten. Bei der Verwendung von Axios sollten wir eine einheitliche Verwaltung der Anforderungskonfiguration erreichen, um die spätere Wartung zu erleichtern. Gleichzeitig sollten je nach Bedarf verschiedene Arten von Anforderungsmethoden gekapselt werden, um unterschiedliche Entwicklungsanforderungen zu erfüllen.

Das obige ist der detaillierte Inhalt vonEinführung in die Axios-Kapselung und gängige Methoden in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!