ReactJS AJAX and API

Last Updated : 30 Sep, 2024

APIs are used for fetching data from the server and using AJAX and API we call data asynchronously and show it in our HTML. You can make API requests by using browser built-in fetch function or third party libraries like Axios.

Prerequisites:

JavaScript and JSX
Knowledge about react state and setState
Knowledge about React Components and how to make them
React Life cycle methods

AJAX Calls in React

AJAX or Asynchronous JavaScript and XML is used to make asynchronous requests to the servers. Ajax in React is mainly used to fetch and send the data to APIs enabling the dynamic data loading and UI updates.

For class-based components, AJAX calls should be made within the componentDidMount() lifecycle method. This ensures that the component has mounted and is ready to handle data updates by setting the component’s state with the data retrieved from the server.
In functional components, AJAX calls are typically made inside the useEffect() hook, which can mimic the behavior of componentDidMount() by running only once after the initial render if an empty dependency array ([]) is passed.

Below code example of how to use API:

Example 1: In this example, React class component fetches data from an API using fetch() in componentDidMount(), manages loading and error states, and renders the fetched data as a list once the API request completes.

JavaScript

// Filename - App.js  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> 			); 		} 	} }

So, this is a simple example in which we explained how to use API, so it is important to note that error handling is really important because if the data is not fetched it should show an error. But here is another example if we want to load data on some actions like on click like fetching someplace’s weather then we can’t use componentDidMount() because it is only called once so for that we can use componentWillUpdate() but it was removed so, we can use a function also in place of componentWillUpdate() and make API request in a function.

Example 2: This example demonstrates fetching weather data from the OpenWeather API using AJAX in the getWeather method. It captures user input for location, sends an API request, and displays the location, temperature, and weather condition dynamically.

JavaScript

// Filename - App.js  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> 		); 	} }

Output: So, what we did here we just moved the API request in getWeather() function and so it will only be called whenever we will make click on check weather.

Difference Between AJAX And Fetch API

iamsahil1910

Improve

Article Tags :

ReactJS AJAX and API

Prerequisites:

AJAX Calls in React

Similar Reads