Как новый разработчик, поиск работы означает чтение списка требований, и я заметил, что появляются общие наборы навыков. Использование сторонних API/REST кажется довольно популярным, поэтому важно знать, как вызывать API и использовать его данные.
tl;dr: перейдите к подзаголовку Пример использования, чтобы увидеть вызов API в действии.
Что такое сторонний API?
"Сторонние API – это API, предоставляемые третьими сторонами – обычно такими компаниями, как Facebook, Twitter или Google – для предоставления вам доступа к их функциям через JavaScript и использования их на вашем сайте" – MDN
Существует множество способов вызова данных из API, но мы рассмотрим только самые распространенные:
Мы собираемся использовать JSONPlaceholder в наших примерах.
Способ 1. Выбрать
ES5 var getData = fetch('https://jsonplaceholder.typicode.com/posts
') .then(function(response) { return response.json(); }); .then(function(jsonObject) { return console.log(jsonObject); }); OR ES6 const getData = fetch('https://jsonplaceholder.typicode.com/posts'
) .then(response => response.json) .then(jsonObject => console.log(jsonObject)) Then call the function to view the data in the console getData()
Способ 2. Аксиос
Помните, что axios не встроен в браузер, как fetch, поэтому нам нужно его импортировать.
ES5 const getData = axios.get('https://jsonplaceholder.typicode.com/posts'
) .then(function(response) { console.log(response.data); }); ES6 const getData = axios.get('https://jsonplaceholder.typicode.com/posts'
) .then(response => console.log(response.data)); Then call the function to view the data in the console getData()
Пример использования
Давайте посмотрим на пример того, как будут выглядеть данные. Вставьте URL-адрес в адресную строку браузера: https://jsonplaceholder.typicode.com/posts
Вы должны получить что-то вроде этого:
[ { "userId": 1, "id": 1, "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit", "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto" }, { "userId": 1, "id": 2, "title": "qui est esse", "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla" }, { "userId": 1, "id": 3, "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut", "body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut" }, .... ]
Давайте создадим файл service.js
для запроса API:
const fetchPosts = axios.get('https://jsonplaceholder.typicode.com/posts'
)
.then(response => console.log(response.data))
.catch(error => console.error(error));
fetchPosts();
Создадим файл index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Calling data from an API</title> </head> <body> <div> <h1></h1> <p></p> </div> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="script.js"></script> </body> </html>
Теперь давайте обновим наш запрос fetchPosts
, чтобы сопоставить данные, которые мы получаем из файла script.js
.
const postTitle = document.querySelector('h1'); const postBody = document.querySelector('p'); const fetchPosts = axios.get('https://jsonplaceholder.typicode.com/posts'
) .then(response => { const data = response.data; data.map(d => { postTitle.innerHTML
(response.data.title) postBody.innerHTML
(response.data.body) })} .catch(error => console.error(error)); fetchPosts();
И это должно быть так. Ему не хватает стиля, но он работает!
Вывод
Спасибо за чтение. Я надеюсь, что это помогло. Если да, то обязательно дайте мне знать в комментариях.