Practical API Integration

When working with APIs, the most common HTTP methods are GET and POST:

• GET: Used to retrieve data from a server;
• POST: Used to send data to a server, typically when submitting forms or sending JSON data.

GET Request Example

A GET request fetches data from a server without modifying any resources.

The fetchPost function uses the fetch() method to send a request to a specified endpoint (/posts/1). Once the response is received, the data is parsed as JSON, and the post title is extracted and displayed in the HTML paragraph.

POST Request Example

A POST request sends data to the server, often used for creating new resources or submitting form data.

The sendPostRequest function makes a request to the specified endpoint (/posts) with the method set to 'POST'. The headers include 'Content-Type': 'application/json' to indicate that JSON data is being sent. The body contains JSON-formatted data with details for a new post, such as title, body, and userId. After the request, the server response is parsed as JSON, and the title of the created post is displayed in the HTML.

Sending Headers and Handling Different HTTP Methods (GET, POST, PUT, DELETE)

Different HTTP methods serve different purposes. In addition to GET and POST, common methods include:

• PUT: Used to update an existing resource;
• DELETE: Used to remove a resource from the server.

You can also send headers with any HTTP method to provide additional information, such as authentication tokens or content type.

PUT Request Example: Updating Data

The updatePost function sends a PUT request to the specified endpoint (/posts/1) to update an existing post. The request includes method: 'PUT' to specify the update action, and headers are set to include 'Content-Type': 'application/json', indicating JSON format. The body contains JSON-formatted data, including an id, updated title, body, and userId. Once the response is received, it is parsed as JSON, and the updated title is displayed in the HTML.

DELETE Request Example: Removing Data

The deletePost function sends a DELETE request to a specified endpoint (/posts/1) to delete a specific post. The method: 'DELETE' specifies the action. After the request, the response status is checked with response.ok: if successful, a success message ("Post deleted successfully.") is displayed in the HTML. If the deletion fails, an error message appears instead.

Using Query Parameters in API Requests

Query parameters allow you to send additional information in the URL, such as filtering data, sorting results, or specifying page numbers in paginated responses.

GET Request with Query Parameters

The fetchPostsByUser function sends a request to an API endpoint with a query parameter (userId=1), which filters posts to only those belonging to the specified user. The userId is added directly to the URL as a query parameter. After receiving the filtered data, the function displays the number of posts found for that user in the HTML.