我如何处理内部有过滤器的拒绝承诺

Question

所以我试图构建一个自动完成搜索栏，以按名称或id进行筛选，数据是从带有几个pokemon的JSON(data.JSON(中提取的。

以下是JSON:的一部分

{ 
"1" :{"id": "1", "name": "bulbasaur"}, 
"2" :{"id": "2", "name": "ivysaur"}, 
"3" :{"id": "3", "name": "venusaur"}, 
"4" :{"id": "4", "name": "charmander"}, 
"5" :{"id": "5", "name": "charmeleon"}
} 

这是JS代码：

const search = document.querySelector('#search-bar');
const searchPokemon = async searchText => {
const res = await fetch('./data.json')
const pokemons = await res.json();  

// Get matches
let matches = pokemons.filter(pokemon => {
const regexp = new RegExp(`^${searchText}`, 'gi');
return pokemon.name.match(regexp) || pokemon.id.match(regexp);
});
console.log(matches);
}
search.addEventListener('input', () => searchPokemon(search.value));

我想在控制台上获取匹配项，但我收到了一个未处理的Promise Rejection错误。我试过了。。。接球，但我还是有失误。有谁能为我指明正确的方向吗？谢谢

Answer 1

不要将console.log效果放在search函数中，而是将return值放在中

async function searchPokemon(searchText) {
const res = await fetch('./data.json')
const pokemons = await res.json()
const regexp = new RegExp(`^${searchText}`, 'gi')  
if (pokemons == null)
return []
else
return pokemons.filter(pokemon =>
pokemon.name.match(regexp) || pokemon.id.match(regexp)
)
}

将效果放在事件侦听器中。console.log或searchResultElement.appendChild(...)-

const search = document.querySelector('#search-bar');
search.addEventListener('input', async event => {
try {
const pokemons = await searchPokemon(search.value)
console.log("got pokemons", pokemons)
}
catch (err) {
console.error("An error occurred", err)
}
})