Request Axios

Posted on  by admin

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

Conclusion

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 GET request to the npm api to search for all axios packages using the query q=axios, then writes the total from the response to the #get-request .result element so it's displayed on the page.

Example Axios GET request at https://stackblitz.com/edit/axios-http-get-request-examples?file=get-request.js. This sends the same GET 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 GET request at https://stackblitz.com/edit/axios-http-get-request-examples?file=get-request-async-await.js.

Installing Axios

This sends a GET request with axios to an invalid url on the npm api then writes the error message to the parent of the #get-request-error-handling .result element and logs the error to the console. Example Axios GET request at https://stackblitz.com/edit/axios-http-get-request-examples?file=get-request-error-handling.js.

This sends the same GET request again using axios with a couple of headers set, the HTTP Authorization header and a custom header My-Custom-Header. Example Axios GET request at https://stackblitz.com/edit/axios-http-get-request-examples?file=get-request-set-headers.js.

Editor’s note: This Axios tutorial was last updated on 26 January 2021.

Axios is a client HTTP API based on the XMLHttpRequest interface provided by browsers.