Axios Js

Posted on  by admin

Axios is an open source library that allows you to make HTTP requests. It provides methods that include .get(), .post(), and .delete(). In this article, you will build a JavaScript application that uses Axios to perform GET, POST, and DELETE requests to a server for updates to a list of todo items. To complete this tutorial, you’ll need:. A local development environment for Node.js. Follow How to Install Node.js and Create a Local Development Environment.

Config Defaults

This tutorial was verified with Node v15.11.0, npm v7.6.1, axios v0.21.1, and parcel-bundler v1.12.5. In this section, you will create a new project directory, install package dependencies, and establish configuration files. First, create a new project directory:.

Response Schema

Then, change into the new project directory:. Next, initialize a new npm project:. Then, install Axios:. Parcel is a tool to bundle and serve code. Install parcel-bundler as a dev dependency:. At this point, you will have a new project with axios and parcel-bundler. Next, open package.json in your code editor.

And modify the "scripts" to execute parcel for dev and build:. Then, create a new app.js file. And add the following lines of code to avoid a “regeneratorRuntime is not defined” error when using await and async:.

Next, create a new index.html file. And add the following lines of code:. This code will create an unordered list of todo items. Presently, this list will be empty, but it will be populated later. Now, verify that your project is working up to this point.

Cancellation

Open your terminal and run the following command:. Then navigate to http://localhost:1234/ with your browser. You will observe a screen that says Todos. In this section, you will construct a function to utilize Axios to perform a GET HTTP request to the JSON Placeholder API.

Open app;js in your code editor. And add the following lines of code:. Notice how axios.get is passed a path constructed out of the BASE_URL and a "todos" string. A _limit parameter is will restrict the response to 5 items. This method will provide a response object back.

This includes information about the response including things like headers, status, config, and most importantly, data. Next, add code to create a todo element and append the todo elements to the list:.

Save your changes and view your application in the browser. You will observe a list with five items. In this section, you will construct a form and input to capture information for new todo items to add to the list. It will utilize Axios to perform a POST HTTP request. Open index.html in your code editor. And add the following lines of code:. Next, open app.js in your code editor.

Step 1 — Setting Up the Project

And add the following lines of code:. This code will take the value from the form and create a todo object. Next, you will need to define the addTodoItem function inside of app.js:. Notice how axios.post is passed a path and a payload containing the todo item. Save your changes and view your application in the browser.

You will observe a list with five items and a form. After using the form to add a new todo item, the list will update to display six items. In this section, you will create a click event on existing todo items to remove them from the list. It will utilize Axios to perform a DELETE HTTP request. Next, you will need to define the deleteTodoItem function inside of app.js:.

  • Notice how axios.delete is passed a path that includes the id for the todo item:.
  • Next, create a removeTodoElement function:.
  • This code will remove the element from the DOM and then call deleteTodoItem with the id.
  • Now, scroll back up to the createTodoElement function.
  • You will add two new lines of code.
  • When the list item element is created, you will also add an onclick event to the element to delete it.
  • It will take the item id and pass it to removeTodoElement which in turn will call deleteTodoItem:.
  • Save your changes and view your application in the browser.

You will observe a list with five items and a form. After using the form to add a new todo item, the list will update to display six items. After clicking on one of the todo items, the list will display five items.