Sentry Answers>JavaScript>

HTTP GET request in JavaScript?

HTTP GET request in JavaScript?

Matthew C.

The Problem

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:

Click to Copy
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:

Click to Copy
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.

  • ResourcesImprove Web Browser Performance - Find the JavaScript code causing slowdowns
  • SentryJavascript Error Monitoring & Tracing
  • ResourcesJavaScript Frontend Error Monitoring 101
  • Syntax.fmListen to the Syntax Podcast
  • Syntax.fm logo
    Listen to the Syntax Podcast

    Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.

    SEE EPISODES

Considered “not bad” by 4 million developers and more than 100,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.

© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.