Vue.js - Progress Bar Axios Interceptors

hi i'm greg pollock and in this lesson we're going to be learning about how to implement a progress bar looking at one solution using axios interceptors we'll show how to install nprogress which is the progress bar we're using and we'll start using axios interceptors with that progress bar this lesson assumes that you're familiar with using axios to do api calls and somewhat familiar with ux if not you might want to go back and take the lessons we have on those topics so i'm going to go ahead and navigate to our example application and it's loading and i'm looking for an event list and it's not showing up and i'm starting oh there it is it finally showed up we've all had this experience it's not good we wonder if the page is broken so this page needs a progress bar to let us know that it's still loading the progress bar we're going to be using in this app is called end progress it's a javascript library we can call from anywhere in our application to start a progress bar up there across the top and by default it also has a spinner we can set a percentage increment the progress bar or call done to complete it let's go ahead and install and progress in our example application we'll jump into the terminal and run npm install and progress that'll install the library and we'll check our package.json to see if it added end progress as a dependency and there it is next to setup and progress in our app we'll go into our main.js file in here we need to import the css for in progress like so i'm going to show you three different ways to implement the progress bar from this point in this video we'll be using axios interceptors to implement the progress bar in the next lesson we'll use in-component route guards and in the third lesson we'll use global and per-route guards i want to mention that our example app will ultimately use the third example so if you download the code and implement alongside me which i recommend you do but just know the code's going to get removed in the next lesson when i show you the next solution let's jump in and learn about axios interceptors inside of our application in our services directory we have a service called event service where our apis get called using axios when we go to the event list page it requests a list of events from our api server and that returns a json response which we then load onto the page we need a way to start our progress bar when the api request happens and finish it when the response arrives using axios interceptors allows us to write some code that intercepts the request event which is where we want to start our progress bar then the request will continue to the api server at some point it will return a response we're going to write another axios interceptor to intercept that response we'll call done on the progress bar and then return the json response to our application let's try implementing this first we'll take a look inside the event service.js and let's get familiar with what's going on here up at the top we have our single axios instance for our application and down below we have each of our api calls get events get event and post event which use this axios instance at the top of this file we're going to import our end progress library then after we create our axios instance we're going to take it call interceptors dot request dot used send in config as a parameter and then start our progress bar inside this interceptor returning config which is the parameter we passed in we'll then create another interceptor for the response that passes through the response object this is where we're going to call done on our progress bar and return that response object to review when the request is about to go out it's going to call this interceptor and start the progress bar and when the response returns it'll finish the progress bar if you're familiar with the concept of software middleware using interceptors it's kind of like using a middleware now let's go ahead and fire up our api server we're going to be using the d option with json server that tells our api server to wait 1500 milliseconds or 1.5 seconds before responding to simulate a slow internet connection if you're running our code for the first time and you don't have json server installed you can install it with npm install dash g json server next we'll start up our node server running npm run serve and if you're running this app for the first time you'll want to run npm installs to install the dependencies before running the server if we jump into our browser look there's our progress bar it loaded up and if we hit next page sure enough the progress bar loads while our api call is waiting to return there are two caveats we need to discuss about the solution the first is that this is an optimal for multiple api calls if our component triggers three api calls we want to start our progress bar when the first api is called and we want to finish our progress bar when the last one is returned one way to solve this is by creating a loading view x module let's think about that for a moment our loading ux module might have an action called start loading and an action called done loading our api request interceptor we'll call the start loading action and then our response interceptor will call done loading our loading module would have a piece of state may be called api weighting count to keep track of how many api calls are waiting to return the start loading action is first going to check to see if the waiting count is zero if it is then it can start the progress bar then it'll add one to the api waiting count when the downloading action is called it's going to subtract one from the api waiting count and then if the waiting count is zero it's going to complete the progress bar the other caveat to the solution is that our template is getting loaded before our api call is returned let me show you what that looks like if i navigate to my event show component you'll see the blank template is loaded and then a second and a half later the data is loaded onto the page this isn't the optimal user experience i don't want to show the user the event template until all the information is loaded interceptors are important to know about because there's other reasons you might want to use them in your app the first is to set authorization tokens the second is on response to format or filter data before it reaches into your application and thirdly to catch 401 not authorized responses back from your server if you have a lot of security with your api calls you might want to renew your token or redirect to login let's review in this lesson we learned how to implement a progress bar we used the endprogress library and we used axios interceptors to start and stop our progress bar in the next two lessons we'll look at two more solutions to this problem our api request interceptor really vacuuming right now a buddhist monk walks up to a hot dog vendor and says make me one with everything after beefchuckle at the monk's joke the vendor hands him a hot dog with everything and says that'll be four dollars the monk hands over a 10 bill and the vendor just stares back at him awkwardly the monk asks what about my change ah replies the hot dog vendor change must come from within i thought that was pretty funny uh

Channel: Application Development

Views: 1,649

Keywords:

Id: hymYaSftxNI

Length: 8min 30sec (510 seconds)

Published: Fri Aug 06 2021