Блог

Просто я хочу вернуть ответ JSON, используя fetch in data-source.js , но почему я не могу использовать async/await in main.js , чтобы дождаться возврата?

Я понимаю, что async/await не будет ждать возврата, потому что он ожидает обещания. Но что я должен сделать, чтобы заставить его ждать ответа?

data-source.js

 import clubs from './clubs.js';

class DataSource{
    static searchClub(keyword) {
        const baseUrl = `https://www.thesportsdb.com/api/v1/json/1`;
        fetch(`${baseUrl}/searchteams.php?t=${keyword}`)
        .then(response => {
            return response.json();
        })
        .then(responseJson => {
            if(responseJson.error) {
                return responseJson.error;
            } else {
                return responseJson;
            }
        })
        .catch(error => {
            return(error.message);
        });
    }
}

export default DataSource;
  

main.js

 import DataSource from '../data/data-source.js';
import '../component/club-list.js';

const main = () => {
    const searchElement = document.querySelector("search-bar");
    const clubListElement = document.querySelector("club-list");

    const onButtonSearchClicked = async () => {
        try{
            const result = await DataSource.searchClub(searchElement.value);
            renderResult(result);
        } catch (message) {
            fallbackResult(message)
        }
    };

    const renderResult = results => {
        clubListElement.clubs = results;
    };

    const fallbackResult = message => {
        clubListElement.renderError(message);
    };

    searchElement.clickEvent = onButtonSearchClicked;
};

export default main;
  

Спасибо за ваш ответ.

Вам нужно вернуть обещание в вашей функции searchClub

 return fetch(`${baseUrl}/searchteams.php?t=${keyword}`)
    .then(response => {
        return response.json();
    })
  

Отредактировано, чтобы лучше объяснить:

Вы сказали:

Я понимаю, что async / await не будет ждать возврата, потому что он ожидает обещания. Но что я должен сделать, чтобы заставить его ждать ответа?

Это правильно, он будет ждать обещания … которое так и не было возвращено из function…so он не дождался.

http-выборка всегда запускается внутри вашей функции searchClub. Если бы вы вышли из ответа раньше — он бы вывел правильный ответ.

 fetch(`${baseUrl}/searchteams.php?t=${keyword}`)
    .then(response => {
        console.log('i can see this')
        return response.json();
    })
  

Но функция searchClub ничего не возвращала, она просто выполняла http-запрос, и поскольку этот запрос не был возвращен, никто не мог его дождаться. Поскольку никто не мог дождаться обещания, никто не мог использовать фактические данные, которые вернет обещание.

Вы можете погуглить «цепочку обещаний» — вы возвращаете обещание, и обещание вернет данные (или другое обещание). Вы не можете получить данные, пока обещание не будет завершено / разрешено.

попробуйте использовать

 static async searchClub(keyword) {
   try{

    const baseUrl = `https://www.thesportsdb.com/api/v1/json/1`;
    const response  =  await fetch(`${baseUrl}/searchteams.php?t=${keyword}`)
    const responseJSON = await response.json();

    return responseJSON
   }catch(error){
    return error.message
   }
    
    
}