Estoy tratando de obtener una respuesta de una API que tiene diferentes URL de páginas, ¿cómo puedo lograr esto en una sola llamada a la API?
Aquí está mi código
async function arrayFetcher (){ // Get `urlArray` from object param let urlArray = []; let url = "" for(let i = 1; i < 20; i++) { url = `https://api.google.com/page=250&page=${i}&sparkline=false` } const resp = await axios.get(url) const response = await urlArray?.Promise?.all(resp).then(res => res.json()); console.log(response) };Puedes usar Promise.all . Haga una matriz (digamos urls ) y luego -
const results = await Promise.all(urls.map(async url => { const resp = await axios.get(url); return resp.json(); })); Actualización: también debe insertar la URL en el urlArray
for(let i = 1; i < 20; i++) { url = `https://api.google.com/page=250&page=${i}&sparkline=false`; urlArray.push(url); } Luego utilícelo en Promise.all .
puedes hacer esto con Promise.all, un ejemplo podría ser:
const fetchData = async () => { const url1 = 'https://jsonplaceholder.typicode.com/todos/1' const url2 = 'https://jsonplaceholder.typicode.com/todos/2' const url3 = 'https://jsonplaceholder.typicode.com/todos/3' const result = await Promise.all([fetch(url1), fetch(url2), fetch(url3)]) const dataArr = result.map(result => result.json()) const allData = Promise.all(dataArr) return allData } fetchData().then(res => console.log(res))Esto no dará como resultado una llamada a la API, sino que la red verá una llamada por URL a la que llama axios.get(url) . Para realizar una llamada a la API y obtener los mismos datos, se requerirían parámetros adicionales en el punto final o en un nuevo punto final; este es un cambio del lado del servidor por parte del propietario de la API.
Axios no requiere response.json() ya que ya lo hace por usted. La API Fetch nativa del navegador lo requiere, fetch(url).then(res => res.json()).then(data => console.log(data)) .
async function arrayFetcher() { // generate 5 urls to fetch // API starts at 1 but index at 0, so `index+1` for valid URI const urls = [...Array(5).keys()].map((item, index) => `https://jsonplaceholder.typicode.com/todos/${index+1}`); // make API calls const results = await Promise.all(urls.map(async url => await axios.get(url))); // display each result // Axios places the value in `data` property results.forEach(result => console.log(result.data)); } arrayFetcher(); <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.27.2/axios.min.js"></script>Podría mejorar potencialmente este código para separar la generación de la matriz de la función de búsqueda y pasar la matriz como un argumento. Ejemplo:
async function arrayFetcher(urls) { /*...*/ } function generateUrlArray(baseUrl, amount) { return [...Array(amount).keys()].map((item, index) => `${baseUrl}${index+1}`); } const urls = generateUrlArray('https://example.com/', 5); // generate array arrayFetcher(urls);