I need one async function to wait for another one-CodePudding

I have 2 async functions - one gets ids of towns, and the second one takes these ids and gets {towns} objects. I am importing an API which is also async.

The first function works fine, but the second one returns

LOG catchTowns [Error: Not found]

code:

import { getTown, getTownIds } from "./api/towns" 

//getting IDs from API

const getTownIdsAsync = async () => {
  const asyncids = await getTownIds()
  return(asyncids.ids)
}

let idcka = new Promise((resolve, reject) => {
  resolve(getTownIdsAsync())
})
.then(result => {
  idcka = result
  for(i=0; i < idcka.length; i  ){
  }
})
.catch(err => {
  console.log('catchIdcka', err)
})

//getting Towns from API
const getTownsByIdsAsync = async (ajdycka) => {
  const asyncTowns = await getTown(ajdycka)
  return(asyncTowns)
}

let towns = new Promise((resolve, reject) => {
  resolve(getTownsByIdsAsync())
})
.then(result => {
  towns = result
  console.log(towns)
})
.catch(err => {
  console.log('catchTowns', err)
})

CodePudding user response：

I don't know how you are handling state nor if you are using class or functional components so I'll just give an example how I'd do it using a functional component and hooks.

The idcka promise should return something and store its state at some point, maybe just there or using redux. I'll just use the state hook here.

const [idckaValue, setIdckaValue] = useState([])

// call idcka promise and store result by using the above setter setIdckaValue()...

Then, use an effect hook to call the second promise when idckaValue has changed.

useEffect(() => {
    // call towns promise...
}, [idckaValue])

This way, we ensure that the towns promise only runs when idckaValue changes.

And finally here's some documentation about hooks.

So wrapping up now using an effect hook to the first function too.

import React, { useState, useEffect } from 'react';

function Example() {
    // The state hook to store idcka value, I'm assuming it's an array here.
    const [idckaValue, setIdckaValue] = useState([]);

    // Your getTownIdsAsync function.
    const getTownIdsAsync = async () => {
        const asyncids = await getTownIds()
        return(asyncids.ids)
    }

    // Your getTownsByIdsAsync function.
    const getTownsByIdsAsync = async (ajdycka) => {
        const asyncTowns = await getTown(ajdycka)
        return(asyncTowns)
    }

    // This hook will only run once because its second argument is an empty array.
    useEffect(() => {
        // Getting IDs from API.

        new Promise((resolve, reject) => {
            resolve(getTownIdsAsync())
        })
        .then(result => {
            // let's assume you do something with the data and that the result of it is an array.
            setIdckaValue(result)
        })
        .catch(err => {
            console.log('catchIdcka', err)
        })
    }, []);

    // This hook will only run every time idckaValue changes, note its second argument value.
    useEffect(() => {
        // Getting Towns from API

        new Promise((resolve, reject) => {
            resolve(getTownsByIdsAsync())
        })
        .then(result => {
            // Then you do what you want with result, maybe store it in state and then use it in the render?
            console.log(towns)
        })
        .catch(err => {
            console.log('catchTowns', err)
        })
    }, [idckaValue]);

    return (
        // Your render.
    );
}