Аксиос и ответный набор данных разделены на несколько массивов - PullRequest
Новая
       12

Аксиос и ответный набор данных разделены на несколько массивов

1 голос
/ 16 октября 2019

Я пытаюсь получить данные из API с помощью команды axios, такой как 

function fetchData(apiURL){
    let data = [];
    let options = {
        method: "GET",
        url: apiURL,
        headers: {
            "Access-Control-Allow-Origin": "*"
        },
        credentials: "include"
    };

    axios(options)
        .then(response => {
            data = response.data;
            console.log(data);
        })
        .catch(function (error) {
            console.log("System error : " + error);
        });

    return data;
}

, но при этом будут получены наборы массивов, в которых будут храниться массивы JSON из response.data в количестве 100 на набор массивов. .

У меня не было проблем с использованием fetch() для получения всех данных. Как я могу получить аналогичный ответ одного большого массива объектов JSON вместо разделения?

PS. Я запустил эту функцию в 

 componentDidMount() {
        const apiURL = process.env.REACT_APP_API;
        let tableData = fetchData(apiURL);
        console.log("DATA " + JSON.stringify(tableData));
        this.setState({tblData : tableData});
    }

Ответы [ 2 ]

1 голос
/ 17 октября 2019

Вы можете обновить функцию componentDidMount: 

componentDidMount() { 
  const apiURL = process.env.REACT_APP_API; 
  fetchData(apiURL).then(data => { 
    console.log(data ${JSON.stringify(tableData)}) 
    this.setState({tblData : data});
  }) 
}
1 голос
/ 16 октября 2019

Запросы Axios являются асинхронными и возвращают обещания, поэтому вам нужно немного изменить свой пример, чтобы ваша функция возвращала обещание. 

/**
 * @return {Promise<T>}
 */
function fetchData(apiURL){
    const options = {
        method: "GET",
        url: apiURL,
        headers: {
            "Access-Control-Allow-Origin": "*"
        },
        credentials: "include"
    };

    return axios(options)
        .then(response => {
            return response.data;
        })
 }

Теперь, когда вы используете этот API, делайте это асинхронно. 

function somethingThatUpdatesThatUI() {
    fetchData("/api/foo/bar")
       .then((data) => {
           //perform updates to UI or state here
       })
       .catch((err) => {
           //alert the users that an error has happened here
       })
}
...