Axios Post Request Example

Posted on  by admin

Below is a quick set of examples to show how to send HTTP POST requests to an API using the axios HTTP client which is available on npm. Other HTTP examples available:. Axios: GET, PUT, DELETE. Fetch: GET, POST, PUT, DELETE.

React + Axios: GETPOST, PUT, DELETE.

React + Fetch: GET, POST, PUT, DELETE.

Axios PUT with headers

Vue + Axios: GET, POST. Vue + Fetch: GET, POST. Angular: GET, POST, PUT, DELETE.

  • Blazor WebAssembly:GET, POST. With the npm CLI: npm install axios.
  • With the yarn CLI: yarn add axios. This sends an HTTP POST request to the Reqres api which is a fake online REST api used for testing, it includes a generic /api/ route that supports POST requests to any and responds with the contents of the post body and a dynamic id property.

This example sends an article object to the /api/articles route and then writes the id from the response to the #post-request .article-id element so it's displayed on the page.

  • Example Axios POST request at https://stackblitz.com/edit/axios-http-post-request-examples?file=post-request.js.
  • This sends the same POST request with axios, but this version uses an async function and the await javascript expression to wait for the promises to return (instead of using the promise then() method as above).
  • Example Axios POST request at https://stackblitz.com/edit/axios-http-post-request-examples?file=post-request-async-await.js.
  • This sends a POST request with axios to an invalid url on the api then writes the error message to the parent of the #post-request-error-handling .article-id element and logs the error to the console.
  • Example Axios POST request at https://stackblitz.com/edit/axios-http-post-request-examples?file=post-request-error-handling.js.
  • This sends the same POST request again using axios with a couple of headers set, the HTTP Authorization header and a custom header My-Custom-Header.

Example Axios POST request at https://stackblitz.com/edit/axios-http-post-request-examples?file=post-request-set-headers.js.

Axios custom header

Below is a quick set of examples to show how to send HTTP POST requests from React to a backend API using the axios HTTP client which is available on npm.

  • Other HTTP examples available:.
  • React + Axios: GET, PUT, DELETE.
  • React + Fetch: GET, POST, PUT, DELETE.
  • Vue + Axios: GET, POST.

Vue + Fetch: GET, POST.

Create Axios instance

Angular: GET, POST, PUT, DELETE. Blazor WebAssembly:GET, POST.

  • Axios: GET, POST, PUT, DELETE. Fetch: GET, POST, PUT, DELETE.
  • With the npm CLI: npm install axios. With the yarn CLI: yarn add axios.
  • This sends an HTTP POST request to the Reqres api which is a fake online REST api that includes a generic /api/ route that responds to POST requests for any with the contents of the post body and a dynamic id property.
  • This example sends an article object to the /api/articles route and then assigns the id from the response to the react component state property articleId so it can be displayed in the component render() method.
  • Example React component at https://stackblitz.com/edit/react-http-post-request-examples-axios?file=App/PostRequest.jsx.
  • This sends the same POST request from React using axios, but this version uses React hooks from a function component instead of lifecycle methods from a traditional React class component.

The useEffect React hook replaces the componentDidMount lifecycle method to make the HTTP POST request when the component loads.

Axios status code

The second parameter to the useEffect React hook is an array of dependencies that determines when the hook is run, passing an empty array causes the hook to only be run once when the component first loads, like the componentDidMount lifecyle method in a class component.

Install Axios

For more info on React hooks see https://reactjs.org/docs/hooks-intro.html.

Axios Response object

Example React hooks component at https://stackblitz.com/edit/react-http-post-request-examples-axios?file=App/PostRequestHooks.jsx.

Axios

This sends the same POST request from React using axios, but this version uses an async function and the await javascript expression to wait for the promises to return (instead of using the promise then() method as above).

Axios Response Body

Example React component at https://stackblitz.com/edit/react-http-post-request-examples-axios?file=App/PostRequestAsyncAwait.jsx.

This sends a POST request from React using axios to an invalid url on the api then assigns the error message to the errorMessage component state property and logs the error to the console.

Axios Request example with Rest API

Example React component at https://stackblitz.com/edit/react-http-post-request-examples-axios?file=App/PostRequestErrorHandling.jsx.

Deleting a user

This sends the same POST request again from React using axios with a couple of headers set, the HTTP Authorization header and a custom header My-Custom-Header.

Axios DELETE with headers

Example React component at https://stackblitz.com/edit/react-http-post-request-examples-axios?file=App/PostRequestSetHeaders.jsx.

Simple POST request with a JSON body using axios

Axios is a promise-based HTTP Client Javascript library for Node.js and Browser. In this tutorial, we will create examples that use Axios to make Get/Post/Put/Delete request.

Axios download image

The final section shows a simple Axios HTTP Client to interact with Rest API. Related Posts: – Axios File Upload example – Axios Interceptors tutorial with Refresh Token example – Javascript Fetch API tutorial: Get/Post/Put/Delete example – React Axios example – Get/Post/Put/Delete with Rest API – React Query and Axios example with Rest API – Vue Axios example – Get/Post/Put/Delete with Rest API.

Axios PUT request

Axios can run in the Node.js and Browser with the same codebase. – On the server-side it uses the native Node.js http module – On the client-side (browser) it uses XMLHttpRequests.

Axios HEAD request

Using Axios POST

Additionally, there are important features that you should know:. Supports the Promise API. Intercept request and response (Axios Interceptors tutorial).

Axios GET with params

Transform request and response data. Cancel requests. Automatic transforms for JSON data.

Axios GET request with callbacks

Client side support for protecting against XSRF. (from https://github.com/axios/axios#features).

  • We can add Axios to our project/code with one of following simple ways:.
  • The response for a Axios request contains:.
  • data: parsed response body provided by the server.
  • status: HTTP status code. statusText: HTTP status message.

headers: HTTP headers (lower case). config: the request config that was provided to axios.

MethodsUrlsActions
POST/api/tutorialscreate new Tutorial
GET/api/tutorialsretrieve all Tutorials
GET/api/tutorials/:idretrieve a Tutorial by :id
PUT/api/tutorials/:idupdate a Tutorial by :id
DELETE/api/tutorials/:iddelete a Tutorial by :id
DELETE/api/tutorialsdelete all Tutorials
GET/api/tutorials?title=[keyword]find all Tutorials which title contains keyword

request: the last client request instance that generated this response.

Axios Response Object has data field that contains the parsed response body. We can use then or await to receive the response body as follows:.

  • We use catch() for handling errors.
  • If you want to use async-await, just wrap the axios call with try/catch block.
  • You can use the params config option to set query string params.
  • And this is equivalent:. To send Axios GET request with Headers, we pass an option object with headers property.
  • We can merge params and headers in a Axios GET request like this.
  • You can perform an Axios POST object request with body as second parameter.

Further Reading

To send Axios POST request with Headers, we pass an option object with headers property right after the body.

You can perform an Axios PUT json object request with body as second parameter.

To send Axios PUT request with Headers, we pass an option object with headers property right after the body.

To send Axios DELETE request with Headers, we pass an option object with headers property. We can create a new instance of axios using axios.create(config) method.

  • We will build a HTTP Client to make CRUD requests to Rest API in that:. Axios GET request: get all Tutorials, get Tutorial by Id, find Tutorial by title.

  • Axios POST request: create new Tutorial. Axios PUT request: update an existing Tutorial.

Setting up Axios

Axios DELETE request: delete a Tutorial, delete all Tutorials. This Axios Client works with the following Web API:.