HTTP GET request in JavaScript?

Matthew C.

—September 15, 2023

The ProblemJump To Solution

You want to fetch data from an API endpoint using a GET request. How do you do this with JavaScript?

The Solution

In the browser, you can make a GET request using the global fetch() method of the Fetch API, which is a Web API. The fetch() method has one required argument, a resource, and one optional argument, an options object. The resource is the URL of the resource that you want to fetch or a Request object. The options object is used to set request settings such as the request method, headers, body, credentials, and cache.

The fetch() method returns a promise that resolves to a Response object to the request. You can make a basic fetch request as shown below:

const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
const todos = await response.json();
console.log(todos);

The await keyword is used to wait for the fetch request promise to resolve and get the promise fulfillment value, which will be the JSON data if the request is successful. It’s also used to wait for the JSON response to be parsed to a JavaScript object by the json() method, which also returns a promise.

The promise returned by a fetch() call will be rejected if the server can’t send a response. This happens when there’s a network or CORS error. A failed HTTP response status, which means a response status that is not in the range of 200 - 299, is not a network error. To check if a fetch() request was successful, check if the promise was resolved and check the boolean Response.ok property. It’s true when the response status is in the range of 200 - 299:

async function fetchTodos() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
    if (!response.ok) {
      throw new Error("Network response was not OK");
    }
    const todos = await response.json();
    console.log(todos);
  } catch (error) {
    console.error("There was a problem with your fetch request: ", error);
  }
}

fetchTodos();

The fetch() method can also be used in service workers and Node.js version 18 and above. For older versions of Node, you can use a library such as node-fetch.

For some use cases, you may want to use an HTTP client library such as Axios to make HTTP requests. For example, Axios makes it easy to intercept HTTP requests and responses and to indicate download progress.