Recuperar en TypeScript

1. el método fetch() en TypeScript
2. la respuesta de búsqueda fuertemente tipada en TypeScript

La búsqueda es una función de navegador nativo disponible a nivel mundial que puede obtener recursos a través de una conexión HTTP. En TypeScript, podemos usar la función buscar para consumir datos de respuesta escritos.

el método fetch() en TypeScript

La Web API ofrece un método de búsqueda global a través de Window y WorkerGlobalScope. Esas dos interfaces implementan el WindowOrWorkerGlobalScope, donde se ha definido el método fetch.

Por lo tanto, el método de obtención se puede identificar como una función nativa del navegador para obtener recursos a través de una red. Normalmente, el método fetch devuelve una promesa.

Por lo tanto, debe usar controladores entonces para manejar la respuesta HTTP. La respuesta del método fetch difiere del antiguo Jquery.ajax().

Debido a que la promesa solo se rechazará debido a una falla en la red o un problema de permisos, no rechaza errores HTTP como 404 o 500.

A continuación se muestra la sintaxis del método fetch.

fetch(resource, [,custom_settings_per_request]);

1. recurso: este es el recurso que obtendrá de una red. Debería ser una cadena; básicamente, la URL del recurso.
2. custom_settings_per_request: este es un parámetro opcional. Puede pasar configuraciones personalizadas para una solicitud HTTP determinada, como método HTTP, encabezados, cuerpo, etc.

Usemos un punto final HTTP ficticio que recupera una matriz de objetos ToDo. A continuación se muestra cómo realizar una llamada de búsqueda.

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

Esta solicitud devuelve una respuesta que se resuelve en un objeto Respuesta. Por lo tanto, necesitamos usar controladores entonces para recuperar los datos.

Con el método json(), manipulemos el cuerpo de la respuesta.

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

Esto devolverá otra promesa con datos del cuerpo de respuesta. Por lo tanto, como se muestra a continuación, podemos usar otro controlador then para acceder a los datos reales.

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

Producción:

la respuesta de búsqueda fuertemente tipada en TypeScript

El inconveniente de fetch() es que no es una función genérica y es difícil consumir datos de respuesta escritos. Por lo tanto, es bueno tener un contenedor en TypeScript.

Usemos el mismo extremo HTTP ficticio para obtener un elemento ToDo. El objeto de respuesta devuelto tendría el siguiente aspecto.

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

Vamos a crear un tipo Todo para manejar el objeto de respuesta obtenido.

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

Vamos a crear una nueva función que maneje el método buscar con una respuesta de tipo genérico.

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

Se puede llamar a esta función para consumir los datos, y ahora estamos obteniendo un objeto Todo escrito como respuesta. Se puede asignar directamente a la variable de tipo Todo.

// 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);
  });

Producción :

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

Esta metodología se puede utilizar para cualquier método HTTP como POST, DELETE, etc.