Использование базового API fetch() для веб-разработки.
Когда я начал интересоваться API, я долгое время понятия не имел, как их использовать. Я склонялся к использованию любого метода, используемого в учебнике, и в итоге фактически не работал с моим API, а пытался выяснить, какой метод я буду использовать для получения информации из желаемого API. В конце концов я понял, что меня не могут утомлять новые методы каждый раз, когда я хочу использовать или экспериментировать с API, и что мне нужно стандартизировать подход к API.
Вот тут-то и появляется очень простой базовый API-интерфейс выборки. Я использую этот метод всякий раз, когда хочу получить информацию из API, с которым я не знаком, и просмотреть результаты в их формате JSON. Это помогает мне решить, могу ли я использовать данные, какие результаты я хотел бы использовать и хочу ли я использовать этот API.
Не все API одинаковы, как и их документация, поэтому этот простой метод избавляет API от множества догадок. Он также отлавливает ошибки 404, что означает, что вы можете беспокоиться о других элементах своего кода, а не о том, работает ли этот сайт вообще?
Итак, без лишних слов, вот базовый API fetch().
Начиная с HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="your javascript file"></script> <title>Fetch API and rendering Data</title> </head> <body> <div id="app"> </div> </body> </html>
Затем Javascript:
function fetchData() {
fetch("url with your API key(if applicable) ")
.then((response) => {
if (!response.ok) {
throw Error("there was an error"); //this catches 404 errors
}
return response.json();
})
.then((data) => {
console.log(data.data);
})
.catch((error) => {
console.log(error);
});
}
fetchData();
Вы можете получить доступ к своим результатам в консоли и оттуда настроить этот шаблон для своих проектов.
