Top.Mail.Ru
Ответы
Аватар пользователя
Аватар пользователя
Аватар пользователя
Аватар пользователя
Программирование
+3

Почему github profiles api кидает ошибку вместо того чтобы отловить ее нормально?

Вот код:

1234567891011121314151617181920212223242526272829303132333435363738394041424344
 const API_KEY = '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', 
	searchInp = document.querySelector('.search-inp'), 
	cartWrapper = document.querySelector('.profiles-wrap'), 
	cartItem = document.querySelector('.profiles-item') 
 
let data = '' 
 
const headers = new Headers() 
headers.append('Authorization', `token ${API_KEY}`) 
 
async function getData(search) { 
	const response = await fetch(`https://api.github.com/users/${search}`, { 
		method: 'GET', 
		headers: headers, 
	}) 
		.then(json => json.json()) 
		.then(result => (data = result)) 
		.catch(err => alert(`Произошла ошибка, ${err}`)) 
 
	return data 
} 
 
async function searchData() { 
	const searchedValue = await getData(searchInp.value) 
	const { avatar_url, name, bio } = searchedValue 
	if (!name) return 
 
	console.log(avatar_url) 
	console.log(name) 
	console.log(bio) 
 
	cartWrapper.innerHTML = ` 
    <div class="profiles-item"> 
    <a href="#!" class="profiles-item-link"></a> 
    <div><img src="https://${avatar_url}" width="-1" height="-1" alt = "false|false"/></div> 
    <h3 class="profiles-name">${name}</h3> 
    <p class="profiles-desc"> 
        ${bio ? bio : 'У пользователя нет описания'} 
        </p> 
    </div> 
    ` 
} 
 
searchInp.addEventListener('change', searchData); 
По дате
По рейтингу
Аватар пользователя
Гуру

Проблема с предоставленным кодом заключается в том, что обработка ошибок выполняется неправильно. Блок catch в функции getData неправильно обрабатывает ошибку и вместо этого просто отображает предупреждение с сообщением об ошибке. [1]

  1. Переместите логику обработки ошибок из функции getData в функцию searchData. Таким образом, вы сможете более эффективно обрабатывать ошибки и обеспечивать лучший пользовательский опыт.

  2. Используйте свойство response.ok, чтобы проверить, был ли ответ успешным. Если ответ не удался, вы можете выдать специальную ошибку с более содержательным сообщением.

  3. Обработайте ошибку в функции searchData с помощью блока try-catch.