Welcome! In today's lesson, we're going to build upon our API knowledge by exploring GET requests with parameters. This crucial tool fetches specific API data. What's the goal for today? It's to understand how to use these requests and to uncover the request query structure.

Do you recall making basic API GET requests? We can specify data in these requests, much like ordering a specific snack. Parameters in GET requests are included after the ? in the URL, and they are created as key-value pairs.

JavaScript
Copy to clipboard
1fetch('https://api.example.com/data?name=value')

This is a query string where name is the parameter key, and value is the requested asset.

Request queries follow a structure focused on detail. After the ?, we create key-value pairs and use & to add parameters.

JavaScript
Copy to clipboard
1fetch('https://api.example.com/data?name1=value1&name2=value2')

The server fetches data where name1 equals value1, and name2 equals value2.

Let's practice with the https://api-regional.codesignalcontent.com/weatherManager/getLocation API by fetching the location of Rome:

JavaScript
Copy to clipboard
1fetch('https://api-regional.codesignalcontent.com/weatherManager/getLocation?city=Rome')
2    .then(response => response.json())
3    .then(data => console.log(data));

We successfully retrieve data where the city is Rome.

You bet! Let's venture into another example using a different endpoint. Let's see if our queries can disclose weather information about a certain location.

This time, we will use the https://api-regional.codesignalcontent.com/weatherManager/getWeather API, which obtains weather data based on the parameters lat for latitude, and lng for longitude. Remember how we used the ? to start adding parameters? We'll use the same technique and add the lat and lng values separated by the & symbol.

JavaScript
Copy to clipboard
1fetch('https://api-regional.codesignalcontent.com/weatherManager/getWeather?lat=49.988358&lng=36.232845')
2    .then(response => response.json())
3    .then(data => console.log(data));

With this request, we are asking the server to return weather information for the location with the latitude 49.988358 and longitude 36.232845. It returns the data in the form of a JSON object:

JavaScript
Copy to clipboard
1{"city":"Kharkiv","location":{"lat":"49.988358","lng":"36.232845"},"weather":{"temperature":38,"summary":"Rain"}}

This is exciting, isn't it? We were able to get specific weather data for a location with its latitude and longitude, all thanks to GET requests with parameters!

Errors can occur during requests due to server issues, incorrect endpoints, or even network problems. The try...catch blocks in JavaScript should be used to handle potential errors effectively:

JavaScript
Copy to clipboard
1try {
2  fetch('https://api-regional.codesignalcontent.com/weatherManager/getLocation?city=Rome')
3    .then(response => response.json())
4    .then(data => console.log(data));
5} catch (error) {
6  console.error('Error:', error);
7}

This code catches errors arising from requests and logs the corresponding message.

Congratulations! You've successfully learned how to make GET requests with parameters and have studied the request query structure. You've sent GET requests with parameters in JavaScript and have managed to handle potential errors. Now, you're ready for hands-on exercises to consolidate this new knowledge. Let's gather our strength and jump into the exercises next!