Types of API Endpoints and Customizing a Request

Different Types of API Endpoints and How to Use Request Body and Query Parameters with JavaScript's fetch API

In the previous post, we discussed the basics of API endpoints and how they allow you to access specific functions or pieces of data provided by an API. In this post, we will go into more detail on the different types of endpoints and how to use the request body and query parameters in JavaScript using the fetch API.

GET Endpoints

GET endpoints are used to retrieve information from an API. They are the most commonly used type of endpoint and are used to retrieve data such as user information, product details, and more.

For example, let's say you want to retrieve the details of a specific product from an e-commerce API using JavaScript's fetch API. You would use the following code:

fetch("https://api.example.com/products/123", { method: "GET" })
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
  });

In this example, we're using the fetch API to send a GET request to the endpoint "https://api.example.com/products/123" (where 123 is the id of the product) and the API would return the details of the product in the form of JSON.

POST Endpoints

POST endpoints are used to send new information to an API. They are commonly used to create new resources such as creating a new user or a new product.

‍

For example, let's say you want to create a new product in an e-commerce API using JavaScript's fetch API. You would use the following code:

const product = {
  name: "Product Name",
  description: "Product Description",
  price: 100,
};

fetch("https://api.example.com/products", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(product),
})
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
  });

In this example, we're using the fetch API to send a POST request to the endpoint "https://api.example.com/products" and include the product details in the request body in the form of JSON.

PUT Endpoints

PUT endpoints are used to update existing information in an API. They are similar to POST endpoints but are used to update resources instead of creating new ones.

For example, let's say you want to update the details of a specific product in an e-commerce API using JavaScript's fetch API. You would use the following code:

const updatedProduct = {
  name: "New Product Name",
  description: "New Product Description",
  price: 120,
};

fetch("https://api.example.com/products/123", {
  method: "PUT",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(updatedProduct),
})
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
  });

DELETE Endpoints

DELETE endpoints are used to delete information from an API. They are used to delete resources such as deleting a user or a product.

For example, let's say you want to delete a specific product from an e-commerce API using JavaScript's fetch API. You would use the following code:

fetch("https://api.example.com/products/123", { method: "DELETE" })
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
  });

In this example, we're using the fetch API to send a DELETE request to the endpoint "https://api.example.com/products/123" (where 123 is the id of the product) and the API would delete the product and return a success message.

In addition to the different types of endpoints, it's also important to understand how to use query parameters. Query parameters are used to filter or sort the data returned by the API. They are added to the endpoint URL and are separated by a "?" symbol. For example, to filter products by category and price range, you would use the following endpoint "https://api.example.com/products?category=books&price=50-100"

You can add query parameters to a fetch request by adding them to the endpoint URL, like this:

‍

fetch(`https://api.example.com/products?category=books&price=50-100`, {
  method: "GET",
})
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
  });