Как новый разработчик, поиск работы означает чтение списка требований, и я заметил, что появляются общие наборы навыков. Использование сторонних 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();

И это должно быть так. Ему не хватает стиля, но он работает!

Вывод

Спасибо за чтение. Я надеюсь, что это помогло. Если да, то обязательно дайте мне знать в комментариях.