Using the Javascript console to test a API

When I build a front end the first step is to test the API calls in the browser. The easiest way to do this is to use the google chrome developer tools and the window.fetch API.

The API I am using is the GetHomii API for calculating how much someone can borrow by using how much they believe they can pay each week or how much rent they are currently paying.

The API URL is:

https://gethomii-gateway.azurewebsites.net/api/v5/calculators/loanamount?rent=750&isInvestor=N

And the results are:

{"rent":750,"deposit":0,"monthlyRent":2860,"interestRate":4.865,"loanTerm":30,"propertyValue":493755,"LVR":0,"totalLoanValue":493755,"monthlyPayment":2610,"weeklyPayment":602,"minPrice":0,"maxPrice":493755,"adjustedRent":660}

The first step is to open google chrome and to put the url into the browser. This is to make sure that the API is available and ready to accept requests and return results.

As you can see the API is ready and the next step is to then press F12 to open the google developer tools and then to navigate to the Console tab on the developer tools.

First thing to do is to run the window.fetch('https://gethomii-gateway.azurewebsites.net/api/v5/calculators/loanamount?rent=750&isInvestor=N') command to make sure you can retrieve the information using Javascript. This will return Promise {pending} which is a Javascript promise that you will need to listen for in order to process the output of the API request. In order to make sure that I am getting a good result back, the last step in the developers console is to listen for and process the API response as follows window.fetch('https://gethomii-gateway.azurewebsites.net/api/v5/calculators/loanamount?rent=750&isInvestor=N').then(result => console.log(result))

This will result in the Response object being written to the Javascript console. What I am interested in is the body part of this object and the status as I can use these to prepare a response for the user based on the API request.