So kapseln Sie den Vue3 Axios-Interceptor in eine Anforderungsdatei

1. Erstellen Sie eine neue Datei mit dem Namen request.js und importieren Sie sie in Axios:

import axios from 'axios';

2. Erstellen Sie eine Funktion mit dem Namen request und exportieren Sie sie:

# 🎜🎜#Erstellen Sie eine Funktion namens request und setzen Sie sie auf eine neue Axios-Instanz mit einer Basis-URL. Um ein Timeout in einer umschlossenen Axios-Instanz festzulegen, übergeben Sie beim Erstellen der Axios-Instanz die Timeout-Option.

export const request = axios.create({
  baseURL: 'https://example.com/api',
  timeout: 5000, // 超时设置为5秒
});

3. Fügen Sie einen Interceptor in der Anforderungsfunktion hinzu:

request.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

request.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});

Dadurch werden ein Anforderungs-Interceptor und ein Antwort-Interceptor hinzugefügt. Sie können in diesen Interceptoren erforderliche Aktionen ausführen, z. B. das Hinzufügen von Authentifizierungsheadern vor dem Senden der Anfrage oder das Überprüfen der Antwortdaten auf Fehler, nachdem die Antwort zurückgegeben wurde.

4. Exportieren Sie abschließend die Anforderungsfunktion:

export default request;

Jetzt kann jede Netzwerkanforderung, die den vordefinierten Interceptor passiert, über die Anforderungsfunktion in der Anwendung ausgeführt werden. Zum Beispiel:

import request from './request';

request.get('/users')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Dadurch wird eine GET-Anfrage mithilfe einer umschlossenen Axios-Instanz gestellt und dann ein vordefinierter Interceptor verwendet, um die Antwort zu verarbeiten.

Vollständiges Beispiel:

#🎜 🎜# Um das Token und den Benutzernamen vor dem Senden der Anfrage zu übertragen, können Sie einen Request-Interceptor verwenden, um allen Anfragen einen Authentifizierungsheader hinzuzufügen.

Der Request-Interceptor prüft, ob die Namen „Token“ und „Benutzername“ vorhanden sind. im Wert „localStorage“ vorhanden sein und ihn als Autorisierungs- und Benutzernamen-Header hinzufügen. Passen Sie die Namen und Werte dieser Header entsprechend an.

Um Antwortdaten zu verarbeiten, verwenden Sie Antwort-Interceptoren. Im obigen Beispiel überprüft der Antwort-Interceptor, ob das Attribut „Status“ in den Antwortdaten „Erfolg“ ist. Wenn nicht, behandeln Sie es als Fehler und lösen Sie es als Ausnahme aus. Das Antwortobjekt enthält Ausnahmeinformationen, einschließlich aller Informationen wie Antwortheader, Statuscodes und Antworttexte. Die Logik dieser Prüfungen und des Auslösens von Ausnahmen kann entsprechend der tatsächlichen Situation angepasst werden.

import axios from 'axios';

export const request = axios.create({
  baseURL: 'https://example.com/api',
  timeout: 5000, // 超时设置为5秒
});

request.interceptors.request.use(function (config) {
  // 在发送请求之前添加身份验证标头
  config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
  config.headers.Username = localStorage.getItem('username');
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});
request.interceptors.response.use(function (response) {
  // 对响应数据做些什么
  const responseData = response.data;
  if (responseData.status !== 'success') {
    const error = new Error(responseData.message || '请求失败');
    error.response = response;
    throw error;
  }
  return responseData.data;
}, function (error) {
  // 对响应错误做些什么
  return Promise.reject(error);
});

Das obige ist der detaillierte Inhalt vonSo kapseln Sie den Vue3 Axios-Interceptor in eine Anforderungsdatei. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!