HTTP Requests using Axios in JavaScript

https://unsplash.com/@grakozy

HTTP -Hypertext Transfer Protocol- is a protocol that allows us to communicate between requests from a web browser or client and responses from web servers. JavaScript provides the opportunity to perform HTTP requests with many alternative methods such as Ajax, Fetch, JQuery, Axios.

Why Axios?

Axios is a very popular promise-based HTTP client that works in both Browser and Node.js platforms. I prefer Axios in the examples because it provides more practical and comprehensive solutions for HTTP methods.

We can make HTTP requests using different methods in JavaScript. But how? Here are the most commonly used methods:

1.GET: This method is used to get data from the server. Query texts can be sent in the URL. Get is better for the data which does not require security because the URL is displayed on the screen and parameters are stored in server logs, and browser history.

• axios.get(url[, config])

axios.get('API_URL')
  .then((response) => {
    console.log(response.data);
  });

2. POST: This method is used to send and entity to specified resource. With this method, request parameters can be sent both in the URL and message body. Using the message body will prevent the security risks and POST requests do not remain in the browser history.

• axios.post(url[, data[, config]])

axios.post('API_URL', {
  Name: 'Ceren'
})
.then((response) => {
  console.log(response);
}, (error) => {
  console.log(error);
});

3. HEAD: It has a similar function to the GET method but without the response body. It is useful for checking a resource exists before Get request.

• axios.head(url[, config])

axios.head('API_URL', {
  params: {"foo": "bar"}
})
.then((response => console.info("headers:", response.headers))
);

4. PUT: This method is used to send data to update a resource on the server. It is useful for to send file content to the server. The difference from POST method, the same source is accessed with the same address. If there is content, it is replaced with the incoming data, if not, new content is created.

• axios.put(url[, data[, config]])

axios.put('API_URL',
"putdata",
{headers: {"Content-Type": "text/plain"}}
)
.then(r => console.log(r.status))
.catch(e => console.log(e));

5. DELETE: You can delete any data on the server with this method.

• axios.delete(url[, config])

axios.delete('API_URL', {
headers: {
Authorization: authorizationToken
},data: {
source: source}
});

6. PATCH: This method used to update partial resources. If you need to update only one field for the resourse, this method will be preferred.

• axios.patch(url[, data[, config]])

axios.patch('API_URL', args)
.then(res => res.data).catch(e => console.log(e));

7. OPTIONS: This method used to query the server HTTP methods that can be used for a resource.

• axios.options(url[, config])

Resources: https://www.npmjs.com/package/axios

Thank You, See you in the next article !!

You can reach out to me here,

LinkedIn: https://www.linkedin.com/in/cerensolpan/

GitHub: https://github.com/cerensolpan