Learning Vue

Chapter 6. Incorporating External Data

The previous chapters prepared you for the essentials of working with components, including passing data between components and handling data changes and events within components. You are now ready to use Vue components to incorporate and represent your application’s data on the screen to your users.

In most cases, an application will not have data available within the application itself. Instead, we usually request the data from an external server or database, then populate the proper UI with the received data for our application. This chapter covers this aspect of developing a robust Vue application: how to communicate and handle external data from an external resource using Axios as the HTTP request tool.

What Is Axios?

For making HTTP requests to external resources, various options are available for Vue developers, including the built-in fetch method, the classic XMLHttpRequest, and third-party libraries such as Axios. While the built-in fetch is a good option for making HTTP requests for fetching data only, Axios, in the long term, provides extra functionalities that come in handy when working with more complex external resources’ API handling.

Axios is a JavaScript open source lightweight library for making HTTP requests. Like fetch, it is a promise-based HTTP client and isomorphic, supporting both node (server-side) and browser side.

Some significant advantages of using Axios are the ability to intercept and cancel HTTP requests and ...