Как да използваме JavaScript за да взаимодействаме с API

Използване на Fetch API

Fetch API е новата технология за заявки в JavaScript, която е въведена с ES6. Тя позволява лесно изпращане на заявки към API-та на други уеб приложения и получаване на отговорите от тях.

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(data => console.log(data))

В горния пример се изпраща GET заявка към API-то на https://jsonplaceholder.typicode.com/todos/1. След получаване на отговора се превръща в JSON формат с .json() метода, а след това се извежда в конзолата.

Използване на Axios

Axios е библиотека, която предоставя лесен и елегантен начин за изпращане на HTTP заявки към API-та на други уеб приложения. Тя е много популярна и лесна за използване.

За да използваме Axios, трябва първо да инсталираме библиотеката

npm install axios

Сега, след като имаме Axios инсталирана, можем да използваме следния код за да взаимодействаме с API-то на сайта JSONPlaceholder:

import axios from 'axios';

const getUsers = async () => {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/users');
    const users = response.data;
    console.log(users);
  } catch (error) {
    console.error(error);
  }
};

getUsers();

Този код ще изпрати GET заявка към API-то на JSONPlaceholder и ще върне списък от потребители, които ще бъдат отпечатани в конзолата.

Можем да използваме Axios и за изпращане на POST, PUT, DELETE и други HTTP заявки. За да изпратим POST заявка, можем да използваме следния код:

import axios from 'axios';

const addUser = async () => {
  try {
    const response = await axios.post('https://jsonplaceholder.typicode.com/users', {
      name: 'John Doe',
      email: '[email protected]',
      phone: '123456789',
    });
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
};

addUser();

Този код ще изпрати POST заявка към API-то на JSONPlaceholder, която ще добави нов потребител с име John Doe, имейл [email protected] и телефонен номер 123456789. Отговорът от сървъра ще бъде отпечатан в конзолата.

Използване на async/await

async/await е новата технология в JavaScript, която позволява лесно използване на асинхронни функции. Това прави изпращането на HTTP заявки към API-та на други уеб приложения много по-лесно.

async function fetchData() {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  const data = await response.json();
  console.log(data);
}

fetchData();

В горния пример се дефинира асинхронна функция fetchData(), която изпраща GET заявка към API-то на `https://jsonplaceholder.typicode.com/todos

Какво е JSONPlaceholder.typicode.com?

JSONPlaceholder.typicode.com е безплатен онлайн RESTful API, който се използва за упражнения и тестване на заявки към API-та. API-то предоставя различни ендпойнти, които могат да се използват за изпращане на заявки, включително GET, POST, PUT, PATCH и DELETE. Всеки ендпойнт съдържа данни във формат JSON, което го прави идеален за упражнения с JavaScript и други езици за програмиране. JSONPlaceholder е много полезен инструмент за ученици и начинаещи програмисти, които искат да научат как да взаимодействат с външни API-та, без да се налага да създават собствени API-та за тестови цели.