In the process of developing a fetchBill function, I have assigned the URL https://randomapi.com/api/006b08a801d82d0c9824dcfdfdfa3b3 to a variable named api. This function utilizes the browser's fetch function to send an HTTP request to the specified API. Within a .then method attached to the fetch call, an arrow function is used to handle the response, converting it into JSON format before returning it. Subsequently, another .then method is utilized to pass this JSON data to the displayCartTotal function. To ensure error handling, any potential errors are caught and displayed through a warning message in the console.
As outlined by the challenge requirements, the displayCartTotal function has been defined and verified for accuracy. Similarly, the fetchBill function has also been established, functioning as intended with its returned promise having a status of "resolved" and containing an Array as the promiseValue. Despite no reported errors, this implementation appears not to address the underlying problem presented in the challenge yet.
const displayCartTotal = ({results}) => results;
const fetchBill = () => {
const api =
"https://randomapi.com/api/006b08a801d82d0c9824dcfdfdfa3b3";
const results = fetch(api)
.then(res => res.json())
.then(data => displayCartTotal(data))
.catch(err => console.log(`Warning!!! Error fetching data!!!
Error ${err}`));
return results;
};
Upon invoking the displayCartTotal function within the fetchBill function, the expected outcome is for it to return the 'results' property from the JSON object obtained via the fetch request. It is crucial to emphasize that the goal is to retrieve and return the promiseValue rather than the entire promise stemming from the HTTP request.