Making GET Requests and Handling Responses

Welcome to the second lesson in our journey of interacting with APIs in Dart. In the previous lesson, we laid a strong foundation by understanding RESTful APIs and how HTTP requests facilitate interactions with them. We used curl to manually craft and send a GET request to an endpoint. Now, we are transitioning to automating this process using Dart. This lesson introduces the http package, which allows us to send HTTP requests effortlessly in our scripts, making it an invaluable tool in the realm of web development and API integration.

Setting Up the Environment

To make HTTP requests in Dart, we use the http package, a user-friendly and powerful library for handling HTTP requests. To set up your environment, you need to add the http package to your pubspec.yaml file. Here’s how you can do it:

dependencies:
  http: ^0.13.3

After adding the package, run the following command in your terminal to install it:

pub get

Once installed, you can import the http package in your Dart code, making its functionalities available for sending HTTP requests in our script.

import 'package:http/http.dart' as http;

With this setup, you'll be equipped to automate requests, saving time and boosting efficiency in your development workflow.

Creating the Main Function

Before we proceed with making HTTP requests, it's essential to understand how Dart handles asynchronous operations. In Dart, the main function serves as the entry point of the application, where the execution begins. To perform asynchronous tasks, such as making HTTP requests, we need to mark the main function as async. This allows us to use the await keyword to pause execution until a future completes, ensuring our code runs smoothly without blocking the main thread. This approach ensures that our application remains responsive, as it can continue executing other code while waiting for the HTTP request to complete. Here's how you can set up an asynchronous main function:

Here's how you can set up an empty main function:

void main() async {
  // This is where we'll perform our HTTP requests
}

By marking the main function as async, we prepare our script to handle asynchronous operations, setting the stage for making HTTP requests and processing their responses efficiently.

Defining the Base URL

When interacting with an API, it's helpful to define a base URL for the service you're communicating with. This makes your code more modular and easy to maintain, allowing you to change the root of your API URL in one place without modifying each request.

// Base URL for the API
final String baseUrl = "http://localhost:8000";

By setting this base URL, we can easily concatenate endpoints for different services within the API, making our code cleaner and more adaptable.

Performing a Basic GET Request

Let's dive into the process of fetching data from an API using Dart's http package. Our goal is to retrieve a list of to-do items from the /todos endpoint using the GET method.

// Fetch all todos using the get method
final response = await http.get(Uri.parse('$baseUrl/todos'));

// Print raw response
print("Raw Response:");
print(response.body);

By using the http.get() method, we send a GET request to the constructed full URL. The response from the server, stored in the variable response, is then printed using response.body, which gives us the raw response body as a string.

Here’s an example of what the raw response might look like:

Raw Response:
[
  {
    "description": "Milk, eggs, bread, and coffee",
    "done": false,
    "id": 1,
    "title": "Buy groceries"
  },
  {
    "description": "Check in and catch up",
    "done": true,
    "id": 2,
    "title": "Call mom"
  },
  {
    "description": "Summarize Q4 performance metrics",
    "done": false,
    "id": 3,
    "title": "Finish project report"
  },
  {
    "description": "30 minutes of cardio",
    "done": true,
    "id": 4,
    "title": "Workout"
  }
]

This raw output allows us to see the immediate result returned by the server, serving as a starting point for further processing of the data.

Handling Successful Requests (Status Code: 200)
Handling Bad Requests (Status Code: 400)

Errors can happen on either the client or server side, so it's important to handle them properly. A 400 status code means there was a mistake in the request, often due to incorrect syntax from the client side. To understand these errors better, you can print the response body, which provides more details about what went wrong and can help you fix the issue.

else if (response.statusCode == 400) {
  print("\nBad Request. The server could not understand the request due to invalid syntax.");
  print("Error Details: ${response.body}");
}
Handling Unauthorized Requests (Status Code: 401)

A 401 status code indicates an unauthorized request, often due to missing or invalid credentials. This situation requires the user to address authentication problems to proceed.

else if (response.statusCode == 401) {
  print("\nUnauthorized. Access is denied due to invalid credentials.");
  print("Error Details: ${response.body}");
}
Handling Not Found Errors (Status Code: 404)

When encountering a 404 status code, it means the requested resource is not found, often pointing to a missing resource or incorrect endpoint.

else if (response.statusCode == 404) {
  print("\nNot Found. The requested resource could not be found on the server.");
  print("Error Details: ${response.body}");
}
Handling Internal Server Errors (Status Code: 500)

A 500 status code reflects an internal server error, indicating the server encountered an unexpected situation. Such cases usually require investigation on the server side to resolve the issue.

else if (response.statusCode == 500) {
  print("\nInternal Server Error. The server has encountered a situation it doesn't know how to handle.");
  print("Error Details: ${response.body}");
}
Handling Unexpected Status Codes

For responses falling outside the common codes, a generic approach captures these cases, ensuring all responses are analyzed for potential issues.

else {
  print("\nUnexpected Status Code: ${response.statusCode}");
  print("Error Details: ${response.body}");
}

By handling these diverse status codes, we ensure robust API interactions and better understand the server's communication.

Conclusion, Key Takeaways, and Next Steps

In this lesson, we've explored the powerful capability of Dart's http package to make GET requests to an API. We've seen how to retrieve and handle responses effectively, interpreting HTTP status codes to understand the server's communication. This knowledge is crucial for creating reliable interactions with APIs. As you move on to the practice exercises, focus on experimenting with the code snippets and handling various status codes to solidify your understanding. In future lessons, we will build on this foundation, unlocking the potential to perform more complex tasks like updating and manipulating API data. Keep up the great work as you advance through the course!

Sign up
Join the 1M+ learners on CodeSignal
Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal