Axios get

Axios get DEFAULT

In this guide, you will see exactly how to use Axios.js with React using tons of real-world examples featuring React hooks.

You'll see why you should use Axios as a data fetching library, how to set it up with React, and perform every type of HTTP request with it.

Then we'll touch on more advanced features like creating an Axios instance for reusability, using async-await with Axios for simplicity, and how to use Axios as a custom hook.

Let's dive right in!

Want Your Own Copy?‬ 📄

Click here to download the cheatsheet in PDF format(it takes 5 seconds).

It includes all of the essential information here as a convenient PDF guide.

Table of Contents

What is Axios?

Axios is an HTTP client library that allows you to make requests to a given endpoint:

This could be an external API or your own backend Node.js server, for example.

By making a request, you expect your API to perform an operation according to the request you made.

For example, if you make a GET request, you expect to get back data to display in your application.

Why Use Axios in React

There are a number of different libraries you can use to make these requests, so why choose Axios?

Here are five reasons why you should use Axios as your client to make HTTP requests:

  1. It has good defaults to work with JSON data. Unlike alternatives such as the Fetch API, you often don't need to set your headers. Or perform tedious tasks like converting your request body to a JSON string.
  2. Axios has function names that match any HTTP methods. To perform a GET request, you use the method.
  3. Axios does more with less code. Unlike the Fetch API, you only need one callback to access your requested JSON data.
  4. Axios has better error handling. Axios throws 400 and 500 range errors for you. Unlike the Fetch API, where you have to check the status code and throw the error yourself.
  5. Axios can be used on the server as well as the client. If you are writing a Node.js application, be aware that Axios can also be used in an environment separate from the browser.

How to Set Up Axios with React

Using Axios with React is a very simple process. You need three things:

  1. An existing React project
  2. To install Axios with npm/yarn
  3. An API endpoint for making requests

The quickest way to create a new React application is by going to react.new.

If you have an existing React project, you just need to install Axios with npm (or any other package manager):

In this guide, you'll use the JSON Placeholder API to get and change post data.

Here is a list of all the different routes you can make requests to, along with the appropriate HTTP method for each:

Here is a quick example of all of the operations you'll be performing with Axios and your API endpoint — retrieving, creating, updating, and deleting posts:

How to Make a GET Request

To fetch data or retrieve it, make a GET request.

First, you're going to make a request for individual posts. If you look at the endpoint, you are getting the first post from the endpoint:

To perform this request when the component mounts, you use the hook. This involves importing Axios, using the method to make a GET request to your endpoint, and using a callback to get back all of the response data.

The response is returned as an object. The data (which is in this case a post with , , and properties) is put in a piece of state called which is displayed in the component.

Note that you can always find the requested data from the property in the response.

How to Make a POST Request

To create new data, make a POST request.

According to the API, this needs to be performed on the endpoint. If you look at the code below, you'll see that there's a button to create a post:

When you click on the button, it calls the function.

To make that POST request with Axios, you use the method. As the second argument, you include an object property that specifies what you want the new post to be.

Once again, use a callback to get back the response data and replace the first post you got with the new post you requested.

This is very similar to the method, but the new resource you want to create is provided as the second argument after the API endpoint.

How to Make a PUT Request

To update a given resource, make a PUT request.

In this case, you'll update the first post.

To do so, you'll once again create a button. But this time, the button will call a function to update a post:

In the code above, you use the PUT method from Axios. And like with the POST method, you include the properties that you want to be in the updated resource.

Again, using the callback, you update the JSX with the data that is returned.

How to Make a DELETE Request

Finally, to delete a resource, use the DELETE method.

As an example, we'll delete the first post.

Note that you do not need a second argument whatsoever to perform this request:

In most cases, you do not need the data that's returned from the method.

But in the code above, the callback is still used to ensure that your request is successfully resolved.

In the code above, after a post is deleted, the user is alerted that it was deleted successfully. Then, the post data is cleared out of the state by setting it to its initial value of .

Also, once a post is deleted, the text "No post" is shown immediately after the alert message.

How to Handle Errors with Axios

What about handling errors with Axios?

What if there's an error while making a request? For example, you might pass along the wrong data, make a request to the wrong endpoint, or have a network error.

To simulate an error, you'll send a request to an API endpoint that doesn't exist: .

This request will return a status code:

In this case, instead of executing the callback, Axios will throw an error and run the callback function.

In this function, we are taking the error data and putting it in state to alert our user about the error. So if we have an error, we will display that error message.

In this function, the error data is put in state and used to alert users about the error. So if there's an error, an error message is displayed.

When you run this code code, you'll see the text, "Error: Request failed with status code 404".

How to Create an Axios Instance

If you look at the previous examples, you'll see that there's a that you use as part of the endpoint for Axios to perform these requests.

However, it gets a bit tedious to keep writing that for every single request. Couldn't you just have Axios remember what you're using, since it always involves a similar endpoint?

In fact, you can. If you create an instance with the method, Axios will remember that , plus other values you might want to specify for every request, including headers:

The one property in the config object above is , to which you pass the endpoint.

The function returns a newly created instance, which in this case is called .

Then in the future, you can use all the same methods as you did before, but you don't have to include the as the first argument anymore. You just have to reference the specific route you want, for example, , , and so on.

How to Use the Async-Await Syntax with Axios

A big benefit to using promises in JavaScript (including React applications) is the async-await syntax.

Async-await allows you to write much cleaner code without and callback functions. Plus, code with async-await looks a lot like synchronous code, and is easier to understand.

But how do you use the async-await syntax with Axios?

In the example below, posts are fetched and there's still a button to delete that post:

However in , there's an function called .

Making it allows you to use the keword to resolve the GET request and set that data in state on the next line without the callback.

Note that the function is called immediately after being created.

Additionally, the function is now , which is a requirement to use the keyword which resolves the promise it returns (every Axios method returns a promise to resolve).

After using the keyword with the DELETE request, the user is alerted that the post was deleted, and the post is set to .

As you can see, async-await cleans up the code a great deal, and you can use it with Axios very easily.

How to Create a Custom Hook

Async-await is a great way to simplify your code, but you can take this a step further.

Instead of using to fetch data when the component mounts, you could create your own custom hook with Axios to perform the same operation as a reusable function.

While you can make this custom hook yourself, there's a very good library that gives you a custom hook called use-axios-client.

First, install the package:

To use the hook itself, import from use-axios-client at the top of the component.

Because you no longer need , you can remove the React import:

Now you can call at the top of the app component, pass in the URL you want to make a request to, and the hook returns an object with all the values you need to handle the different states: , and the resolved .

In the process of performing this request, the value will be true. If there's an error, you'll want to display that error state. Otherwise, if you have the returned data, you can display it in the UI.

The benefit of custom hooks like this is that it really cuts down on code and simplifies it overall.

If you're looking for even simpler data fetching with Axios, try out a custom hook like this one.

What's Next?

Congratulations! You now know how to use one of the most powerful HTTP client libraries to power your React applications.

I hope you got a lot out of this guide.

Remember that you can download this guide as a PDF cheatsheet to keep for future reference.

Want Even More? Join The React Bootcamp

The React Bootcamp takes everything you should know about learning React and bundles it into one comprehensive package, including videos, cheatsheets, plus special bonuses.

Gain the insider information 100s of developers have already used to become a React pro, find their dream job, and take control of their future:

The React Bootcamp
Click here to be notified when it opens



If this article was helpful, tweet it.

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

Sours: https://www.freecodecamp.org/news/how-to-use-axios-with-react/

How to make HTTP requests with Axios

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

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

In this tutorial, we’ll demonstrate how to make HTTP requests using Axios with clear examples, including how to make an Axios POST request with , how to send multiple requests simultaneously with , and much more.

We’ll cover the following in detail:

If you’re more of a visual learner, check out the video tutorial below:

Why use Axios?

The most common way for frontend programs to communicate with servers is through the HTTP protocol. You are probably familiar with the Fetch API and the interface, which allows you to fetch resources and make HTTP requests.

If you’re using a JavaScript library, chances are it comes with a client HTTP API. jQuery’s function, for example, has been particularly popular with frontend developers. But as developers move away from such libraries in favor of native APIs, dedicated HTTP clients have emerged to fill the gap.

As with Fetch, Axios is promise-based. However, it provides a more powerful and flexible feature set.

Advantages of using Axios over the native Fetch API include:

  • Request and response interception
  • Streamlined error handling
  • Protection against XSRF
  • Support for upload progress
  • Response timeout
  • The ability to cancel requests
  • Support for older browsers
  • Automatic JSON data transformation

Installing Axios

You can install Axios using:

  • npm: $ npm install axios
  • The Bower package manager: $ bower install axios
  • Or a content delivery network: <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

How to make an Axios POST request

Making an HTTP request is as easy as passing a config object to the Axios function. You can make a POST request using Axios to “post” data to a given endpoint and trigger events.

To perform an HTTP POST request in Axios, call .

Making a POST request in Axios requires two parameters: the URI of the service endpoint and an object that contains the properties you wish to send to the server.

For a simple Axios POST request, the object must have a property. If no method is provided, will be used as the default value.

Let’s look at a simple Axios POST example:

// send a POST request axios({ method: 'post', url: '/login', data: { firstName: 'Finn', lastName: 'Williams' } });

This should look familiar to those who have worked with jQuery’s function. This code is simply instructing Axios to send a POST request to with an object of key/value pairs as its data. Axios will automatically convert the data to JSON and send it as the request body.

Shorthand methods for Axios HTTP requests

Axios also provides a set of shorthand methods for performing different types of requests. The methods are as follows:

    For instance, the following code shows how the previous example could be written using the method:

    axios.post('/login', { firstName: 'Finn', lastName: 'Williams' });

    What does return?

    Once an HTTP POST request is made, Axios returns a promise that is either fulfilled or rejected, depending on the response from the backend service.

    To handle the result, you can use the method, like this:

    axios.post('/login', { firstName: 'Finn', lastName: 'Williams' }) .then((response) => { console.log(response); }, (error) => { console.log(error); });

    If the promise is fulfilled, the first argument of will be called; if the promise is rejected, the second argument will be called. According to the documentation, the fulfillment value is an object containing the following information:

    { // `data` is the response that was provided by the server data: {}, // `status` is the HTTP status code from the server response status: 200, // `statusText` is the HTTP status message from the server response statusText: 'OK', // `headers` the headers that the server responded with // All header names are lower cased headers: {}, // `config` is the config that was provided to `axios` for the request config: {}, // `request` is the request that generated this response // It is the last ClientRequest instance in node.js (in redirects) // and an XMLHttpRequest instance the browser request: {} }

    As an example, here’s how the response looks when requesting data from the GitHub API:

    axios.get('https://api.github.com/users/mapbox') .then((response) => { console.log(response.data); console.log(response.status); console.log(response.statusText); console.log(response.headers); console.log(response.config); }); // logs: // => {login: "mapbox", id: 600935, node_id: "MDEyOk9yZ2FuaXphdGlvbjYwMDkzNQ==", avatar_url: "https://avatars1.githubusercontent.com/u/600935?v=4", gravatar_id: "", …} // => 200 // => OK // => {x-ratelimit-limit: "60", x-github-media-type: "github.v3", x-ratelimit-remaining: "60", last-modified: "Wed, 01 Aug 2018 02:50:03 GMT", etag: "W/"3062389570cc468e0b474db27046e8c9"", …} // => {adapter: ƒ, transformRequest: {…}, transformResponse: {…}, timeout: 0, xsrfCookieName: "XSRF-TOKEN", …}

    Using to send multiple requests

    One of Axios’ more interesting features is its ability to make multiple requests in parallel by passing an array of arguments to the method. This method returns a single promise object that resolves only when all arguments passed as an array have resolved.

    Here’s a simple example of how to use to make simultaneous HTTP requests:

    // execute simultaneous requests axios.all([ axios.get('https://api.github.com/users/mapbox'), axios.get('https://api.github.com/users/phantomjs') ]) .then(responseArr => { //this will be executed only when all requests are complete console.log('Date created: ', responseArr[0].data.created_at); console.log('Date created: ', responseArr[1].data.created_at); }); // logs: // => Date created: 2011-02-04T19:02:13Z // => Date created: 2017-04-03T17:25:46Z

    This code makes two requests to the GitHub API and then logs the value of the property of each response to the console. Keep in mind that if any of the arguments rejects then the promise will immediately reject with the reason of the first promise that rejects.

    For convenience, Axios also provides a method called to assign the properties of the response array to separate variables. Here’s how you could use this method:

    axios.all([ axios.get('https://api.github.com/users/mapbox'), axios.get('https://api.github.com/users/phantomjs') ]) .then(axios.spread((user1, user2) => { console.log('Date created: ', user1.data.created_at); console.log('Date created: ', user2.data.created_at); })); // logs: // => Date created: 2011-02-04T19:02:13Z // => Date created: 2017-04-03T17:25:46Z

    The output of this code is the same as the previous example. The only difference is that the method is used to unpack values from the response array.

    Sending custom headers with Axios is very straightforward. Simply pass an object containing the headers as the last argument. For example:

    const options = { headers: {'X-Custom-Header': 'value'} }; axios.post('/save', { a: 10 }, options);

    POST JSON with Axios

    Axios automatically serializes JavaScript objects to JSON when passed to the function as the second parameter. This eliminates the need to serialize POST bodies to JSON.

    Axios also sets the header to . This enables web frameworks to automatically parse the data.

    If you want to send a preserialized JSON string to as JSON, you’ll need to make sure the header is set.

    Transforming requests and responses

    Although Axios automatically converts requests and responses to JSON by default, it also allows you to override the default behavior and define a different transformation mechanism. This is particularly useful when working with an API that accepts only a specific data format, such as XML or CSV.

    To change request data before sending it to the server, set the property in the config object. Note that this method only works for , , and request methods.

    Here’s an example of how to use in Axios:

    const options = { method: 'post', url: '/login', data: { firstName: 'Finn', lastName: 'Williams' }, transformRequest: [(data, headers) => { // transform the data return data; }] }; // send the request axios(options);

    To modify the data before passing it to or , you can set the property:

    const options = { method: 'post', url: '/login', data: { firstName: 'Finn', lastName: 'Williams' }, transformResponse: [(data) => { // transform the response return data; }] }; // send the request axios(options);

    Intercepting requests and responses

    HTTP interception is a popular feature of Axios. With this feature, you can examine and change HTTP requests from your program to the server and vice versa, which is very useful for a variety of implicit tasks, such as logging and authentication.

    At first glance, interceptors look very much like transforms, but they differ in one key way: unlike transforms, which only receive the data and headers as arguments, interceptors receive the entire response object or request config.

    You can declare a request interceptor in Axios like this:

    // declare a request interceptor axios.interceptors.request.use(config => { // perform a task before the request is sent console.log('Request was sent'); return config; }, error => { // handle the error return Promise.reject(error); }); // sent a GET request axios.get('https://api.github.com/users/mapbox') .then(response => { console.log(response.data.created_at); });

    This code logs a message to the console whenever a request is sent then waits until it gets a response from the server, at which point it prints the time the account was created at GitHub to the console. One advantage of using interceptors is that you no longer have to implement tasks for each HTTP request separately.

    Axios also provides a response interceptor, which allows you to transform the responses from a server on their way back to the application:

    // declare a response interceptor axios.interceptors.response.use((response) => { // do something with the response data console.log('Response was received'); return response; }, error => { // handle the response error return Promise.reject(error); }); // sent a GET request axios.get('https://api.github.com/users/mapbox') .then(response => { console.log(response.data.created_at); });

    Client-side support for protection against XSRF

    Cross-site request forgery (or XSRF for short) is a method of attacking a web-hosted app in which the attacker disguises himself as a legal and trusted user to influence the interaction between the app and the user’s browser. There are many ways to execute such an attack, including .

    Fortunately, Axios is designed to protect against XSRF by allowing you to embed additional authentication data when making requests. This enables the server to discover requests from unauthorized locations. Here’s how this can be done with Axios:

    const options = { method: 'post', url: '/login', xsrfCookieName: 'XSRF-TOKEN', xsrfHeaderName: 'X-XSRF-TOKEN', }; // send the request axios(options);

    200’s only Monitor failed and slow Axios requests in production

    While Axios has some features for debugging requests and responses, making sure Axios continues to serve resources to your app in production is where things get tougher. If you’re interested in ensuring requests to the backend or 3rd party services are successful, try LogRocket. LogRocket Dashboard Free Trial Banner.https://logrocket.com/signup/

    LogRocket is like a DVR for web apps, recording literally everything that happens on your site. Instead of guessing why problems happen, you can aggregate and report on problematic Axios requests to quickly understand the root cause.

    LogRocket instruments your app to record baseline performance timings such as page load time, time to first byte, and slow network requests as well as logs Redux, NgRx. and Vuex actions/state. Start monitoring for free.

    Monitoring POST request progress

    Another interesting feature of Axios is the ability to monitor request progress. This is especially useful when downloading or uploading large files. The provided example in the Axios documentation gives you a good idea of how that can be done. But for the sake of simplicity and style, we are going to use the Axios Progress Bar module in this tutorial.

    The first thing we need to do to use this module is to include the related style and script:

    <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/rikmms/progress-bar-4-axios/0a3acf92/dist/nprogress.css" /> <script src="https://cdn.rawgit.com/rikmms/progress-bar-4-axios/0a3acf92/dist/index.js"></script>

    Then we can implement the progress bar like this:

    loadProgressBar() const url = 'https://media.giphy.com/media/C6JQPEUsZUyVq/giphy.gif'; function downloadFile(url) { axios.get(url) .then(response => { console.log(response) }) .catch(error => { console.log(error) }) } downloadFile(url);

    To change the default styling of the progress bar, we can override the following style rules:

    #nprogress .bar { background: red !important; } #nprogress .peg { box-shadow: 0 0 10px red, 0 0 5px red !important; } #nprogress .spinner-icon { border-top-color: red !important; border-left-color: red !important; }

    Canceling requests

    In some situations, you may no longer care about the result and want to cancel a request that’s already sent. This can be done by using a cancel token. The ability to cancel requests was added to Axios in version 1.5 and is based on the cancelable promises proposal. Here’s a simple example:

    const source = axios.CancelToken.source(); axios.get('https://media.giphy.com/media/C6JQPEUsZUyVq/giphy.gif', { cancelToken: source.token }).catch(thrown => { if (axios.isCancel(thrown)) { console.log(thrown.message); } else { // handle error } }); // cancel the request (the message parameter is optional) source.cancel('Request canceled.');

    You can also create a cancel token by passing an executor function to the constructor, as shown below:

    const CancelToken = axios.CancelToken; let cancel; axios.get('https://media.giphy.com/media/C6JQPEUsZUyVq/giphy.gif', { // specify a cancel token cancelToken: new CancelToken(c => { // this function will receive a cancel function as a parameter cancel = c; }) }).catch(thrown => { if (axios.isCancel(thrown)) { console.log(thrown.message); } else { // handle error } }); // cancel the request cancel('Request canceled.');

    Popular Axios libraries

    Axios’ rise in popularity among developers has resulted in a rich selection of third-party libraries that extend its functionality. From testers to loggers, there’s a library for almost any additional feature you may need when using Axios. Here are some popular libraries currently available:

    Browser support

    When it comes to browser support, Axios is very reliable. Even older browsers such as IE 11 work well with Axios.

    Chrome

    Firefox

    Safari

    Edge

    IE

    heavy check mark
    heavy check mark
    heavy check mark
    heavy check mark

    11

    Wrapping up

    There’s a good reason Axios is so popular among developers: it’s packed with useful features. In this post, we’ve taken a good look at several key features of Axios and learned how to use them in practice. But there are still many aspects of Axios that we’ve not discussed. So be sure to check out the Axios GitHub page to learn more.

    Do you have some tips on using Axios? Let us know in the comments!

    Sours: https://blog.logrocket.com/how-to-make-http-requests-like-a-pro-with-axios/
    1. Lake of mercury china
    2. Gmc yukon 2019
    3. Iso din radio
    4. Ut tyler nursing acceptance rate
    5. Crash course muscle

    Axios Tutorial: Get/Post/Put/Delete request example

    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. The final section shows a simple Axios HTTP Client to interact with Rest API.

    Related Posts:
    – Axios Interceptors tutorial with Refresh Token example
    – Javascript Fetch API tutorial: Get/Post/Put/Delete example

    Contents

    Axios Features

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

    Additionally, there are important features that you should know:

    • Supports the Promise API
    • Intercept request and response (Axios Interceptors tutorial)
    • Transform request and response data
    • Cancel requests
    • Automatic transforms for JSON data
    • Client side support for protecting against XSRF

    (from https://github.com/axios/axios#features)

    Install Axios

    We can add Axios to our project/code with one of following simple ways:

    – npm:

    – bower:

    – yarn:

    – CDN:

    Or:

    Axios Response Object schema

    The response for a Axios request contains:

    • : parsed response body provided by the server
    • : HTTP status code
    • : HTTP status message
    • : HTTP headers (lower case)
    • : the request config that was provided to
    • : the last client request instance that generated this response

    For example:

    Axios Response Body

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

    Axios Error handling

    We use for handling errors.

    Axios Error handling with async-await

    If you want to use async-await, just wrap the axios call with try/catch block.

    Axios GET request

    Async/await:

    Axios GET with params

    You can use the config option to set query string params.

    And this is equivalent:

    Axios GET with headers

    To send Axios GET request with Headers, we pass an option object with property.

    Axios GET with params and headers

    We can merge and in a Axios GET request like this.

    Axios POST with body

    You can perform an Axios POST object request with as second parameter.

    Axios POST with headers

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

    Axios PUT request

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

    Axios PUT with headers

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

    Axios DELETE request

    Axios DELETE with headers

    To send Axios DELETE request with Headers, we pass an option object with property.

    Create Axios instance

    We can create a new instance of axios using method.

    Axios Request example with Rest API

    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
    • Axios DELETE request: delete a Tutorial, delete all Tutorials

    axios-request-example-get-post-put-delete

    This Axios Client works with the following Web API:

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

    You can find step by step to build a Server like this in one of these posts:

    Remember that you need to configure CORS: .
    It helps the REST APIs can be accessed by any origin.

    – Create a Tutorial using axios POST request:

    axios-post-request-example

    – Retrieve all Tutorials using axios GET request:

    axios-get-request-example

    – Retrieve a Tutorial by Id using axios GET request:

    axios-get-request-example-by-id

    – Find Tutorials by title using axios GET request with params:

    axios-get-request-params-example

    – Update a Tutorial using axios PUT request:

    axios-put-request-example

    – Delete Tutorial using axios DELETE request:

    axios-delete-request-example

    Source Code

    index.html

    main.js

    Conclusion

    With this Axios tutorial, you’ve known many ways to make GET/POST/PUT/DELETE request using Axios (with headers, params, body…). Furthermore, you can apply it in one of following React/Vue applications:

    If you want to use Fetch API instead, please visit:
    Javascript Fetch API tutorial: Get/ Post/ Put/ Delete example

    Happy Learning! See you again.

    Further Reading

    Sours: https://www.bezkoder.com/axios-request/
    How to make HTTP requests like a pro with Axios

    Axios tutorial

    last modified October 18, 2021

    Axios tutorial shows how to generage requests in JavaScript using Axios client library. Check the JavaScript fetch tutorial for an alternative way of creating requests in JavaScript.

    Axios

    is a promise based HTTP client for the browser and Node.js. Axios makes it easy to send asynchronous HTTP requests to REST endpoints and perform CRUD operations. It can be used in plain JavaScript or with a library such as Vue or React.

    In this tutorial we work with Axios in a Node.js application.

    Setting up Axios

    First, we install Axios.

    $ node -v v12.20.1

    We use Node.js version 12.20.1.

    $ npm init -y

    We initiate a new Node.js application.

    $ npm i axios

    We install Axios with command.

    Axios making requests

    There are multiple methods for creating requests in axios.

    axios(config) axios(url[, config])

    These are basic methods for generating requests in axios.

    axios.request(config) axios.get(url[, config]) axios.delete(url[, config]) axios.head(url[, config]) axios.options(url[, config]) axios.post(url[, data[, config]]) axios.put(url[, data[, config]]) axios.patch(url[, data[, config]])

    These are method aliases, created for convenience.

    Axios Response object

    When we send a request to a server, it returns a response. The Axios response object consists of:

    • data - the payload returned from the server
    • status - the HTTP code returned from the server
    • statusText - the HTTP status message returned by the server
    • headers - headers sent by server
    • config - the original request configuration
    • request - the request object

    Axios GET request with callbacks

    In the first example, we create a simple GET request. We use callbacks.

    get_req.js

    const axios = require('axios'); axios.get('http://webcode.me').then(resp => { console.log(resp.data); });

    We generate a simple GET request and show the output.

    const axios = require('axios');

    The Axios library is included.

    axios.get('http://webcode.me').then(resp => { console.log(resp.data); });

    With , we send a GET request. We output the data from the response. The data is HTML code.

    $ node get_req.js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>My html page</title> </head> <body> <p> Today is a beautiful day. We go swimming and fishing. </p> <p> Hello there. How are you? </p> </body> </html>

    Axios GET request with async/await

    The following example creates the same request. This time we use syntax.

    get_req_async.js

    const axios = require('axios'); async function makeGetRequest() { let res = await axios.get('http://webcode.me'); let data = res.data; console.log(data); } makeGetRequest();

    The example creates a simple GET request utilizing syntax.

    Axios basic API

    The , , or methods are convenience methods for the basic axios API: and .

    basic_api.js

    const axios = require('axios'); async function makeRequest() { const config = { method: 'get', url: 'http://webcode.me' } let res = await axios(config) console.log(res.status); } makeRequest();

    The example creates a GET request to .

    const config = { method: 'get', url: 'http://webcode.me' }

    We specify the details of the request in the configuration object.

    Axios HEAD request

    A HEAD request is a GET request without a message body. In Axios, a HEAD request is created with .

    head_req.js

    const axios = require('axios'); async function makeHeadRequest() { let res = await axios.head('http://webcode.me'); console.log(`Status: ${res.status}`) console.log(`Server: ${res.headers.server}`) console.log(`Date: ${res.headers.date}`) } makeHeadRequest();

    The example shows the status, server name, response date from a response generated with a HEAD request.

    $ node head_req.js Status: 200 Server: nginx/1.6.2 Date: Wed, 10 Feb 2021 09:52:59 GMT

    Axios status code

    HTTP response status codes indicate whether a specific HTTP request has been successfully completed. Responses are grouped in five classes:

    • Informational responses (100–199)
    • Successful responses (200–299)
    • Redirects (300–399)
    • Client errors (400–499)
    • Server errors (500–599)

    status_code.js

    const axios = require('axios'); async function makeRequest() { const config = { method: 'head', url: 'http://webcode.me' } let res = await axios(config) console.log(res.status); } makeRequest();

    We get the status code from the property of the response.

    $ node status_code.js 200

    Axios custom header

    In the following example, we send a custom header.

    custom_header.js

    const axios = require('axios'); async function makeRequest() { const config = { method: 'get', url: 'http://webcode.me', headers: { 'User-Agent': 'Axios - console app' } } let res = await axios(config) console.log(res.request._header); } makeRequest();

    The example sends a customized header.

    const config = { method: 'get', url: 'http://webcode.me', headers: { 'User-Agent': 'Axios- console app' } }

    The custom data is added to the attribute of the configuration object.

    console.log(res.request._header);

    We verify the sent data.

    $ node custom_header.js GET / HTTP/1.1 Accept: application/json, text/plain, */* User-Agent: Console app Host: webcode.me Connection: close

    Axios GET request query parameters

    In the following example, we append some query parameters to the URL.

    get_req_query.js

    const axios = require('axios'); const url = require('url'); async function makeGetRequest() { let payload = { name: 'John Doe', occupation: 'gardener' }; const params = new url.URLSearchParams(payload); let res = await axios.get(`http://httpbin.org/get?${params}`); let data = res.data; console.log(data); } makeGetRequest();

    We use the of the module to transform the JSON object into suitable URL query form.

    $ node get_req_query.js { args: { name: 'John Doe', occupation: 'gardener' }, headers: { Accept: 'application/json, text/plain, */*', Host: 'httpbin.org', 'User-Agent': 'axios/0.21.1', 'X-Amzn-Trace-Id': 'Root=1-6023ba22-48b1ff807ea9d934457abbcd' }, ... url: 'http://httpbin.org/get?name=John+Doe&occupation=gardener' }

    Getting Github information

    Many online services contain public APIs. In the following example, we generate a request to a Github API.

    github_info.js

    const axios = require('axios'); async function getNumberOfFollowers() { let res = await axios.get('https://api.github.com/users/janbodnar'); let nOfFollowers = res.data.followers; let location = res.data.location; console.log(`# of followers: ${nOfFollowers}`) console.log(`Location: ${location}`) } getNumberOfFollowers();

    In the example, we get the number of followers and location of a user.

    $ node github_info.js # of followers: 195 Location: Bratislava

    Axios POST JSON request

    A POST request is created with method.

    Axios automatically serializes JavaScript objects to JSON when passed to the function as the second parameter; we do not need to serialize POST bodies to JSON.

    post_json.js

    const axios = require('axios'); async function makeGetRequest() { let payload = { name: 'John Doe', occupation: 'gardener' }; let res = await axios.post('http://httpbin.org/post', payload); let data = res.data; console.log(data); } makeGetRequest();

    The example creates a POST request to an online testing service. The payload is the second parameter to the function.

    $ node post_json.js { args: {}, data: '{"name":"John Doe","occupation":"gardener"}', files: {}, form: {}, headers: { Accept: 'application/json, text/plain, */*', 'Content-Length': '43', 'Content-Type': 'application/json;charset=utf-8', Host: 'httpbin.org', 'User-Agent': 'axios/0.21.1', 'X-Amzn-Trace-Id': 'Root=1-6023bc92-5bcf8f4e10f829be3a3f04f7' }, json: { name: 'John Doe', occupation: 'gardener' }, ... url: 'http://httpbin.org/post' }

    Axios POST FORM request

    In the following example, we generate a POST request with form data.

    $ npm i form-data

    We install the module.

    With application/x-www-form-urlencoded the data is sent in the body of the request; the keys and values are encoded in key-value tuples separated by '&', with a '=' between the key and the value.

    post_form.js

    const axios = require('axios'); const FormData = require('form-data'); async function makeGetRequest() { const form_data = new FormData(); form_data.append('name', 'John Doe'); form_data.append('occupation', 'gardener'); let res = await axios.post('http://httpbin.org/post', form_data, { headers: form_data.getHeaders() }); let data = res.data; console.log(data); } makeGetRequest();

    To produce form data in the appropriate format, we use the FormData object.

    $ node post_form.js { args: {}, data: '', files: {}, form: { name: 'John Doe', occupation: 'gardener' }, headers: { Accept: 'application/json, text/plain, */*', 'Content-Length': '284', 'Content-Type': 'multipart/form-data; ... Host: 'httpbin.org', 'User-Agent': 'axios/0.21.1', 'X-Amzn-Trace-Id': 'Root=1-6023bff5-056fc9fd39f94e870b52169b' }, json: null, ... url: 'http://httpbin.org/post' }

    Axios download image

    The following example shows how to download an image with Axios.

    get_image.js

    const axios = require('axios'); const fs = require('fs'); var config = { responseType: 'stream' }; let url = 'https://images.dog.ceo/breeds/setter-english/n02100735_4870.jpg'; async function getImage() { let resp = await axios.get(url, config); resp.data.pipe(fs.createWriteStream('image.jpg')); } getImage();

    The example retrieves an image from an online service, which keeps images of dogs.

    const axios = require('axios'); const fs = require('fs');

    We include and modules.

    var config = { responseType: 'stream' };

    We specify the response type in the configuration object.

    let resp = await axios.get(url, config);

    We get the image.

    resp.data.pipe(fs.createWriteStream('image.jpg'));

    With the help of the module, we save the image to disk.

    Axios multiple requests

    We can create multiple requests in one shot with Axios.

    multiple_requests.js

    const axios = require('axios'); async function makeRequests(urls) { const fetchUrl = (url) => axios.get(url); const promises = urls.map(fetchUrl); let responses = await Promise.all(promises); responses.forEach(resp => { let msg = `${resp.config.url} -> ${resp.headers.server}: ${resp.status}`; console.log(msg); }); } let urls = [ 'http://webcode.me', 'https://example.com', 'http://httpbin.org', 'https://clojure.org', 'https://fsharp.org', 'https://symfony.com', 'https://www.perl.org', 'https://www.php.net', 'https://www.python.org', 'https://code.visualstudio.com', 'https://github.com' ]; makeRequests(urls);

    The example generates async requests to the given list of urls. It prints the web site's url, server name, and status code.

    const fetchUrl = (url) => axios.get(url);

    The makes an async request and returns a promise.

    let responses = await Promise.all(promises);

    We collect all promises with . The method resolves after all of the given promises have either fulfilled or rejected.

    $ node multiple_requests.js http://webcode.me -> nginx/1.6.2: 200 https://example.com -> ECS (dcb/7F83): 200 http://httpbin.org -> gunicorn/19.9.0: 200 https://clojure.org -> AmazonS3: 200 https://fsharp.org -> GitHub.com: 200 https://symfony.com -> cloudflare: 200 https://www.perl.org -> Combust/Plack (Perl): 200 https://www.php.net -> myracloud: 200 https://www.python.org -> nginx: 200 https://code.visualstudio.com -> Microsoft-IIS/10.0: 200 https://github.com -> GitHub.com: 200

    Using Axios with JSON Server

    JSON Server is a wonderful tool, which allows us to create fake REST APIs easily.

    $ npm i -g json-server

    We install .

    users.json

    { "users": [ { "id": 1, "first_name": "Robert", "last_name": "Schwartz", "email": "[email protected]" }, { "id": 2, "first_name": "Lucy", "last_name": "Ballmer", "email": "[email protected]" }, { "id": 3, "first_name": "Anna", "last_name": "Smith", "email": "[email protected]" }, { "id": 4, "first_name": "Robert", "last_name": "Brown", "email": "[email protected]" }, { "id": 5, "first_name": "Roger", "last_name": "Bacon", "email": "[email protected]" } ] }

    This is our test data.

    Starting JSON server

    The JSON server is started with the json-server, which we have installed globally.

    $ json-server --watch users.json

    The option is used to specify the data for the server.

    $ curl localhost:3000/users/2/ { "id": 2, "first_name": "Lucy", "last_name": "Ballmer", "email": "[email protected]" }

    With the curl command, we get the user with Id 2.

    Posting a user

    We post a new user.

    post_user.js

    const axios = require('axios'); async function makePostRequest() { params = { id: 6, first_name: 'Fred', last_name: 'Blair', email: '[email protected]' } let res = await axios.post('http://localhost:3000/users/', params); console.log(res.data); } makePostRequest();

    The example posts a new user.

    let res = await axios.post('http://localhost:3000/users/', params);

    The post parameters are passed as the second parameter to the method.

    Getting users

    We get users from the test server.

    get_users.js

    const axios = require('axios'); async function makeGetRequest() { let res = await axios.get('http://localhost:3000/users/'); let data = res.data; console.log(data); } makeGetRequest();

    This program retrieves all users from our test server.

    $ node get_users.js [ { id: 1, first_name: 'Robert', last_name: 'Schwartz', email: '[email protected]' }, { id: 2, first_name: 'Lucy', last_name: 'Ballmer', email: '[email protected]' }, { id: 3, first_name: 'Anna', last_name: 'Smith', email: '[email protected]' }, { id: 4, first_name: 'Robert', last_name: 'Brown', email: '[email protected]' }, { id: 5, first_name: 'Roger', last_name: 'Bacon', email: '[email protected]' }, { id: 6, first_name: 'Fred', last_name: 'Blair', email: '[email protected]' } ]

    Deleting a user

    A resource is deleted with .

    delete_user.js

    const axios = require('axios'); async function makePostRequest() { let res = await axios.delete('http://localhost:3000/users/2/'); console.log(res.status); } makePostRequest();

    The example deletes the user with Id 2.

    In this tutorial, we have worked with JavaScript Axios module.

    List all JavaScript tutorials.

    Sours: https://zetcode.com/javascript/axios/

    Get axios

    .

    How to make HTTP requests like a pro with Axios

    .

    Now discussing:

    .



    508 509 510 511 512