Komunikacja z API, pobieranie danych z użyciem axios

Cześć,

Walczę obecnie z apką, mającą na celu wyświetlanie filmów obecnie granych w kinie z dodatkowymi informacjami. Znalazłem dość wygodne API themoviedb, ale mam jeden problem. JSON, który zawiera listę filmów obecnie granych, nie posiada wszystkich informacji, które chciałbym wyświetlić w appce. Wpadłem więc na pomysł, że ściągnę na początku tą listę, wyciągnę z niej samą tablicę ID konkretnych filmów, a następnie na bazie tej tablicy, zrobię zapytania axiosem i pobiorę już poszczególne filmy i wrzucę je do tablicy. Dzięki temu do wyświetlenia będę mógł przesłać pełne dane. Do tego momentu mam już ogarnięte, ładnie wypluwa mi tą tablicę. Mam tylko jeden problem z zapytaniem przez axiosa - nie wiem jak zmodyfikować link, by pobierał po kolei klucze z tablicy. Poniżej kod, jak to do tej pory wygląda. Chciałbym prosić o jakiś przykład/tutorial jak się powinno właściwie robić takie nieco zaplątane zapytania do API.

PS. Wiem, że to trochę zaplątane, na razie chcę się nauczyć pobierać te dane na różne sposoby, a jak już to ogarnę, to zrobię bardziej liniową strukturę: pobieranie listy filmów -> wyciąganie ID -> pobieranie poszczególnych filmów -> wrzucenie do jednej tablicy -> sortowanie po ratingu.

Pobieranie ID:

import jsonPlaceholderMovies from '../../apis/jsonPlaceholderMovies';

export const FetchID = async dispatch => {
    const response = await jsonPlaceholderMovies.get();
    const arrayMovie = response.data.results;

    function sortingMovies(movies) {

        const sorted = movies.sort((a, b) => {
            return b.vote_average - a.vote_average
        })

        return sorted;
    }

    function gettingID(movies) {
        let arrayID = [];
        for (let i = 0; i < 20; i++) {
            arrayID.push(movies[i].id);
        }

        //console.log(arrayID);
        return arrayID;
    }


    //wywołania///////////////////////////////////////////////////
    const sortedArr = sortingMovies(arrayMovie);
    const arrayIDD = gettingID(sortedArr);
    console.log(arrayIDD);
    return sortedArr
};


export default FetchID; 

jsonPlaceholderMovies

import axios from 'axios';

export default axios.create({
    baseURL: `https://api.themoviedb.org/3/movie/${movie_id}?api_key=88022025602474dbf64db818abe24ffa&language=en-US`
});

Próbowałem odpalić twój kod, ale to chyba nie działa - w jsonPlaceholderMovies nie ma parametru movie_id. Nie wgłębiałem się w dokumentację API, ale z tego co rozumiem, API nie wystawia pełnych obiektów pod endpointem listującym filmy, pełne dane są jedynie pod endpointem listującym pojedynczy film.

1. Nie musisz używać axios.create() - po prostu axios.get(url) (czy jakoś tak - zobacz w dokumentacji, używałem dość dawno) powinno wystarczyć. Możesz zrobić z tego osobną funkcję, do której przekażesz movie_id.
2. Zapewne najprościej byłoby wylistować wszystkie filmy, a potem albo dla każdego movie_id wywołać kolejne zapytania, albo użyć Promise.all() - ale sprawdź najpierw, czy API nie nakłada jakiś limitów wywołań, bo po headerach widzę, że tak. Może jest jakiś inny sposób, żeby odpytać o dane więcej niż jednego filmu :)

Kod nie będzie działał, bo to tylko wycinek :)

Na początek bardziej mi chodzi o to, żeby potraktować url jako takiego stringa, budowanego z użyciem ${}, wtedy będę w stanie przesłać tam jakiś element tablicy

Opakuj tego axiosa w funkcję, która przyjmuje parametr movie_id, następnie w pętli lub z użyciem map wywołaj zapytanie dla każdego elementu tablicy.