How to Make HTTP Requests with Axios

TL;DR

Axios makes HTTP requests to a back end or third-party API and returns promises that can be handled with .then() and .catch(). It supports GET, POST, PUT, PATCH, and DELETE operations, URL parameters, custom headers, simultaneous requests, transformed responses, cancellation, global settings, interceptors, and access to response data, status, headers, request details, and configuration.

Transcript

hey what's going on guys welcome to my Axios crash course so Axios if you've never heard of it which I'm sure most of you have but if you haven't it's an HTTP library or an HTTP client to make requests to either your own back-end or third party API to fetch data and it's similar to the fetch API which is built into the browser but I prefer it becau... Read More

Key Insights

• Axios is an HTTP library for requesting data from a developer's own back end or a third-party API. It can be used in React, Vue, vanilla JavaScript, and Node.js, and the presenter prefers its power and syntax to the browser's Fetch API.
• Axios requests return promises, so successful results can be processed with .then() and failures with .catch(). The course uses this promise syntax throughout, while noting that async and await can also be used to handle the same requests.
• A successful Axios response contains data, status, headers, request details, and configuration information. The returned application data is available through res.data, while the config object records information supplied for the request, including its method, URL, headers, and security-related settings.
• GET requests can be created with a configuration object or the axios.get shorthand. Although Axios defaults to GET when no method helper is attached, explicitly writing axios.get makes the intended request method clearer and more descriptive.
• URL parameters can be supplied through the params configuration property or written directly into the URL. With the JSONPlaceholder API, adding the _limit parameter restricts how many to-do records are returned, as demonstrated by limiting the result to five items.
• POST requests send resource data to an API as an object. The example submits a title of "New Todo" and a completed value of false, then receives those fields with a server-generated ID of 201 because the fake API contains 200 existing to-dos.
• PUT and PATCH are both used to update an identified resource, and the resource ID must be included according to the API's routing requirements. PUT is described as replacing the entire resource, while PATCH is intended to update the resource incrementally.
• The Axios crash course extends beyond basic CRUD operations to simultaneous requests with axios.all, custom headers, transformed responses, error handling, cancel tokens, global settings, and interceptors. A browser interface connects separate buttons to functions so each capability can be invoked and its response displayed.

Questions & Answers

Q: What is Axios used for in JavaScript applications?

Axios is an HTTP library or client used to make requests to a developer's own back end or to a third-party API. It can fetch and send data from React, Vue, vanilla JavaScript, and Node.js applications. The presenter compares it with the Fetch API built into the browser but prefers Axios because of its syntax and capabilities.

Q: How do you make a GET request with Axios?

A GET request can be made by passing a configuration object to Axios with the method set to get and a URL identifying the API endpoint. The shorter approach is axios.get followed by the URL. Axios also defaults to GET when called without a method helper, but explicitly using .get makes the request's purpose clearer and more descriptive.

Q: What information is included in an Axios response?

An Axios response includes the returned data, HTTP status, response headers, request information, and the configuration used for the request. Application data is accessed through res.data. In a browser, the request entry represents the XMLHttpRequest that generated the response, while in Node.js it represents the client request instance. A successful example returns status 200.

Q: How can Axios limit the number of records returned?

Axios can attach URL parameters through a params object in the request configuration or place them directly in the URL. In the demonstrated JSONPlaceholder request, the _limit parameter is set to five, causing the API to return five to-do records. Writing the parameter in the URL produces a shorter request while delivering the same limited response.

Q: How do you send data with an Axios POST request?

Data can be sent by configuring Axios with the post method, the target URL, and a data object containing the resource fields. The shorter axios.post form accepts the URL first and the data object second. The example sends a title of "New Todo" and completed set to false, then displays the response with the generated resource ID.

Q: What is the difference between PUT and PATCH in Axios?

PUT and PATCH both update an existing resource, but they represent different update styles. PUT is generally intended to replace the entire resource, while PATCH updates it incrementally. For either operation, the request must identify which resource is being changed. In the demonstrated fake REST API, that means including the to-do item's ID in the relevant request URL.

Q: How are errors handled in Axios promise requests?

Axios requests return promises, allowing successful responses to be processed with .then() and request failures to be handled with .catch(). The example passes the error object into console.error when something goes wrong. The course uses this promise-based approach for its demonstrations, although the presenter also notes that Axios requests can be written with async and await.

Q: What advanced Axios features does the crash course cover?

The course covers simultaneous requests with axios.all, custom request headers, response transformation, error handling, cancel tokens, global Axios settings, and interceptors in addition to GET, POST, PUT, PATCH, and DELETE requests. Its browser interface assigns these operations to buttons and uses a shared output function to show response status, headers, data, configuration, and related details.

Summary & Key Takeaways

• Axios is an HTTP client for communicating with a back end or third-party API from React, Vue, vanilla JavaScript, or Node.js. The demonstrated browser setup loads Axios through a CDN, connects button event listeners to request functions, and displays each response through a reusable showOutput function instead of relying only on console logs.

• A GET request can be written with a configuration object or the shorter axios.get method. Query parameters can be supplied through a params object or included directly in the URL. Each successful response exposes returned data through res.data while also providing the status, response headers, request object, and original request configuration.

• POST sends a data object and receives the created resource in the response. PUT and PATCH both update an identified resource, but PUT is presented as replacing the entire resource while PATCH changes it incrementally. The course also covers DELETE, simultaneous requests, custom headers, response transformation, error handling, cancellation tokens, global configuration, and interceptors.