Using Axios with Async/Await

According to MDN Async is defined as:

‘An async function is a function declared with the async keyword, and the await keyword is permitted within them. The async and await keywords enable asynchronous, promise-based behavior to be written in a cleaner style, avoiding the need to explicitly configure promise chains.’

While inside of an Async function, the use of the ‘Await’ keyword allows for promised-based returning functions to behave like they are synchronous functions. This is accomplished by suspending the execution of the function until the returning promise is either rejected or fulfilled.

Axios is an npm package that utilized promise-based HTTP requests. It can be used as an alternate to the built-in fetch methods.

For these examples, I will be using the jsonplaceholder REST API as an endpoint for the requests. Here is how you perform basic CRUD requests while utilizing Axios and Async/Await

GET:

const getPosts = async () => {
  console.log('GET Request');
  try {
    const request = await axios.get(
      'https://jsonplaceholder.typicode.com/posts?_limit=5'
    );
    console.log(requests);
  } catch (error) {
    alert(error);
  }
};

The getPosts function is defined as an async function at the beginning of the arrow function. From there, the variable request is labeled as an await variable. Then axios.get(url) is used to make the request to the API. All of this is done within a Try/Catch block. This will replace the .catch that is normally present in synchronous functions. You can then console.log the request to display the fetched data

POST:

const addPost = async () => {
  console.log('POST Request');
  try {
    const request = await axios.post(
      'https://jsonplaceholder.typicode.com/posts',
      {
        title: 'New Post',
        body: ‘Some text to put in the body’,
      }
    );
    console.log(request);
  } catch (error) {
    console.log(error);
  }
};

The post request is very similar to the get request. Except you have to change to axios.post to send data to the api. Within the request, the data to be saved must be passed as an object along with the url it is to be posted to.

PUT/PATCH:

const updatePost = async () => {
  console.log('PUT/PATCH Request');
  try {
    const request = await axios.patch(
      'https://jsonplaceholder.typicode.com/posts/1',
      {
        title: 'Updated Post',
       body: ‘Updated body text,
      }
    );
    console.log(request);
  } catch (error) {
    console.log(error);
  }
};

The put/patch is almost identical to the post request. The main difference is the URL has to include the id of the record you are trying to update. Otherwise, you still have to pass the data to be changed along with URL as an object.

DELETE:

const removePost= async () => {
  console.log('DELETE Request');
  try {
    const request = await axios.delete(
      'https://jsonplaceholder.typicode.com/posts/1'
    );
    console.log(request);
  } catch (error) {
    console.log(error);
  }
};

In a delete request, you no longer have to pass along any extra data as an object. You simply have to specify the record you are deleting with the URL.