Different Ways to Make HTTP Requests in JavaScript

After learning the fundamentals by reading documentation, I got my hands dirty by creating an app based on a tutorial video. Along the way, I discovered there are several methods to make HTTP requests. Today, I’ve compiled a list of different approaches using JavaScript to fully understand them practically.

1. Fetch API


2. Axios


3. jQuery.ajax


4. WebSocket API

1. Fetch API (JavaScript Built-In)

The Fetch API is a modern JavaScript method that replaces the older XMLHttpRequest. It provides a cleaner and more powerful interface for making HTTP requests and works with Promises. The fetch() method is globally available and is used to fetch resources, such as data from a server.

fetch (URL, options)

By default, fetch() sends a GET request.

It returns a Promise that resolves to a Response object.

Example from

const response = await fetch("https://example.org/post", {

  method: "POST",

  headers: {

    "Content-Type": "application/json",

  },

  body: JSON.stringify({

    username: "example",

  }),

});

(slightly modified)

Some features of Fetch API

CORS (Cross-Origin Resource Sharing)

By default, fetch()includes CORS mode, which allows controlled access to resources from different origins.

Credentials

The credentials option controls whether cookies or authentication data are sent with the request.

2. Axios (Third-Party Library)

Axios is a popular third-party library and easier to use than fetch(). According to the documentation,

Axios is a promise-based HTTP Client for node.js and the browser. It is isomorphic (= it can run in the browser and nodejs with the same codebase). On the server-side it uses the native node.js http module, while on the client (browser) it uses XMLHttpRequests.

CODE Kopieren

// Create WebSocket connection.

const socket = new WebSocket("ws://localhost:8080");



// Connection opened

socket.addEventListener("open", (event) => {

  socket.send("Hello Server!");

});



// Listen for messages

socket.addEventListener("message", (event) => {

  console.log("Message from server ", event.data);

});

The syntax for making HTTP requests varies across programming languages and libraries, such as PHP or Next.js. However, understanding the fundamentals is invaluable, as it allows you to adapt and apply these concepts effectively, regardless of the tools you use.

Vollständiger Original-Bericht

Ausführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.

↗ Original-Artikel auf dev.to lesen