Der eigentliche Prozess der Einbindung von Axios in das Projekt

axios.get('http://localhost:10086/Benutzer?ID=12345')
  .dann(Antwort => {
    //Vorgang nach Erfolg...
  })
  .catch(Fehler => {
    //Vorgang nach Fehler...
  });

const Instanz = axios.create({
  Basis-URL: 'https://api.example.com'
});

axios({   
Methode: 'get',   
URL: „http://bit.ly/2mTM3nY“,   
Antworttyp: 'Stream' }).dann(Funktion(Antwort) { Antwort.Daten.Pipe(fs.createWriteStream('ada_lovelace.jpg')) });

Axios von „Axios“ importieren

exportiere const request = erstelleAxiosInstance()

Funktion erstelleAxiosInstance () {
  const Instanz = axios.create({
    Basis-URL: Prozess.Umgebung.REACT_APP_BASE_URL,
    Zeitüberschreitung: 5000,
    Überschriften: {
      // Sie können einen einheitlichen Anforderungsheader posten: {
        „Inhaltstyp“: „Anwendung/json“
      }
      ...
    }
  })
  Rückgabeinstanz
}

  // Einen Anforderungs-Interceptor hinzufügen (etwas tun, bevor die Anforderung gesendet wird)
  Instanz.Interceptors.Request.use((Konfiguration) => {
      //Sie können eine Funktion hinzufügen, um den Ladeeffekt zu öffnen loading.open()  
      //Wenn das Token vorhanden ist, fügen Sie es dem Anforderungsheader-Token hinzu && (config.headers.Authorization = Token)
     // Filter null undefiniert '' Funktion in Anforderungsparametern cleanObject()
      Konfiguration zurückgeben
  })

 // Einen Antwort-Interceptor hinzufügen (etwas mit den Antwortdaten machen)
  Instanz.Interceptors.Response.use((Antwort) => {
   //Sie können eine Funktion hinzufügen, um den Ladeeffekt zu schließen loading.close()  
      //Dekonstruieren Sie die zurückgegebenen Ergebnisdaten const res = response.data
      //Beurteile den benutzerdefinierten Code und gib die erfolgreichen Daten zurück const validateStatus = /^(2|3)\d{2}$/ //Ein Code, der mit 2 oder 3 beginnt, wird als erfolgreiche Anfrage betrachtet, if (validateStatus.test(res.code)) {
        return res //Gibt direkt die Daten zurück, die wir brauchen
      }
      //Beurteilen Sie den fehlgeschlagenen Code und geben Sie Eingabeaufforderungen usw. aus. if (res.code === 401) {
        Nachricht.Fehler(res.msg)
      } anders {
        Nachricht.Warnung(res.msg)
      }
      gibt Promise.reject(res) zurück
      },
      (Fehler) => {
      wird geladen.schließen() 
      wenn (Fehler.Antwort.Status === 401) {
        message.error('Token abgelaufen, bitte erneut anmelden!')
        removeStorageToken()
        setzeTimeout(() => {
          window.location.href = "/login"
        }, 2000)
      } anders {
        wenn (!window.navigator.onLine) {
          message.warning('Netzwerkanomalie, bitte prüfen Sie, ob die Netzwerkverbindung normal ist.')
        } sonst wenn (Fehlercode === 'ECONNABORTED') {
          message.warning('Anforderungs-Timeout')
        } anders {
          message.warning('Serverstörung, bitte kontaktieren Sie den Administrator')
        }
      }
      return Promise.reject(error) // Gibt den Fehler an die entsprechende Seite zurück}
      )

importiere { Anfrage } von '../axios'

// Benutzerinformationen abrufen Exportfunktion getUserInfo (userId) {
  Rückgabeanforderung.get(`/sys/user/info/${userId}`)
}

Axios von „Axios“ importieren

exportiere const request = erstelleAxiosInstance()

Funktion erstelleAxiosInstance () {
  const Instanz = axios.create({
    Basis-URL: Prozess.Umgebung.REACT_APP_BASE_URL,
    Zeitüberschreitung: 5000,
    Überschriften: {
      // Sie können einen einheitlichen Anforderungsheader posten: {
        „Inhaltstyp“: „Anwendung/json“
      }
      ...
    }
  })
   // Einen Anforderungs-Interceptor hinzufügen (etwas tun, bevor die Anforderung gesendet wird)
  Instanz.Interceptors.Request.use((Konfiguration) => {
      //Sie können eine Funktion hinzufügen, um den Ladeeffekt zu öffnen loading.open()  
      //Wenn das Token vorhanden ist, fügen Sie es dem Anforderungsheader-Token hinzu && (config.headers.Authorization = Token)
     // Filter null undefiniert '' Funktion in Anforderungsparametern cleanObject()
      Konfiguration zurückgeben
  })
  // Einen Antwort-Interceptor hinzufügen (etwas mit den Antwortdaten machen)
  Instanz.Interceptors.Response.use((Antwort) => {
   //Sie können eine Funktion hinzufügen, um den Ladeeffekt zu schließen loading.close()  
      //Dekonstruieren Sie die zurückgegebenen Ergebnisdaten const res = response.data
      //Beurteile den benutzerdefinierten Code und gib die erfolgreichen Daten zurück const validateStatus = /^(2|3)\d{2}$/ //Ein Code, der mit 2 oder 3 beginnt, wird als erfolgreiche Anfrage betrachtet, if (validateStatus.test(res.code)) {
        Rückgabewert
      }
      //Beurteilen Sie den fehlgeschlagenen Code und geben Sie Eingabeaufforderungen usw. aus. if (res.code === 401) {
        Nachricht.Fehler(res.msg)
      } anders {
        Nachricht.Warnung(res.msg)
      }
      gibt Promise.reject(res) zurück
      },
      (Fehler) => {
      loading.close() //Sie können eine Funktion hinzufügen, um den Ladeeffekt zu schließen, if (error.response.status === 401) {
        message.error('Token abgelaufen, bitte erneut anmelden!')
        removeStorageToken()
        setzeTimeout(() => {
          window.location.href = "/login"
        }, 2000)
      } anders {
        wenn (!window.navigator.onLine) {
          message.warning('Netzwerkanomalie, bitte prüfen Sie, ob die Netzwerkverbindung normal ist.')
        } sonst wenn (Fehlercode === 'ECONNABORTED') {
          message.warning('Anforderungs-Timeout')
        } anders {
          message.warning('Serverstörung, bitte kontaktieren Sie den Administrator')
        }
      }
      return Promise.reject(error) // Gibt den Fehler an die entsprechende Seite zurück}
      )
  
  Rückgabeinstanz
}