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秒 });
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); });
export default request;
import request from './request'; request.get('/users') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
#🎜 🎜# 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!