Mehrere gängige Methoden zum Senden von Anfragen mit Axios in React

npm installiere axios --save

importiere Axios von „Axios“;

// Eine Anfrage für einen Benutzer mit einer bestimmten ID stellen
axios.get('/getUser?id=12345')
  .then(Funktion (Antwort) {
    // Erfolg verarbeiten
    console.log(Antwort);
 
    //Status aktualisieren oder etwas tun
    dies.setState({
      // ...
    })
  })
  .catch(Funktion (Fehler) {
    // Fehler behandeln
    konsole.log(Fehler);
  })
  .dann(Funktion () {
    // immer ausgeführt
  });
 
// Optional kann die obige Anfrage auch wie folgt ausgeführt werden:
axios.get('/getUser', {
    params: { // Die Parameter hier werden als URL-Parameter festgelegt (entsprechend den von der URL übermittelten Parametern)
      ID: 12345
    }
  })
  .then(Funktion (Antwort) {
    console.log(Antwort);
  })
  .catch(Funktion (Fehler) {
    konsole.log(Fehler);
  })
  .dann(Funktion () {
    // immer ausgeführt
  });  
 
// Möchten Sie async/await verwenden? Fügen Sie Ihrer äußeren Funktion/Methode das Schlüsselwort „async“ hinzu.
asynchrone Funktion getUser() {
  versuchen {
    const Antwort = warte auf axios.get('/getUser?id=12345');
    console.log(Antwort);
  } Fehler abfangen {
    konsole.fehler(fehler);
  }
}

axios({
  Methode: 'get',
  URL: „/getUser“,
  Parameter: {
    Nr.: 12345,
  }
})
  .then(Funktion (Antwort) {
    console.log(Antwort);
  });

axios.post('/Benutzererstellung', {
    Vorname: 'Fred',
    Nachname: 'Flintstone'
  })
  .then(Funktion (Antwort) {
    console.log(Antwort);
  })
  .catch(Funktion (Fehler) {
    konsole.log(Fehler);
  });

    // Senden Sie eine POST-Anfrage
    axios({
      Methode: 'post',
      URL: „/Benutzer erstellen“,
      data: { // Der Parameter in data ist hier der requestBody-Parameter. Der Server muss die Annotation @RequestBody verwenden, um firstName: 'Fred' zu erhalten.
        Nachname: 'Flintstone'
      }
    }).dann(Funktion (Antwort) {
      console.log(Antwort);
    }).catch(Funktion (Fehler) {
      konsole.log(Fehler);
    });

Funktion getUserAccount() {
  returniere axios.get('/Benutzer/12345');
}
 
Funktion getUserPermissions() {
  returniere axios.get('/Benutzer/12345/Berechtigungen');
}
 
axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(Funktion (acct, Dauerwellen) {
    // Beide Anfragen sind nun abgeschlossen
  }));

{
  // `url` ist die Server-URL, die für die Anfrage verwendet wird
  URL: '/Benutzer',
 
  // `method` ist die Anforderungsmethode, die bei der Anforderung verwendet werden soll
  Methode: 'get', // Standard
 
  // `baseURL` wird `url` vorangestellt, sofern `url` nicht absolut ist.
  // Es kann praktisch sein, `baseURL` für eine Instanz von axios festzulegen, um relative URLs zu übergeben
  // zu Methoden dieser Instanz.
  Basis-URL: „https://some-domain.com/api/“,
 
  // `transformRequest` ermöglicht Änderungen der Anfragedaten bevor diese an den Server gesendet werden
  // Dies gilt nur für die Anforderungsmethoden „PUT“, „POST“, „PATCH“ und „DELETE“.
  // Die letzte Funktion im Array muss einen String oder eine Instanz von Buffer, ArrayBuffer zurückgeben,
  // FormData oder Stream
  // Sie können das Header-Objekt ändern.
  transformRequest: [Funktion (Daten, Header) {
    // Transformieren Sie die Daten nach Belieben
 
    Daten zurückgeben;
  }],
 
  // `transformResponse` ermöglicht Änderungen an den Antwortdaten vor
  // es wird an then/catch übergeben
  transformResponse: [Funktion (Daten) {
    // Transformieren Sie die Daten nach Belieben
 
    Daten zurückgeben;
  }],
 
  // `headers` sind benutzerdefinierte Header, die gesendet werden sollen
  Header: {'X-Requested-With': 'XMLHttpRequest'},
 
  // `params` sind die URL-Parameter, die mit der Anfrage gesendet werden sollen
  // Muss ein einfaches Objekt oder ein URLSearchParams-Objekt sein
  Parameter: {
    Nr.: 12345
  },
 
  // `paramsSerializer` ist eine optionale Funktion, die für die Serialisierung von `params` zuständig ist
  // (zB https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
  paramsSerializer: Funktion (Params) {
    gibt Qs.stringify(Params, {ArrayFormat: 'Klammern'}) zurück
  },
 
  // „data“ sind die Daten, die als Anforderungstext gesendet werden sollen
  // Gilt nur für die Anfragemethoden „PUT“, „POST“ und „PATCH“.
  // Wenn kein „transformRequest“ festgelegt ist, muss es sich um einen der folgenden Typen handeln:
  // - Zeichenfolge, einfaches Objekt, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - Nur Browser: FormData, File, Blob
  // - Nur Knoten: Stream, Puffer
  Daten: {
    Vorname: 'Fred'
  },
  
  // Syntaxalternative zum Senden von Daten in den Textkörper
  // Methode posten
  // es wird nur der Wert gesendet, nicht der Schlüssel
  Daten: 'Land=Brasilien&Stadt=Belo Horizonte',
 
  // „Timeout“ gibt die Anzahl der Millisekunden an, bevor die Anforderung abläuft.
  // Wenn die Anfrage länger als „Timeout“ dauert, wird die Anfrage abgebrochen.
  Timeout: 1000, // Standard ist „0“ (kein Timeout)
 
  // `withCredentials` gibt an, ob standortübergreifende Access-Control-Anfragen
  // sollte mit Anmeldeinformationen erfolgen
  mit Anmeldeinformationen: false, // Standard
 
  // „Adapter“ ermöglicht die benutzerdefinierte Verarbeitung von Anfragen, was das Testen erleichtert.
  // Geben Sie ein Versprechen zurück und liefern Sie eine gültige Antwort (siehe lib/adapters/README.md).
  Adapter: Funktion (Konfiguration) {
    /* … */
  },
 
  // „auth“ gibt an, dass die HTTP-Basisauthentifizierung verwendet werden soll, und stellt Anmeldeinformationen bereit.
  // Dadurch wird ein `Authorization`-Header gesetzt, der alle vorhandenen überschreibt
  // Benutzerdefinierte „Autorisierungs“-Header, die Sie mit „Headern“ festgelegt haben.
  // Bitte beachten Sie, dass über diesen Parameter nur die HTTP-Basisauthentifizierung konfigurierbar ist.
  // Verwenden Sie für Bearer-Token und dergleichen stattdessen benutzerdefinierte „Authorization“-Header.
  Autorisierung:
    Benutzername: 'janedoe',
    Passwort: „s00pers3cret“
  },
 
  // `responseType` gibt den Datentyp an, mit dem der Server antwortet
  // Optionen sind: „Arraybuffer“, „Dokument“, „JSON“, „Text“, „Stream“
  // nur Browser: "Blob"
  Antworttyp: „json“, // Standard
 
  // `responseEncoding` gibt die Kodierung an, die zum Dekodieren von Antworten verwendet werden soll
  // Hinweis: Wird für `responseType` von 'stream' oder clientseitigen Anfragen ignoriert
  Antwortkodierung: „utf8“, // Standard
 
  // `xsrfCookieName` ist der Name des Cookies, der als Wert für das XSRF-Token verwendet werden soll
  xsrfCookieName: 'XSRF-TOKEN', // Standard
 
  // `xsrfHeaderName` ist der Name des HTTP-Headers, der den XSRF-Token-Wert trägt
  xsrfHeaderName: 'X-XSRF-TOKEN', // Standard
 
  // `onUploadProgress` ermöglicht die Verarbeitung von Fortschrittsereignissen für Uploads
  // nur Browser
  beiUploadProgress: Funktion (Fortschrittsereignis) {
    // Machen Sie mit dem nativen Fortschrittsereignis, was Sie wollen
  },
 
  // `onDownloadProgress` ermöglicht die Verarbeitung von Fortschrittsereignissen für Downloads
  // nur Browser
  beiDownloadProgress: Funktion (Fortschrittsereignis) {
    // Machen Sie mit dem nativen Fortschrittsereignis, was Sie wollen
  },
 
  // `maxContentLength` definiert die maximal zulässige Größe des HTTP-Antwortinhalts in Bytes
  maxContentLength: 2000,
 
  // `validateStatus` definiert, ob das Versprechen für einen bestimmten
  // HTTP-Antwortstatuscode. Wenn `validateStatus` `true` zurückgibt (oder auf `null` gesetzt ist
  // oder `undefined`), wird das Versprechen eingelöst; andernfalls wird das Versprechen
  // abgelehnt.
  validateStatus: Funktion (Status) {
    Rückgabestatus >= 200 und Status < 300; // Standard
  },
 
  // „maxRedirects“ definiert die maximale Anzahl von Weiterleitungen, denen in node.js gefolgt werden soll.
  // Wenn auf 0 gesetzt, werden keine Weiterleitungen befolgt.
  maxRedirects: 5, // Standard
 
  // „socketPath“ definiert einen UNIX-Socket, der in node.js verwendet werden soll.
  // zB „/var/run/docker.sock“, um Anfragen an den Docker-Daemon zu senden.
  // Es kann nur entweder „socketPath“ oder „proxy“ angegeben werden.
  // Wenn beide angegeben sind, wird „socketPath“ verwendet.
  socketPath: null, // Standard
 
  // `httpAgent` und `httpsAgent` definieren einen benutzerdefinierten Agenten, der bei der Ausführung von http verwendet werden soll
  // und https-Anfragen in node.js. Dadurch können Optionen hinzugefügt werden wie
  // `keepAlive`, die standardmäßig nicht aktiviert sind.
  httpAgent: neuer http.Agent({ keepAlive: true }),
  httpsAgent: neuer https.Agent({ keepAlive: true }),
 
  // „Proxy“ definiert den Hostnamen und den Port des Proxyservers.
  // Sie können Ihren Proxy auch mit dem herkömmlichen `http_proxy` definieren und
  // `https_proxy` Umgebungsvariablen. Wenn Sie Umgebungsvariablen verwenden
  // für Ihre Proxy-Konfiguration können Sie auch eine `no_proxy`-Umgebung definieren
  // Variable als Komma-getrennte Liste von Domänen, die nicht geproxied werden sollen.
  // Verwenden Sie „false“, um Proxys zu deaktivieren und Umgebungsvariablen zu ignorieren.
  // `auth` gibt an, dass HTTP Basic Auth für die Verbindung mit dem Proxy verwendet werden soll, und
  // stellt Anmeldeinformationen bereit.
  // Dadurch wird ein `Proxy-Authorization`-Header gesetzt, der alle vorhandenen überschreibt
  // `Proxy-Authorization` benutzerdefinierte Header, die Sie mit `headers` festgelegt haben.
  Proxy: {
    Host: '127.0.0.1',
    Port: 9000,
    Autorisierung:
      Benutzername: 'mikeymike',
      Passwort: „rapunz3l“
    }
  },
 
  // `cancelToken` gibt ein Abbruchtoken an, mit dem die Anfrage abgebrochen werden kann
  // (weitere Einzelheiten finden Sie im Abschnitt „Stornierung“ weiter unten)
  cancelToken: neues CancelToken(Funktion (abbrechen) {
  })
}

{
  // `data` ist die Antwort, die vom Server bereitgestellt wurde
  Daten: {},
 
  // „status“ ist der HTTP-Statuscode der Serverantwort
  Status: 200,
 
  // „statusText“ ist die HTTP-Statusmeldung aus der Serverantwort
  statusText: 'OK',
 
  // `headers` die HTTP-Header, mit denen der Server geantwortet hat
  // Alle Header-Namen sind klein geschrieben und können mithilfe der Klammernotation aufgerufen werden.
  // Beispiel: `response.headers['content-type']`
  Überschriften: {},
 
  // `config` ist die Konfiguration, die `axios` für die Anfrage bereitgestellt wurde
  Konfiguration: {},
 
  // „Anfrage“ ist die Anfrage, die diese Antwort generiert hat
  // Es ist die letzte ClientRequest-Instanz in node.js (in Weiterleitungen)
  // und eine XMLHttpRequest-Instanz im Browser
  Anfrage: {}
}

axios.get('/Benutzer/12345')
  .then(Funktion (Antwort) {
    Konsole.log(Antwort.Daten);
    Konsole.log(Antwort.Status);
    Konsole.log(Antwort.StatusText);
    Konsole.log(Antwort.Header);
    Konsole.log(Antwort.config);
  });

axios.defaults.baseURL = "https://api.example.com";
axios.defaults.headers.common['Autorisierung'] = AUTH_TOKEN;
axios.defaults.headers.post['Inhaltstyp'] = 'Anwendung/x-www-form-urlencoded';

// Legen Sie beim Erstellen der Instanz die Konfigurationsstandards fest
const Instanz = axios.create({
  Basis-URL: 'https://api.example.com'
});
 
// Standardeinstellungen ändern, nachdem die Instanz erstellt wurde
instance.defaults.headers.common['Autorisierung'] = AUTH_TOKEN;

// Einen Anforderungs-Interceptor hinzufügen
axios.interceptors.request.use(Funktion (Konfiguration) {
    // Tun Sie etwas, bevor die Anfrage gesendet wird
    Konfiguration zurückgeben;
  }, Funktion (Fehler) {
    // Tun Sie etwas mit dem Anforderungsfehler
    returniere Promise.reject(Fehler);
  });
 
// Einen Antwort-Interceptor hinzufügen
axios.interceptors.response.use(Funktion (Antwort) {
    // Jeder Statuscode, der im Bereich von 2xx liegt, führt zum Auslösen dieser Funktion
    // Etwas mit den Antwortdaten machen
    Antwort zurückgeben;
  }, Funktion (Fehler) {
    // Alle Statuscodes, die außerhalb des Bereichs von 2xx liegen, führen dazu, dass diese Funktion ausgelöst wird
    // Etwas mit dem Antwortfehler unternehmen
    returniere Promise.reject(Fehler);
  });

const meinInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(meinInterceptor);

const Instanz = axios.create();
Instanz.Interceptors.Anfrage.Verwenden(Funktion () {/*...*/});