BUSCAR API EN JAVASCRIPT CON EJEMPLOS

El JavaScript fetch()> Método utilizado para recuperar recursos de un servidor. Devuelve una Promesa, resolviendo en el objeto Respuesta, que encapsula la respuesta del servidor a la solicitud. fetch()> facilita la realización de solicitudes GET, normalmente empleadas para recuperar datos, y CORREO solicitudes, utilizadas para publicar datos en los servidores.

Además, fetch()> integra perfectamente soluciones avanzadas HTTP funcionalidades como Intercambio de recursos entre orígenes (CORS) y otras extensiones, enriqueciendo la experiencia de desarrollo web con seguridad e interoperabilidad mejoradas.

Nota: Fetch API viene con el método fetch(), que se utiliza para recuperar datos de diferentes fuentes.

Sintaxis:

fetch('url') // api for the get request .then(response =>respuesta.json()) .luego(datos => console.log(datos));

Parámetros:

URL: La URL a la que se realizará la solicitud.
Opciones: Es un conjunto de propiedades. Es un opcional parámetro. Las opciones disponibles son:
- Método: Especifica el método HTTP para la solicitud. (puede ser OBTENER, PUBLICAR, PONER o ELIMINAR)
- Encabezados
- Cuerpo: Datos que se enviarán con la solicitud.
- Modo: Especifica el modo de solicitud (p. ej. cors, nocors, mismo origen, etc)
- Cartas credenciales : Especifica si se deben enviar credenciales de usuario (cookies, encabezados de autenticación, etc.) con la solicitud.

Ejemplos del método fetch() de JavaScript

Veamos algunos de los ejemplos del método de búsqueda. Estos ejemplos le proporcionan una comprensión completa del método de recuperación en JavaScript.

1 . Obtener solicitud usando Fetch

Este ejemplo muestra cómo realizar una solicitud Get en el método de recuperación.

Nota: Sin opciones, Fetch siempre actuará como una solicitud de obtención.

JavaScript

  // API for get requests let fetchRes = fetch( 'https://jsonplaceholder.typicode.com/todos/1');   // FetchRes is the promise to resolve // it by using.then() method fetchRes.then(res =>res.json()).luego(d => { console.log(d) })

Producción:

Explicación:

La función JS fetch() se utiliza para enviar una solicitud GET a la URL https://jsonplaceholder.typicode.com/todos/1. Esta función devuelve una Promesa que se resuelve en un objeto Respuesta que representa la respuesta a la solicitud.
El método then() está encadenado a la llamada fetch() para manejar la respuesta de forma asincrónica. Dentro de la función de devolución de llamada pasada a then(), se llama al método res.json() para analizar el cuerpo de la respuesta como JSON. Este método también devuelve una Promesa que se resuelve en los datos JSON analizados.
Otro método then() está encadenado para manejar los datos JSON analizados. Dentro de su función de devolución de llamada, los datos JSON analizados se registran en la consola usando console.log()

2 . Usando Fetch para publicar datos JSON

En este ejemplo, hemos cargado datos JSON usando la API fetch() en JavaScript, puede configurar el cuerpo de la solicitud en una versión en cadena JSON de sus datos y configurar los encabezados apropiados para indicar que está enviando JSON.

Las solicitudes de publicación se pueden realizar mediante la función de recuperación brindando las opciones que se detallan a continuación:

let options = { method: 'POST', headers: { 'Content-Type': 'application/json;charset=utf-8' }, body: JSON.stringify(data) }

Después de verificar la sintaxis de la solicitud de publicación, mire el siguiente ejemplo que demuestra el uso de la solicitud de publicación en el método de recuperación.

JavaScript

  // Your JSON data const jsonData = { key1: 'value1', key2: 'value2' }; // Set up options for the fetch request const options = {  method: 'POST',  headers: {  'Content-Type': 'application/json' // Set content type to JSON  },  body: JSON.stringify(jsonData) // Convert JSON data to a string and set it as the request body }; // Make the fetch request with the provided options fetch('https://api.example.com/upload', options)  .then(response =>{ // Verifique si la solicitud fue exitosa if (!response.ok) { throw new Error('La respuesta de la red no fue correcta');  } // Analiza la respuesta como JSON return respuesta.json();  }) .then(data => { // Maneja los datos JSON console.log(data); }) .catch(error => { // Maneja cualquier error que haya ocurrido durante la recuperación console.error('Fetch error: ', error);  });

Explicación:

Definimos tus datos JSON.
Configuramos opciones para la solicitud de recuperación, incluido el método configurado en 'POST', el encabezado Content-Type configurado en 'application/json' y el cuerpo configurado en la versión JSON en cadena de sus datos.
Realizamos la solicitud de recuperación con las opciones proporcionadas usando la función fetch().
El resto del código sigue siendo el mismo que antes, manejando la respuesta y cualquier error que ocurra durante la recuperación.

3. Cancelar una solicitud de recuperación

Puedes usar el Controlador de aborto y Interfaz de señal de aborto para cancelar una solicitud de recuperación en JavaScript.

JavaScript

  // Create a new AbortController instance const controller = new AbortController(); const signal = controller.signal; // Make the fetch request with the signal const fetchPromise = fetch('https://api.example.com/data', { signal }); // Timeout after 5 seconds const timeoutId = setTimeout(() =>{ controlador.abortar(); // Cancelar la solicitud de recuperación console.log('Se agotó el tiempo de espera de la solicitud de recuperación'); }, 5000); // Manejar la solicitud de recuperación fetchPromise .then(response => { // Comprobar si la solicitud fue exitosa if (!response.ok) { throw new Error('La respuesta de la red no fue correcta'); } // Analizar el respuesta como JSON return respuesta.json() }) .then(data => { // Maneja los datos JSON console.log(data); }) .catch(error => { // Maneja cualquier error que haya ocurrido durante el fetch console.error('Obtener error:', error }) .finally(() => { clearTimeout(timeoutId); // Borrar el tiempo de espera });

Explicación:

Creamos una nueva instancia de AbortController y obtenemos su señal.
Realizamos la solicitud de recuperación usando fetch() con las opciones proporcionadas.
Establecemos un tiempo de espera de 5 segundos usando setTimeout() para cancelar la solicitud de recuperación si tarda demasiado.
Dentro de la devolución de llamada del tiempo de espera, llamamos a controlador.abort() para cancelar la solicitud de recuperación.
Manejamos la solicitud de recuperación como de costumbre, incluido el análisis de la respuesta y el manejo de cualquier error.
Finalmente, en el bloque finalmente(), borramos el tiempo de espera usando clearTimeout() para evitar que se active el tiempo de espera si la solicitud de recuperación se completa antes de que expire el tiempo de espera.

Envío de una solicitud que incluye credenciales

Para enviar una solicitud que incluya credenciales, como galletas , en una solicitud de recuperación, puede configurar la propiedad de credenciales para incluir.

fetch('https://example.com', { credentials: 'include', });

Si solo desea enviar credenciales si la URL de solicitud tiene el mismo origen que el script de llamada, agregue credenciales: 'mismo origen'.

// The calling script is on the origin 'https://example.com' fetch('https://example.com', { credentials: 'same-origin', });

Casos de uso del método fetch() de JavaScript

Estos son algunos de los casos de uso del método de recuperación. Estos son problemas comunes a los que se enfrentan los desarrolladores principiantes cuando trabajan con Fetch.

1. Cómo utilizar JavaScript Fetch API para obtener datos

La solicitud de obtención de JavaScript se utiliza para recuperar datos de un servidor. Para utilizar la API Fetch en JavaScript para obtener datos de un servidor, puede realizar una solicitud GET a la URL deseada y manejar la respuesta.

2. Método Obtener y Publicar usando Fetch API

Se puede utilizar un método fetch() con cualquier tipo de solicitud, como CORREO , CONSEGUIR , PONER, y BORRAR , El método GET utiliza la API de recuperación

3. Diferencia entre Fetch y Axios para realizar solicitudes http

Axios es un paquete independiente de terceros que se puede instalar fácilmente y Fetch está integrado en la mayoría de los navegadores modernos; no se requiere instalación como tal.

Navegadores compatibles:

La recuperación de JavaScript es una ECMAScript6 (ES6) característica y es compatible con casi todos los navegadores modernos como: