How to make an HTTP request?

In this blog, we’re going to know about HTTP requests and their methods.

When you enter a URL into your web browser, your computer is actually sending an HTTP request to a web server. The browser then receives a response from the server, which is typically the web page that you were trying to view.

//DEFINITION:

An HTTP request is a message sent by a client to a server requesting a specific action to be performed. The most common action is to request a web page, but a request can also be used to submit data to a web server, such as when a user fills out a form.

HTTP is a stateless protocol, which means that each request is independent of any other request. This is one of the reasons why the Web is such a scalable system.

HTTP request methods:

The primary or most-commonly-used HTTP verbs (or methods, as they are properly called) are POST, GET, PUT, PATCH, and DELETE. These correspond to create, read, update, and delete (or CRUD) operations, respectively. There are a number of other verbs, too, but are utilized less frequently.

Let’s take a look at each of the HTTP verbs individually and discuss when you might want to use them.

When a user submits an HTML form, the data entered into the form is sent to the server as an HTTP request. The method used to send the data to the server is specified in the form’s method attribute. There are two methods for sending form data to the server: GET and POST.

POST

POST is by far the most common method. It’s used any time you are creating or adding something to the server. For example, when you fill out a web form and hit “submit,” you are actually sending a POST request to the server.

The POST method sends the form data to the server as an HTTP request body. The data is not visible to anyone, and it is more secure than the GET method.

When the user submits the form, the browser encodes the form data and sends it to the server. The server decodes the form data and processes it.

const post = async () => {
  const response = await axios.post("https://jsonplaceholder.typicode.com/posts", {
    title: "foo",
    body: "bar",
    userId: 1,
  });
  console.log(response.data);
};

GET

GET is the second most common HTTP verb and is used to retrieve data or fetch data from the server. For example, when you type www.google.com into your web browser, your browser is actually sending a GET request to Google’s server to retrieve the Google homepage.

The GET method sends the form data to the server as a URL-encoded string. The data is appended to the URL, and the resulting URL is sent to the server. The data is encoded in the URL so that it can be safely sent over the Internet. The data is not secure, and it is visible to anyone who can see the URL.

const get = async () => {
  const response = await axios.get("https://jsonplaceholder.typicode.com/posts");
  console.log(response.data);
};

In both GET and POST methods, I’ve used a term called Axios. Axios is a promise-based HTTP client that works both in the browser and in a node.js environment. It basically provides a single API for dealing with XMLHttpRequests and node’s HTTP interface. It can be used in plain JavaScript or with a library such as Vue or React. It supports the Promise API that is native to JavaScript ES6. It also has an optional interceptor and transformation API to process requests and responses.

PUT

PUT is most commonly used for updating an existing resource on the server. For example, if you are updating a user’s information, you would send a PUT request to the server with the updated information.

PATCH

PATCH is similar to PUT but is used to make a partial update to a resource. For example, if you are only updating the user’s first name, you would send a PATCH request to the server with the new first name.

DELETE

DELETE is used to delete a resource on the server. For example, if you are deleting a user’s account, you would send a DELETE request to the server.

In addition to the primary HTTP verbs, there are a few other, less common ones that you might encounter.

HEAD

HEAD is similar to GET but is used to retrieve data from the server without actually returning the data. This is useful for retrieving data that might be too large to return in its entirety, or for checking to see if a resource has been updated without actually retrieving the updated resource.

OPTIONS

OPTIONS is used to retrieve information about a resource, such as what methods are allowed on that resource. For example, if you send an OPTIONS request to www.google.com, the server will return a list of the HTTP methods that are allowed on that resource.

TRACE

TRACE is used to debug web applications. It essentially just echoes back the data that was sent to the server, which can be useful for debugging purposes.

CONNECT

CONNECT is used in tunnelling or setting up a secure connection between the client and server. This is typically used in “https://” connections, where the data being sent is encrypted.

Now that you know the most common HTTP verbs and what they are used for, you can start using them in your own web applications. Just remember that when you are creating a new resource, you should use POST; when you are retrieving a resource, you should use GET; when you are updating a resource, you should use PUT; when you are deleting a resource, you should use DELETE; and when you are making a partial update to a resource, you should use PATCH.