Async ждут своего показа undefined - PullRequest
1 голос
/ 17 марта 2019
export default class Search {
constructor(query){
    this.query = query;
}

async getResults() {
    const API_KEY = "1d4e862be156056d16d3390378173c21";

    await fetch(`https://www.food2fork.com/api/search?key=${API_KEY}&q=${this.query}`)
    .then(res => res.json())
    .then(data => {
        const result = data.recipes;
        console.log(result);
    })
    .catch(error => alert('Receive Data Failed'))

};

}

импорт сюда ..

const state = {};

const controlSearch =  async () =>{

    const query = 'pizza'

    if(query){

        state.search = new Search(query);

        await state.search.getResults();

        console.log(state.search.result);

    }
}

он сохраняет данные из метода getResults в переменную. мне интересно, что он возвращает неопределенное, когда я вызвал его из state.search.result

1 Ответ

1 голос
/ 17 марта 2019

Вы никогда ничего не назначаете на state.search.result

Заменить:

const result = data.recipes;

с:

this.result = data.recipes;

Это сработает. Однако лучше спроектировать возвращаемые значения в качестве значений разрешения обещания:

getResults() { // drop the async; just return the promise
    const API_KEY = "1d4e862be156056d16d3390378173c21";

    return fetch(`https://www.food2fork.com/api/search?key=${API_KEY}&q=${this.query}`)
//  ^^^^^^
    .then(res => res.json())
    .then(data => this.result = data.recipes);
//                ^^^^^^^^^^^ (return it)
    .catch(error => alert('Receive Data Failed'))
};

А в вашем основном коде:

    state.search = new Search(query);
    console.log(await state.search.getResults());
...