How to iterate in axios return the new percentage + array in every loop

Question

The problem

I'm still getting used to functional programming (FP). Specially FP in React-native. The goals are:

• fetch different characters from the API through iteration
• each step returns the percentage completed plus its objects.
• the route and its headers may change. (e.g: instead of characters fetch planets instead)

The attempts

Creating separated functions for each step was ok, the problem is how to 'connect' them and get the desired result (as described in 'The Problem' section). Every idea i attempted caused some type of coupling or repetition (of code)

Requests

function requestCharacters(start, token) {
  return axios.get(`https://swapi.dev/api/people/${start}/`,{
           headers: {
             Authorization: 'Bearer ' + token,
             ContentType: 'application/json',
           }
         })
}

---

function requestPlanets(start) {
  return axios.get(`https://swapi.dev/api/planets/${start}/`);
}

Percentage

const percentage = Math.round((start/finish)*100)

Iteration of requests (using recursion)

  async function loop(start, finish, callback) {
      if (start >= finish) {
        console.log("got inside if from loop");
        return;
      }
    
      await requestCharacters(1)
        .then((response) => {
          const percentage = Math.round(((start)/finish)*100)
          loop(start + 1, finish, callback({ percentage, pageContent: response.data });
        })
        .catch((error) => console.error(error));
    }
    
loop(1, 3, console.log(percentage, pageContent));

And then some function returning percentage plus object fechted

loop(1, 3, PrintObjectsFromFetch)

How to solve this?

Thanks if you read to the end!

Answer 1

This is the non-refactored version. Hope it helps though

import axios from "axios";

function mountAxiosRequest(url) {
  return axios.get(url);
}
const arrayOfPages = (total_pages, baseURL) =>
  Array.from({ length: total_pages }, (v, k) =>
    baseURL.replace("iterator", k + 1)
  );

const total_pages = 16;
const baseURL = "https://swapi.dev/api/people/iterator/";
const arrayOfRequests = (total_pages, baseURL, request) =>
  arrayOfPages(total_pages, baseURL).map((url) => request(url));

function PrintPercentageAndData(data) {
  console.log("from map percentage: ", data);
}

const mapResponses = (response, total) =>
  response.map((row, index) => {
    const indexFromOne = index + 1;
    const percentage = Math.round((indexFromOne / total) * 100);
    return { percentage, data: row };
  });

const promiseArray = (arrayOfRequests) => Promise.all(arrayOfRequests);

function GetPercentageAndData(callback, baseURL, request) {
  const total_pages = 10;
  const requestsArray = arrayOfRequests(total_pages, baseURL, request);
  const promissesArray = promiseArray(requestsArray);
  promissesArray
    .then((results) => {
      const result = PrintPercentageAndData(
        mapResponses(results, results.length)
      );
      if (result !== undefined) callback(result);
    })
    .catch((error) => console.error("error from promissesArray : ", error));
}
GetPercentageAndData(
  PrintPercentageAndData,
  "https://swapi.dev/api/species/iterator/",
  mountAxiosRequest
);