如何在axios中迭代在每个循环中返回新的百分比+数组

Posted 2023-02-16

【中文标题】如何在axios中迭代在每个循环中返回新的百分比+数组

【英文标题】：How to iterate in axios return the new percentage + array in every loop

【发布时间】：2021-12-14 03:00:12

【问题描述】：

问题

我还在习惯函数式编程 (FP)。特别是 React-native 中的 FP。目标是：

通过迭代从 API 中获取不同的字符 每个步骤都会返回完成的百分比及其对象。 路由及其标头可能会更改。 （例如：代替字符获取行星）

尝试

为每个步骤创建单独的函数是可以的，问题是如何“连接”它们并获得所需的结果（如“问题”部分所述）。我尝试的每个想法都会导致某种类型的耦合或重复（代码）

请求

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/`);

百分比

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

请求的迭代（使用递归）

  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));

然后一些函数返回百分比加上获取的对象

loop(1, 3, PrintObjectsFromFetch)

如何解决？

谢谢你读到最后！

【问题讨论】：

你写的函数有什么问题？还要考虑到您不必逐个等待每个响应，您可以将所有请求放在 Promise.all 中。

@codeLearnerrr 如果要进行递归，需要修改循环函数以传递数据。

路由及其标头会如何变化？

嗨@diedu，如果添加或删除“授权：不记名令牌”，标头会发生变化。就像在 requestCharacters 和 requestPlanets 中一样。例如，路线会将其 url 从字符更改为行星

【参考方案1】：

这是未重构的版本。希望它有所帮助

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
);