Build Out API Requests in Javascript

In the last tutorial we added a few API Endpoints in Laravel https://serversideup.net/add-api-end-points-laravel/. Now it’s time to build out API requests in javascript to access these routes. Since we have everything ready to rock and roll with our VueJS configuration and our routes, it should be pretty smooth to add these requests and we can store the data. We get to start using Vuex modules as well!

Step 1: Configure the config.js file

The config.js file I find extremely important for development in multiple environments. I put all of my JS environment specific information in this file. Right now we will only have one variable that varies per environment and that is the api_url. On my development machine, I have a development domain called roast.dev and in production in the source code that is roastandbrew.coffee. When I build my app I want node to call each API route correctly based on my environment. So in my /resources/assets/config.js I make a simple switch statement that builds out the api_url depending on which environment I’m building my app for, then I export the config.

My config.js file looks like:

/*
    Defines the API route we are using.
*/
var api_url = '';

switch( process.env.NODE_ENV ){
  case 'development':
    api_url = 'https://roast.dev/api/v1';
  break;
  case 'production':
    api_url = 'https://roastandbrew.coffee/api/v1';
  break;
}

export const ROAST_CONFIG = {
  API_URL: api_url,
}

I can then export out any of the variables I feel fit as an object and use them in the rest of the front end of my app, like the next section where we define the API routes.

Step 2: Add cafe.js file

I like to mimic our API structure with our resources in Javascript. This allows us to group our API routes by resource. First what we will need to do is make the cafe.js file in the /resources/assets/js/api directory.

Next we need to import the ROAST_CONFIG from the last step so we can access the API_URL to make our requests. To do that, add the following code to the top of your cafe.js file:

/*
    Imports the Roast API URL from the config.
*/
import { ROAST_CONFIG } from '../config.js’;

Now we have our base API URL to make our requests to. Next we should export a default module so we can use our API requests elsewhere in our application. Our cafe.js file should look like:

/*
    Imports the Roast API URL from the config.
*/
import { ROAST_CONFIG } from '../config.js';

export default {

}

Step 3: Add Request For Getting Cafes

We now need to add a method for getting all of the cafes. This method will access the /api/v1/cafes route on the Laravel side of our application. For all of our front end requests, we will be using the axios library that we installed when we configured our application: GitHub – axios/axios: Promise based HTTP client for the browser and node.js. We have this set up in this tutorial: https://serversideup.net/configuring-js-sass-single-page-app/ and will automatically add the proper header to access the application’s API routes.

To add the request to access the cafes, add the following code inside your module:

export default {
    /*
        GET     /api/v1/cafes
    */
    getCafes: function(){
        return axios.get( ROAST_CONFIG.API_URL + '/cafes' );
    },
}

What this does is returns an axios GET request to the proper API route. In Vuex we will call this API request as an action and save the data to a module that we will build.

Step 4: Add Request For Getting Single Cafeh

Similar to the last request, we will return an axios GET request to the /api/v1/cafes/{cafeID} route that we will call through Vuex. The difference is in this request we have a parameter for the cafeID which will be used to reference the cafe we are loading. To add this request add the following line of code below the last request:

/*
  GET   /api/v1/cafes/{cafeID}
*/
getCafe: function( cafeID ){
  return axios.get( ROAST_CONFIG.API_URL + '/cafes/' + cafeID );
},

This will return the specific cafe we are loading up.

Step 5: Add Request For Adding A Cafe

The mindset is the same we are building an axios request that we are returning that we can call anywhere in the app. This time it’s a POST request though and requires a few more parameters. However once again we are going to be calling this through a Vuex action which we will make in the next tutorial.

To add the POST request, add the following below the request for a single cafe:

/*
  POST  /api/v1/cafes
*/
postAddNewCafe: function( name, address, city, state, zip ){
  return axios.post( ROAST_CONFIG.API_URL + '/cafes',
    {
      name: name,
      address: address,
      city: city,
      state: state,
      zip: zip
    }
  );
}

This method’s parameters match what will get passed to our /api/v1/cafes route to add a new cafe. When we send our Vuex action’s payload we will extract the data and call this method adding an action.

Wrapping Up

So we have all of our actions added in javascript to the /resources/assets/js/api/cafe.js file and it should look like:

/*
    Imports the Roast API URL from the config.
*/
import { ROAST_CONFIG } from '../config.js';

export default {
    /*
        GET     /api/v1/cafes
    */
    getCafes: function(){
        return axios.get( ROAST_CONFIG.API_URL + '/cafes' );
    },

    /*
        GET     /api/v1/cafes/{cafeID}
    */
    getCafe: function( cafeID ){
        return axios.get( ROAST_CONFIG.API_URL + '/cafes/' + cafeID );
    },

    /*
        POST    /api/v1/cafes
    */
    postAddNewCafe: function( name, address, city, state, zip ){
        return axios.post( ROAST_CONFIG.API_URL + '/cafes',
            {
                name: name,
                address: address,
        city: city,
        state: state,
        zip: zip
            }
        );
    }
}

We are returning axios requests so we can listen and act upon the promises within the Vuex action. Sounds really complex, but in the next tutorial you will begin to see how this all comes together very elegantly. This will keep track of all of the data we need in the front end of our app and make loading all of this data on demand a breeze. Since we are returning the axios requests and calling them in a Vuex action, we can handle errors and handle successes.

I know this is a lot of set up, but trust me, once you have it configured correctly everything will start to fall into place. Think of it this way. You can build a house with a foundation, but the second you add stuff to it you will quickly see it needs to be redone. Or you can build a solid cement foundation and adding features to your house is easily supported. Very similar in coding. We have all of this configuration, but once we get the base of it done, we can really fly together and make a beautiful SPA.

You will really see the benefits of doing it this way if you ever wanted a hybrid mobile application. The goal of this tutorial series is to get there with cordova. You literally can copy the code you have, create a new entry point file and within about 1-2 hours have a fully functioning mobile application.