Question

我有以下promise函数，它使用fetch从API获取数据：

const getContacts = token =>
  new Promise((resolve, reject) => {
    fetch(url, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
      },
    })
    .then(response => response.json())
    .then((data) => {
      resolve(data);
    })
    .catch(err => reject(err));
  });

然后在另一个文件中调用此函数：

getContacts(token)
.then((data) => {
  const contacts = data.data;
  console.log(contacts);
})
.catch(err => console.error(err));

如果从API返回的数据量较大，则会对其进行分页。响应包括需要获取的链接以获取下一页。我希望我的代码首先遍历所有页面并收集所有数据，然后解决承诺。当执行到达const contacts = data.data行时，它应该包含每个页面的数据（目前它只返回第一页）。

实现这一目标的最佳方式是什么？

编辑：

我在getContacts函数中尝试了递归。通过这种方式，我可以遍历所有页面并将所有数据放在一个对象中，但我不知道将解决方法的正确方法返回到最初称为函数的代码。以下代码无法正确解析。

const getContacts = (token, allData, startFrom) =>
  new Promise((resolve, reject) => {
    if (startFrom) {
      url = `${url}?${startFrom}`; // the api returns a set of results starting at startFrom (this is an id)
    }
    fetch(url, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
      },
    })
    .then(response => response.json())
    .then((data) => {
      let nextPageExists = false;
      Object.assign(allData, data.data);

      data.links.forEach((link) => {
        if (link.rel === 'next') {
          nextPageExists = true;
          getContacts(token, allData, link.uri);
        }
      });
      if (!nextPageExists) {
        resolve({ data: allData });
      }
    })
    .catch(err => reject(err));
  });

Answer 1

首先，do not use the new Promise constructor when fetch already returns a promise。

然后，只需使用递归方法并将您的承诺链接到then：

function getContacts(token, allData, startFrom) {
  return fetch(startFrom ? url + '?' + startFrom : url, {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
    },
  }).then(response => response.json()).then(data => {
    Object.assign(allData, data.data);
    const nextPage = data.links.find(link => link.rel === 'next');
    if (!nextPage)
      return allData;
    else 
      return getContacts(token, allData, nextPage.uri);
  });
}

Answer 2

这是一个使用 async/await 语法的通用函数。

它返回自身直到 currentPage 等于 totalPages。您可以从 API 响应中检索这些密钥。

async function getData(perPage, page, options, allData = []) {

  // fetch data
  let base = 'https://api.example.com';
  let url = `${base}?perPage=${perPage}&page=${page}`;
  let response = await fetch(url, options);
  let data = await response.json();

  // push this data object (or data.data... whatever) into allData array
  allData.push(data); 

  // get 'totalPages' and 'currentPage' (or whatever your API names these)
  let totalPages = data.pagination.total_pages;
  let currentPage = data.pagination.current_page;
  if (currentPage == totalPages) {
    // you're done
    return allData;
  } else {
    // get the next page and repeat
    page++;
    return getData(perPage, page, options, allData);
  }
}

调用：

const options = {
  method: 'GET',
  headers: {
    Accept: 'application/json',
    appId: 'APP_ID',
    apiKey: 'APP_KEY',
    'Content-Type': 'application/json'
  }
};

let perPage = 100;
let page = 1;

getData(perPage, page, options).then((data) => {
  console.log(data)
}).catch((error) => {
  console.log(error)
})

在JS promise函数中迭代API响应的多个页面

2 个答案: