Detaillierte Erläuterung der Axios-Kapselung und des API-Schnittstellenmanagements im React-Projekt

//Mit npm installieren npm install axios; 
//Verwenden Sie yarn, um yarn add axios zu installieren

//Axios in index.js einführen
importiere Axios von „Axios“;
//Führen Sie das QS-Modul ein, um Post-Type-Daten zu serialisieren. Importieren Sie QS von „qs“.
//Antds Nachrichtenaufforderungskomponente, Sie können sie entsprechend Ihrer eigenen UI-Komponente ändern.
importiere {Nachricht} von 'antd'

//Umgebungsvariablen speichern const isPrd = process.env.NODE_ENV == 'production';

//Unterscheiden Sie zwischen der Basis-URL der Entwicklungsumgebung und der Produktionsumgebung
export const basciUrl = isPrd ? 'https://www.production.com' : 'http://www.development.com'

//Den Axios-Basispfad festlegen const service = axios.create({
  baseURL: Basis-URL
})
// Interceptor anfordern service.interceptors.request.use(config => { 
  // Überprüfen Sie vor dem Senden jeder Anfrage, ob sich ein Token im lokalen Speicher befindet. Sie können hier auch Redux verwenden, um nur zu demonstrieren, wie Sie das Token lokal erhalten.
  // Falls vorhanden, füge das Token dem Header der http-Anfrage hinzu, damit das Backend deinen Login-Status anhand des Tokens ermitteln kann. // Auch wenn das Token lokal vorhanden ist, ist es möglich, dass das Token abgelaufen ist, daher muss der Rückgabestatus im Antwort-Interceptor ermittelt werden const token = window.localStorage.getItem('userToken') || window.sessionStorage.getItem('userToken');
  //Jeder Anfrage ein Token hinzufügen
  config.data = Objekt.assign({}, config.data, {
    Zeichen: Zeichen,
  })
  //Setze den Anforderungsheader config.headers = {
    „Inhaltstyp“: „Anwendung/x-www-form-urlencoded; Zeichensatz=utf-8“
  }
  Konfigurationsdaten = QS.stringify(Konfigurationsdaten)
  Konfiguration zurückgeben
}, Fehler => { 
    Rückgabefehler;
})

// Antwort-Interceptor service.interceptors.response.use(response => {
  //Machen Sie unterschiedliche Dinge basierend auf dem zurückgegebenen Statuscode// Verhandeln Sie unbedingt mit den Backend-Entwicklern einen einheitlichen Fehlerstatuscode, wenn (response.code) {
    Schalter (Antwortcode) {
      Fall 200:
        Antwortdaten zurückgeben;
      Fall 401:
        //Nicht angemeldet bei der Verarbeitungsmethode „break“;
      Fall 403:
        //Methode zur Verarbeitung des Token-Ablaufs break;
      Standard:
        Nachricht.Fehler(Antwort.Daten.Nachricht)
    }
  } anders { 
    Antwort zurückgeben;
  }
})
//Exportieren Sie abschließend den gekapselten Axios-Export-Standarddienst

//Importieren Sie unsere verpackten Axios 
Dienst aus „./index“ importieren

http://www.development.com/api/v1/articleEdit

export const apiArticleEdit = info => service.post('/api/v1/articleEdit', info);

importiere React, {Komponente} von 'react'
 importiere { apiArticleEdit } von './request/api'
exportiere Standardklasse App erweitert Komponente {
  componentDidMount() { 
    // Rufen Sie die API-Schnittstelle auf und geben Sie zwei Parameter an let params = { type: 2, author: '北孤清茶' }
    apiArticleEdit(params).then(res => { 
      //Weitere Vorgänge nach erfolgreichem Datenabruf//.....
      Konsole.log(res)
    })
  }
  rendern() {
    zurückkehren (
      <div>
        
      </div>
    )
  }
}

//Axios in index.js einführen
importiere Axios von „Axios“;
//Führen Sie das QS-Modul ein, um Post-Type-Daten zu serialisieren. Importieren Sie QS von „qs“.
//Antds Nachrichtenaufforderungskomponente, Sie können sie entsprechend Ihrer eigenen UI-Komponente ändern.
importiere {Nachricht} von 'antd'

//Umgebungsvariablen speichern const isPrd = process.env.NODE_ENV == 'production';

//Unterscheiden Sie zwischen der Basis-URL der Entwicklungsumgebung und der Produktionsumgebung
export const basciUrl = isPrd ? 'https://www.production.com' : 'http://www.development.com'

//Den Axios-Basispfad festlegen const service = axios.create({
  baseURL: Basis-URL
})

// Interceptor anfordern service.interceptors.request.use(config => { 
  // Überprüfen Sie vor dem Senden jeder Anfrage, ob sich ein Token im lokalen Speicher befindet. Sie können hier auch Redux verwenden, um nur zu demonstrieren, wie Sie das Token lokal erhalten.
  // Falls vorhanden, füge das Token dem Header der http-Anfrage hinzu, damit das Backend deinen Login-Status anhand des Tokens ermitteln kann. // Auch wenn das Token lokal vorhanden ist, ist es möglich, dass das Token abgelaufen ist, daher muss der Rückgabestatus im Antwort-Interceptor ermittelt werden const token = window.localStorage.getItem('userToken') || window.sessionStorage.getItem('userToken');
  //Jeder Anfrage ein Token hinzufügen
  config.data = Objekt.assign({}, config.data, {
    Zeichen: Zeichen,
  })
  //Setze den Anforderungsheader config.headers = {
    „Inhaltstyp“: „Anwendung/x-www-form-urlencoded; Zeichensatz=utf-8“
  }
  //Serialisieren Sie die Anforderungsparameter, sonst werden die Post-Anforderungsparameter nicht normal vom Backend empfangen config.data = QS.stringify(config.data)
  Konfiguration zurückgeben
}, Fehler => { 
    Rückgabefehler;
})

// Antwort-Interceptor service.interceptors.response.use(response => {
  //Machen Sie unterschiedliche Dinge basierend auf dem zurückgegebenen Statuscode// Verhandeln Sie unbedingt mit den Backend-Entwicklern einen einheitlichen Fehlerstatuscode, wenn (response.code) {
    Schalter (Antwortcode) {
      Fall 200:
        Antwortdaten zurückgeben;
      Fall 401:
        //Nicht angemeldet bei der Verarbeitungsmethode „break“;
      Fall 403:
        //Methode zur Verarbeitung des Token-Ablaufs break;
      Standard:
        Nachricht.Fehler(Antwort.Daten.Nachricht)
    }
  } anders { 
    Antwort zurückgeben;
  }
})
//Exportieren Sie abschließend den gekapselten Axios-Export-Standarddienst