Skip to main content
Send Web Request

How to Make an HTTP Request with JavaScript

JavaScript uses the Fetch API for HTTP requests. It's built into modern browsers and Node.js (18+), and returns Promises. For older Node.js, use node-fetch or Axios.

GET request example

Making a GET request to fetch data with custom headers:

const response = await fetch("https://api.example.com/users", {
  method: "GET",
  headers: {
    "Accept": "application/json",
    "Authorization": "Bearer YOUR_TOKEN"
  }
});
const data = await response.json();

POST request example

Making a POST request to send JSON data:

const response = await fetch("https://api.example.com/users", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "John", email: "john@example.com" })
});
const data = await response.json();

PUT request example

Replacing a resource with PUT:

const response = await fetch("https://api.example.com/users/123", {
  method: "PUT",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "John Updated", email: "john.new@example.com" })
});

PATCH request example

Partially updating a resource with PATCH:

const response = await fetch("https://api.example.com/users/123", {
  method: "PATCH",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ email: "john.updated@example.com" })
});

DELETE request example

Deleting a resource:

const response = await fetch("https://api.example.com/users/123", {
  method: "DELETE",
  headers: { "Authorization": "Bearer YOUR_TOKEN" }
});

Error handling

Fetch does not throw on 4xx/5xx—check response.ok or response.status. For network errors, fetch throws. Wrap in try/catch and always verify status before parsing JSON.

try {
  const response = await fetch("https://api.example.com/users");
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  const data = await response.json();
} catch (error) {
  console.error("Request failed:", error);
}

Async example

Using async/await for non-blocking requests:

async function fetchUsers() {
  const response = await fetch("https://api.example.com/users");
  return response.json();
}
const users = await fetchUsers();

Try it in Send Web Request

Convert Fetch to curl: same URL, same headers. Or use Send Web Request to test the request in your browser first, then export as curl.

Open Send Web Request

Other libraries you can try