El segundo parámetro en fetch()

Cuando tratamos de usar fetch()la función en clase, tendemos a usarla para obtener datos de la API en el sitio web.

https://reqres.in/es un sitio web que proporciona API para que los desarrolladores prueben su código. Los desarrolladores pueden probar diferentes métodos HTTP y obtener una respuesta real pero datos falsos (REQRES, 2023). Usaremos este sitio web para probar nuestro código varias veces.

Por ejemplo, podemos obtener los datos falsos para saber el nombre del usuario dehttps://reqres.in/con fetch()_

Si hace clic en el botón Probar fetch() para obtener datos , fetch intentará obtener los datos de 'https://reqres.in/api/users/2'con el método GET. Puede ver que "Janet" se adjunta a continuación.

Sin embargo, fetch no solo se puede usar para obtener los datos. Tiene un segundo parámetro que puede permitirle personalizar lo que desea hacer con la función de búsqueda.

Es opcional , por lo que puede ignorarlo por completo, y todavía funciona para obtener los datos, tal como lo hicimos antes.

El segundo parámetro debe ser un objeto . Y dentro de este objeto, puedes incluir múltiples subparámetros, incluyendo cuerpo, encabezado, método… (MDN, 2023).

Hay un ejemplo:

const secondParameter = {
  method : 'POST',
  body : JSON.stringify({
    "name": "morpheus",
    "job": "leader"
   }),
  };

Entonces, ¿cómo lo usamos?

En este ejemplo, una vez que los usuarios hacen clic en el botón Publicación de prueba, nuestra aplicación publicará el nombre y el trabajo del usuario en el servidor. Y habrá una marca de tiempo a continuación para decirles a los usuarios la hora de creación.

.catch((error) =>{})

Como todos sabemos, la función fetch() devolverá a Promise Object. Sin embargo, ¿qué sucede si el servidor no responde y la promesa no se cumple?

¡Habrá un error!

Por lo tanto, debemos usar catch((error) => {})para detectar el error y evitar que se bloquee.

Veamos el código de ejemplo.

En este ejemplo, 'accidentalmente' obtuve el enlace incorrecto. Entonces la promesa no se cumplirá y habrá un error. Entonces, si los usuarios hacen clic en el botón Test Post, la consola imprimirá 'Error!!!'.

Más uso del objeto Respuesta

Hablamos de la situación cuando hay un error y el objeto de la promesa no se cumple. Pero si se cumple el objeto de promesa devuelto por fetch(), devolverá un objeto de Respuesta .

Hay algunas propiedades de instancia (MDN, 2023):

• Respuesta.ok
• Respuesta.estado
• Response.statusText
• Respuesta.url
• …

Utilicé Response.status, que devuelve el código de estado HTTP, y Response.ok, que devuelve un valor booleano , podemos ver si la búsqueda se realiza correctamente.

Para este ejemplo, si los usuarios hacen clic en el botón Publicación de prueba, aparecerá el código de estado HTTP y un valor booleano para ver si tiene éxito.

Abortar una búsqueda

Los usuarios también pueden abortar una búsqueda usando el AbortController Object.

Necesitamos crear un AbortController Objectseparado.

let controller = new AbortController();

Así que nuestro nuevo segundo parámetro es:

const secondParameter = {
  method : 'POST',
  body : JSON.stringify({
    "name": "morpheus",
    "job": "leader"
   }),
  signal: controller.signal
  };

Establecí un intervalo para hacer el aborto (). Entonces, cuando hago clic en abortar primero, Test Post arrojará un AbortError en la consola. Y el código y el estado HTTP no se mostrarán debajo del botón Publicación de prueba como lo hicimos antes.

Referencia

MDN. (2023). Fetch() — API web: MDN. API web | MDN. Recuperado el 31 de marzo de 2023, dehttps://developer.mozilla.org/en-US/docs/Web/API/fetch

REQUISITOS (2023). Una API de descanso alojada lista para responder a sus solicitudes de Ajax. Requisitos Recuperado el 31 de marzo de 2023, dehttps://reqres.in/

MDN. (2023). Respuesta: API web: MDN. API web | MDN. Recuperado el 31 de marzo de 2023, dehttps://developer.mozilla.org/en-US/docs/Web/API/Response

MDN. (2023). Abortcontroller — API web: MDN. API web | MDN. Recuperado el 31 de marzo de 2023, dehttps://developer.mozilla.org/en-US/docs/Web/API/AbortController