1

只是我想使用fetchin返回 JSON 响应data-source.js，但为什么我不能使用async/awaitinmain.js来等待返回？

我明白，async/await不会等待回报，因为它在等待一个承诺。但是，我应该怎么做才能让它等待响应呢？

数据源.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;

谢谢您的答复。

4

2 回答 2

6

您需要在 searchClub 函数中返回承诺

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

编辑以更好地解释：

你说：

我知道 async/await 不会等待返回，因为它正在等待一个承诺。但是，我应该怎么做才能让它等待响应呢？

这是正确的，它将等待承诺......从未从函数返回......所以它没有等待。

http fetch 总是在你的 searchClub 函数中被触发。如果您之前已经注销了响应 - 它会注销正确的响应。

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

但是函数 searchClub 没有返回任何东西，它只是发出一个 http 请求，并且由于该请求没有返回，所以没有人可以等待它。由于没有人可以等待 Promise，因此没有人可以使用 Promise 将返回的实际数据。

你可以用谷歌搜索“承诺链”——你返回承诺，承诺将返回数据（或另一个承诺）。在承诺完成/解决之前，您无法获取数据。

于 2020-09-10T00:07:58.897 回答
0

尝试使用

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
   }
    
    
}
于 2020-09-10T00:13:59.507 回答