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:

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.

Get Started With Sentry

Get actionable, code-level insights to resolve JavaScript performance bottlenecks and errors.

  1. Create a free Sentry account

  2. Create a JavaScript project and note your DSN

  3. Grab the Sentry JavaScript SDK

<script src="https://browser.sentry-cdn.com/7.104.0/bundle.min.js"></script>
  1. Configure your DSN
Sentry.init({ dsn: 'https://<key>@sentry.io/<project>' });

Check our documentation for the latest instructions.

Loved by over 4 million developers and more than 90,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.

Share on Twitter
Bookmark this page
Ask a questionJoin the discussion

Related Answers

A better experience for your users. An easier life for your developers.

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