Skip to content

Latest commit

 

History

History
109 lines (89 loc) · 3.15 KB

module-6.3-fetch-api-and-http-requests.md

File metadata and controls

109 lines (89 loc) · 3.15 KB

6.3. Fetch API and HTTP Requests

The Fetch API is a modern way to make network requests in JavaScript, including fetching data from servers using various HTTP methods like GET, POST, PUT, DELETE, and more. In this submodule, we'll explore how to use the Fetch API to perform HTTP requests and handle responses.

Fetch API Introduction

The Fetch API is built into modern browsers, making it a convenient and powerful tool for making HTTP requests. It provides a more flexible and promise-based approach to working with data from servers.

Example:

fetch('https://api.example.com/data')
  .then((response) => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error('Fetch error:', error);
  });

In this example, we use the fetch function to request data from an API and handle the response.

Working with REST APIs

REST (Representational State Transfer) is an architectural style for designing networked applications. You can use the Fetch API to interact with RESTful APIs, such as retrieving data, updating resources, or sending new data.

Example:

const postData = {
  title: 'New Post',
  content: 'This is the content of the post.',
};

fetch('https://api.example.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(postData),
})
  .then((response) => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then((data) => {
    console.log('New post created:', data);
  })
  .catch((error) => {
    console.error('Fetch error:', error);
  });

In this example, we make a POST request to create a new post using the Fetch API.

GraphQL and Alternative APIs

While REST is a common approach, GraphQL is an alternative API design that allows clients to request precisely the data they need. The Fetch API can be used with GraphQL servers as well as other non-RESTful APIs.

Example:

fetch('https://api.example.com/graphql', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    Authorization: 'Bearer YOUR_ACCESS_TOKEN',
  },
  body: JSON.stringify({
    query: `
      query {
        user(id: "123") {
          username
          email
        }
      }
    `,
  }),
})
  .then((response) => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error('Fetch error:', error);
  });

In this example, we use the Fetch API to send a GraphQL query to retrieve specific data from the server.

Benefits

  • The Fetch API provides a modern and standardized way to perform HTTP requests in JavaScript.
  • It simplifies working with RESTful and non-RESTful APIs, making it more convenient to interact with web services.

Mastering the Fetch API is essential for web developers to efficiently retrieve data from servers and create applications that communicate with external APIs.