How to Fetch API in JavaScript ?

How to Fetch API in JavaScript : Fetching data from APIs in JavaScript is achieved using the fetch() function, a built-in browser feature. To initiate an API request, provide the API endpoint URL within the fetch() call. Once data is retrieved, utilize the .then() method to handle the response asynchronously. This method parses the response, often in JSON format, and further actions can be chained. Handle errors with .catch() to manage potential network or parsing issues. Custom headers, HTTP methods, and request bodies can be included for specific API requirements. While fetch() suffices for basic tasks, third-party libraries like Axios offer more advanced features for efficient and comprehensive API requests.

1. Call the fetch API

The fetch() API in JavaScript is used to make network requests and interact with APIs. By providing the API URL as an argument, fetch() initiates an asynchronous request, returning a Promise that resolves to the response. We can then use .then() to handle the response and check for success. If the response is successful, we can parse the data using .json(), making it easier to work with JSON content. After processing the data, it can be utilized to update the application’s state or dynamically render content. To ensure robustness, it’s essential to include a .catch() block for error handling during the fetch process or data parsing. Utilizing the fetch() API enables developers to seamlessly integrate external data and build more interactive and responsive web applications.

// Replace 'YOUR_API_ENDPOINT' with the actual URL of the API you want to fetch
const apiUrl = 'YOUR_API_ENDPOINT';

// Make the API request using fetch()
fetch(apiUrl)
  .then(response => {
    // Handle the response
  })
  .catch(error => {
    // Handle any errors that occurred during the fetch
  });

2. Fetch Option method

In the context of the fetch() API in JavaScript, the method property is used to specify the HTTP method to be used for the network request. It is one of the properties that can be included in the options object when making a fetch request.

The HTTP methods define the type of action the request intends to perform on the server’s resource. Commonly used methods include:

GET: Used to retrieve data from the server. It is the default method when making a fetch request if the method property is not specified.
POST: Used to send data to the server to create a new resource. It typically includes a request body containing the data to be sent.
PUT: Used to update or replace an existing resource on the server. It also requires a request body containing the updated data.
DELETE: Used to delete a resource on the server.
PATCH: Used to partially update an existing resource on the server.

Example of using fetch() with the method property:

const apiUrl = 'YOUR_API_ENDPOINT';
const requestOptions = {
  method: 'POST', // Use the HTTP POST method
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ key: 'value' }), // Data to be sent in the request body
};

fetch(apiUrl, requestOptions)
  .then(response => {
    // Handle the response
  })
  .catch(error => {
    // Handle any errors that occurred during the fetch
  });

3. Body

In the context of the fetch() API in JavaScript, the body property is used to include data in the request body when making network requests that require sending additional information to the server, such as with ‘POST’, ‘PUT’, or ‘PATCH’ methods. The body property allows you to send data in various formats, like JSON, form data, text, or binary data.

When using fetch() with the body property, you should also specify the appropriate Content-Type header to inform the server about the type of data being sent.

Here’s an example of using fetch() with the body property to send JSON data:

const apiUrl = 'YOUR_API_ENDPOINT';
const dataToSend = { name: 'John', age: 30 };

const requestOptions = {
  method: 'POST', // Or any other HTTP method that requires a request body
  headers: {
    'Content-Type': 'application/json', // Specify the data format in the request headers
  },
  body: JSON.stringify(dataToSend), // Convert the data to JSON string and include it in the body
};

fetch(apiUrl, requestOptions)
  .then(response => {
    // Handle the response
  })
  .catch(error => {
    // Handle any errors that occurred during the fetch
  });

4. Header

In the context of the fetch() API in JavaScript, the headers property is used to customize the headers of the network request. Headers are additional pieces of information sent along with the request and are used to convey metadata, such as the content type of the request body, authentication tokens, user-agent information, and more.

The headers property should be included in the options object when making a fetch request. It is an object where each property represents a header name, and the corresponding value is the content of that header.

Here’s an example of using fetch() with the headers property to set the ‘Content-Type’ and ‘Authorization’ headers:

const apiUrl = 'YOUR_API_ENDPOINT';
const dataToSend = { name: 'John', age: 30 };
const authToken = 'YOUR_AUTH_TOKEN';

const requestOptions = {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json', // Specifying JSON data in the request body
    'Authorization': `Bearer ${authToken}`, // Adding an authentication token in the header
    // Add more headers as needed
  },
  body: JSON.stringify(dataToSend),
};

fetch(apiUrl, requestOptions)
  .then(response => {
    // Handle the response
  })
  .catch(error => {
    // Handle any errors that occurred during the fetch
  });

5. Advanced Fetch Uses

Advanced uses of the fetch() API in JavaScript include handling different data formats (JSON, form data, plain text), managing cookies and authentication, controlling caching and conditional requests, custom error handling, concurrent requests using Promise. all(), aborting fetch requests, pagination and infinite scrolling, tracking file upload progress, and automating token renewal for authentication. Be mindful of security and API requirements, and consider browser compatibility when implementing advanced features.

// Function to upload a file using fetch
async function uploadFile(file) {
  const apiUrl = 'YOUR_UPLOAD_ENDPOINT';
  const formData = new FormData();
  formData.append('file', file);

  try {
    const response = await fetch(apiUrl, {
      method: 'POST',
      body: formData,
      onProgress: (event) => {
        const progress = Math.round((event.loaded / event.total) * 100);
        console.log(`Upload Progress: ${progress}%`);
      },
    });

    if (!response.ok) {
      throw new Error('File upload failed.');
    }

    const responseData = await response.json();
    console.log('Upload completed:', responseData);
  } catch (error) {
    console.error('Upload error:', error);
  }
}

// Example usage: select a file input and call the uploadFile function when a file is selected
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', (event) => {
  const selectedFile = event.target.files[0];
  if (selectedFile) {
    uploadFile(selectedFile);
  }
});

6. Failed request Code

In this code snippet, we are using fetch() to make a network request to the specified API endpoint ('YOUR_API_ENDPOINT'). If the request is successful (i.e., it returns a status code between 200 and 299), we proceed to parse the response data using .json() and handle it in the second .then() block.

However, if the request fails (e.g., it returns a status code outside the 200-299 range or there’s a network error), the .catch() block will be executed, allowing us to handle the error. In this example, we simply log the error message to the console, but you can implement custom error handling based on your application’s requirements, such as showing an error message to the user or retrying the request.

Remember to replace 'YOUR_API_ENDPOINT' with the actual URL of the API you want to fetch. Additionally, consider specific error scenarios for your API and adjust the error handling accordingly to provide meaningful feedback to users.

const apiUrl = 'YOUR_API_ENDPOINT';

fetch(apiUrl)
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    // Handle the successful response data here
    console.log('Success:', data);
  })
  .catch(error => {
    // Handle the error here
    console.error('Fetch error:', error);
  });

7. Custom fetch Function

A custom fetch function in JavaScript is a user-defined wrapper around the standard fetch() API that allows developers to add customizations or implement common functionality for their network requests. By creating a custom fetch function, developers can handle pre-processing, add default headers, handle authentication tokens, or perform error handling in a centralized and reusable way. This simplifies the code and promotes consistency across the application. The custom fetch function can also handle parsing the response data based on content types, making it more convenient to work with different data formats like JSON, text, or others. This level of abstraction enhances the code readability and maintainability, as well as enables developers to focus on specific application logic rather than repeating fetch-related code throughout the application.

async function customFetch(url, options = {}) {
  try {
    // Perform any pre-processing or customizations here, if needed
    // For example, you can add default headers or authentication tokens

    const response = await fetch(url, options);

    // Check if the response status is OK (200-299) indicating success
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }

    // Parse the response data based on the 'Content-Type' header
    const contentType = response.headers.get('content-type');
    if (contentType && contentType.includes('application/json')) {
      return response.json();
    } else if (contentType && contentType.includes('text/html')) {
      return response.text();
    } else {
      // You can add more cases for handling other content types as needed
      return response;
    }
  } catch (error) {
    // Handle any errors that occurred during the fetch
    console.error('Custom fetch error:', error);
    throw error;
  }
}