Advice Generator App made with Fetch Api

The Advice Generator App functions well in Google Chrome, but there is a delay and a repeat of the same advice in FireFox. Does anyone know why this happens?

What I learned:

This challenge gave me the opportunity to do some homework about API's and the fetch() method in JavaScript. Writing down what I have learned helps to give me a clear understanding about the subject. So here it goes!

"Application Programming Interfaces", or "API's" essentially provide a doorway in the form of code that enables access for two unrelated applications to communicate & share information with eachother.

For this challenge I made use of a browser API and a third party API. The former is the "Fetch API" and the latter is the "Advice Slip API", a web service made by Tom Kiss.

Examples of browser API's:

• Canvas API
• Fullscreen API
• Clipboard API
• Payment Request API
• Geolocation API

Examples of third party API's:

• Google Analytics
• Google Maps
• Facebook Login
• YouTube
• PayPal

API's are an empowering tool for developers and engineers, because it enables them to acquire (real-time) data via an API "CALL', or “request”.

For this challenge I've used the fetch() method. I made a GET request by passing in the URL endpoint as an argument:

fetch("https://api.adviceslip.com/advice");

The fetch() method returns a Promise Object. To explain this in layman's terms; a Promise Object represents an operation in which the value of the return currently is unknown, included with the guarantee that the value will be known at some point. A Promise has three possible states:

• Pending
• Fulfilled
• Rejected

Once the Promise has been called it initially starts in a "Pending" state. You can use the .then and .catch method to handle the Promise once it's in a "Fulfilled" or a "Failed" state.