React AJAX

Para implementar solicitudes AJAX en aplicaciones React, normalmente se puede usar fetch API o bibliotecas de terceros como axios, jQuery, etc., para realizar solicitudes de red.

A continuación se presentan las instrucciones básicas para usar estos dos métodos:

Realizar solicitudes AJAX con fetch API

fetches una API integrada en el navegador para realizar solicitudes de red. A continuación se explica cómo usarfetchPasos básicos para realizar solicitudes AJAX en componentes de React:

  • Importar fetch- Si usas un navegador moderno, normalmente no necesitas importarlofetch. Sin embargo, si necesitas admitir navegadores antiguos, puedes usarunfetchun polyfill como este.

  • Usar el hook useEffect- Usa eluseEffecthook para manejar efectos secundarios, como realizar solicitudes de red.

  • Realizar la solicitud- Usafetchpara realizar solicitudes GET o POST.

  • Manejar la respuesta- Usa.then()para manejar los datos de la respuesta.

  • Manejo de errores- Usa.catch()para capturar y manejar errores.

  • Actualizar el estado- Usa eluseStatehook para almacenar los datos de la solicitud y actualizar el estado después de una solicitud exitosa.

Ejemplo

import React, { useState, useEffect } from 'react';

const MyComponent = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();
        setData(result);
        setLoading(false);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();
  }, []);

  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>Data from API:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default MyComponent;

Explicación:

  • useState y useEffect: UsauseStatepara almacenar los datos devueltos por la solicitud AJAX (data) y el estado de carga (loading), y usauseEffectpara ejecutar la solicitud AJAX después de que el componente se haya montado.

  • fetch: Usafetchpara realizar una solicitud GET, y usaresponse.json()para convertir los datos JSON devueltos en objetos de JavaScript.

  • Procesamiento asíncrono: Usaasync/awaitpara manejar operaciones asíncronas, asegurando que el estado se actualice después de que se complete la solicitud.

  • Manejo de errores: En lafetchsolicitud, usatry/catchpara capturar y manejar posibles errores.

Usar axios

axios es un cliente HTTP basado en Promise, adecuado para navegadores y Node.js.

A continuación se presentan los pasos básicos para usar axios:

  1. Instalar axios- Instala axios mediante npm o yarn.

    npm install axios

  2. Importar axios- Importa axios en el componente.

  3. Realizar la solicitud- Usa axios para realizar solicitudes GET o POST.

  4. Manejar la respuesta y los errores- Usa.then()y.catch()para manejar la respuesta y capturar errores.

  5. Actualizar el estado- Similar a usarfetch, usauseStatepara actualizar el estado.

Ejemplo

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const MyComponent = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('https://api.example.com/data');
        setData(response.data);
        setLoading(false);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();
  }, []);

  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>Data from API:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default MyComponent;

Prueba en línea con jQuery

El siguiente ejemplo demuestra cómo obtener la descripción compartida del gist más reciente de un usuario de GitHub:

Los datos de un componente de React se pueden obtener mediante Ajax en el método componentDidMount. Cuando se obtienen datos del servidor, se pueden almacenar en el state y luego usar el método this.setState para volver a renderizar la interfaz de usuario.

Cuando se cargan datos de forma asíncrona, usa componentWillUnmount para cancelar solicitudes pendientes antes de que el componente se desmonte.

Ejemplo de React

class UserGist extends React.Component { constructor(props) { super(props); this.state = {username: '', lastGistUrl: ''}; } componentDidMount() { this.serverRequest = $.get(this.props.source, function (result) { var lastGist = result[0]; this.setState({ username: lastGist.owner.login, lastGistUrl: lastGist.html_url }); }.bind(this)); } componentWillUnmount() { this.serverRequest.abort(); } render() { return ( <div> {this.state.username}Lo más reciente del usuarioGistDirección compartida:a href={this.state.lastGistUrl}>{this.state.lastGistUrl}</a> </div> ); } } const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <UserGist source="https://api.github.com/users/octocat/gists" /> );

Pruébalo »

El código anterior realiza la solicitud Ajax usando jQuery.

Otras extensiones