Как делать fetch при каждом вхождении в массив?

Question

[Даниил Чистяков]

Имеется массив:

{this.state.info?.map (song => (
                        <div className={style.last_song} key={song.id} style={{ backgroundImage: "url(" + song.artist.image + ")"}}>
                            <p>{song.title}</p>
                            <a href={song.artist.url || song.artist.laut_url} target="_blank" rel="noreferrer"><p>{song.artist.name}</p></a>
                        </div>
                    ))}

Каким образом мне реализовать fetch JSON типа:
ws.audioscrobbler.com/2.0/?method=album.getInfo&artist=" + song.artist.url || song.artist.laut_url + "&album=" + song.title + "&api_key=secret_key&format=json
под каждый элемент в массиве, где в зависимости от данных элемента будут меняться значения переменных и выведется список элементов.

Answer 1

[Israfil22]

HOF функции не работают с асинхронностью.
Используйте конструкцию for of внутри async функции.

const dataCollection = [...]
const fetchData = async (urls) => {
    for(let next of urls){
        const res = await fetch(next)
    }
}

fetchData(dataCollection)

Comments

[Даниил Чистяков]

Прошу прощения, я ещё не сталкивался с этим, не объясните, что вносить в переменную dataCollection, next и urls?