In TypeScript abrufen

1. die fetch()-Methode in TypeScript
2. die stark typisierte Abrufantwort in TypeScript

Der fetch ist eine global verfügbare native Browserfunktion, die Ressourcen über eine HTTP-Verbindung abrufen kann. In TypeScript können wir die Funktion fetch verwenden, um typisierte Antwortdaten zu konsumieren.

die fetch()-Methode in TypeScript

Die Web API bietet über Window und WorkerGlobalScope eine globale fetch-Methode an. Diese beiden Schnittstellen implementieren den WindowOrWorkerGlobalScope, wo die fetch-Methode definiert wurde.

Daher kann die fetch-Methode als native Browserfunktion zum Abrufen von Ressourcen über ein Netzwerk identifiziert werden. Normalerweise gibt die fetch-Methode ein Promise zurück.

Daher müssen Sie then-Handler verwenden, um die HTTP-Antwort zu verarbeiten. Die Methodenantwort fetch unterscheidet sich von der alten Jquery.ajax().

Da das Promise nur aufgrund eines Netzwerkfehlers oder eines Berechtigungsproblems abgelehnt wird, weist es keine HTTP-Fehler wie 404 oder 500 zurück.

Das Folgende zeigt die Syntax der Methode fetch.

fetch(resource, [,custom_settings_per_request]);

1. Ressource – Dies ist die Ressource, die Sie aus einem Netzwerk abrufen. Es sollte eine Zeichenfolge sein; im Grunde die URL der Ressource.
2. custom_settings_per_request – Dies ist ein optionaler Parameter. Sie können benutzerdefinierte Einstellungen für eine bestimmte HTTP-Anforderung übergeben, z. B. HTTP-Methode, Header, Text usw.

Verwenden wir einen Dummy-HTTP-Endpunkt, der ein Array von ToDo-Objekten abruft. Im Folgenden wird gezeigt, wie Sie einen fetch-Ruf tätigen.

fetch("https://jsonplaceholder.typicode.com/todos");

Diese Anfrage gibt eine Antwort zurück, die in ein Response-Objekt aufgelöst wird. Daher müssen wir then-Handler verwenden, um die Daten abzurufen.

Lassen Sie uns mit der Methode json() den Antworttext manipulieren.

fetch("https://jsonplaceholder.typicode.com/todos")
.then(
  (response) => response.json()
);

Dadurch wird ein weiteres Versprechen mit Antworttextdaten zurückgegeben. Daher können wir, wie im Folgenden gezeigt, einen anderen then-Handler verwenden, um auf die echten Daten zuzugreifen.

fetch("https://jsonplaceholder.typicode.com/todos")
.then(
  (response) => response.json()
)
.then(
  (toDoListArray) => console.log(toDoListArray)
);

Ausgang:

die stark typisierte Abrufantwort in TypeScript

Der Nachteil von fetch() ist, dass es sich nicht um eine generische Funktion handelt und es schwierig ist, typisierte Antwortdaten zu verarbeiten. Daher ist es gut, einen Wrapper in TypeScript zu haben.

Lassen Sie uns denselben Dummy-HTTP-Endpunkt verwenden, um ein ToDo-Element abzurufen. Das zurückgegebene response-Objekt würde wie folgt aussehen.

{
  "userId": 1,
  "id": 2,
  "title": "quis ut nam facilis et officia qui",
  "completed": false
}

Lassen Sie uns einen Todo-Typ erstellen, um das abgerufene response-Objekt zu handhaben.

// Todo type interface
interface Todo {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
}

Wir werden eine neue Funktion erstellen, die die Methode fetch mit einer generischen Typantwort behandelt.

function fetchToDo<T>(resourceUrl: string): Promise<T> {
  return fetch(resourceUrl).then(response => {
      // fetching the reponse body data
      return response.json<T>()
    })
}

Diese Funktion kann aufgerufen werden, um die Daten zu konsumieren, und jetzt erhalten wir als Antwort ein typisiertes Todo-Objekt. Es kann direkt der Variablen vom Typ Todo zugewiesen werden.

// Consuming the fetchToDo to retrieve a Todo
fetchToDo<Todo>("https://jsonplaceholder.typicode.com/todos/2")
  .then((toDoItem) => {
    // assigning the response data `toDoItem` directly to `myNewToDo` variable which is
    // of Todo type
    let myNewToDo:Todo = toDoItem;
    // It is possible to access Todo object attributes easily
    console.log('\n id: '+ myNewToDo.id + '\n title: ' + myNewToDo.title + '\n completed: ' + myNewToDo.completed + '\n User Id: ' + myNewToDo.userId);
  });

Ausgang:

"id: 2
title: quis ut nam facilis et officia qui
completed: false
User Id: 1"

Diese Methode kann für jede HTTP-Methode wie POST, DELETE usw. verwendet werden.