ReactJS | AJAX y API

Las API se utilizan para obtener datos del servidor y, al usar AJAX y API , llamamos a los datos de forma asíncrona y los mostramos en nuestro HTML. Puede realizar requests de API utilizando la función de búsqueda incorporada del navegador o bibliotecas de terceros como Axios . Puede realizar requests de API en cualquier lugar, pero se recomienda totalmente que realice una llamada de API en el método de ciclo de vida de componentDidMount() .

Razones para usar componentDidMount(): Por lo tanto, esto puede ser realmente simple simplemente colocando la solicitud de API en componentDidMount.

• El uso de componentDidMount asegura que los datos no se carguen hasta después del renderizado inicial, lo cual es realmente importante.
• Usando el componenteDidMount , asegúrese de que los datos solo se obtengan del cliente.

requisitos previos:

1. JavaScript y JSX
2. Conocimiento sobre reaccionar estado y setState
3. Conocimiento sobre componentes React y cómo hacerlos.
4. Reaccionar métodos de ciclo de vida

Debajo del ejemplo de código de cómo usar la API:

• Ejemplo:

  class MyComponent extends React.Component {   constructor(props) {     super(props);     this.state = {       error: null,       dataFetched: false,       data: []     };   }      componentDidMount() {     fetch("https://api.toptensongs.com/data")       .then(res => res.json())       .then(         (response) => {           this.setState({             dataFetched: true,             data: response.data           });         },         (error) => {           this.setState({             dataFetched: true,             error           });         }       )   }      render() {     const { error, dataFetched, data } = this.state;     if (error) {       return <div>Error: {error.message}</div>;     } else if (!isLoaded) {       return <div>Loading...</div>;     } else {       return (         <ol>           {data.map(value => (             <li key={value.name}>               {value.name} - {item.artist}             </li>           ))}         </ol>       );     }   } }

Entonces, este es un ejemplo simple en el que explicamos cómo usar la API, por lo que es importante tener en cuenta que el manejo de errores es realmente importante porque si los datos no se obtienen, debería mostrar un error.

Pero aquí hay otro ejemplo si queremos cargar datos en algunas acciones como al hacer clic en obtener el clima de algún lugar, entonces no podemos usar el componenteDidMount() porque solo se llama una vez, por lo que podemos usar el componenteWillUpdate() pero se eliminó así que , podemos usar una función también en lugar de componentWillUpdate() y hacer una solicitud de API en una función.

• Ejemplo: Entonces, en este ejemplo, vamos a crear una aplicación meteorológica realmente simple usando la API de OpenWeatherMap .

  class Weather extends React.Component {        constructor(props) {         super(props);            this.state = {             location: "",             place: "",             temp: "",             weather: ""         };     }        render() {            return (             <div className="weather">                 <label htmlFor="text">Enter Location</label>                 <br />                 <div id="location">                     <input onChange={this.changeValue}                            type="text" value={this.state.location} />                 </div>                 <div className="button">                     <button onClick={this.getWeather}>                       Check Weather                      </button>                 </div>                 <div>                     <h1>Location: {this.state.place}</h1>                     <h3>Temperature: {this.state.temp} C</h3>                     <h3>Condition: {this.state.weather}</h3>                 </div>             </div>         );     }        changeValue = (event) => {            this.setState({             location: event.target.value         });     }        getWeather =() => {            fetch(` https://api.openweathermap.org/data/2.5/weather?q=${this.state.location}&units=metric&APPID=APIKEY`)             .then(response => response.json())             .then(data => {                 this.setState({                     place: data.name,                     temp: data.main.temp,                     weather: data.weather[0].main                 });             });        } }    export default class Main extends React.Component {        constructor(props) {            super(props);            this.state = {            };     }        render() {            return (             <div className="main">                 <div className="title">                   What's the Weather?                 </div>                 <hr />                 <Weather />             </div>         );     } }

• Salida: Entonces, lo que hicimos aquí, simplemente movimos la solicitud de API en la función getWeather() y, por lo tanto, solo se llamará cada vez que hagamos clic en verificar el clima.