Heim > Web-Frontend > View.js > So kapseln Sie den Vue3 Axios-Interceptor in eine Anforderungsdatei

So kapseln Sie den Vue3 Axios-Interceptor in eine Anforderungsdatei

王林
Freigeben: 2023-05-19 11:49:44
nach vorne
1506 Leute haben es durchsucht

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

import axios from 'axios';
Nach dem Login kopieren

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秒
});
Nach dem Login kopieren

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);
});
Nach dem Login kopieren

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;
Nach dem Login kopieren

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);
  });
Nach dem Login kopieren

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);
});
Nach dem Login kopieren

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!

Verwandte Etiketten:
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage