Работа с API в JavaScript

Опубликовано: 5 Января, 2022

API - это просто средство для выборки или отправки данных между интерфейсами. Допустим, вы хотите создать приложение, которое предоставляет пользователю некоторые данные в реальном времени, полученные с сервера, или, возможно, даже позволяет вам изменять или добавлять данные в какую-либо другую конечную точку. Это стало возможным благодаря API или интерфейсу прикладного программирования.

Мы будем использовать простой общедоступный API, который не требует аутентификации и позволяет получать некоторые данные, запрашивая API с помощью запросов GET.

https://randomuser.me/ - это веб-сайт, который предоставляет фиктивные данные для случайных пользователей, с которыми мы можем легко работать. Мы можем получить ответ, отправив запрос на https://randomuser.me/api/. Ответ JSON, который мы получаем в следующем формате.

Javascript

{
"results" : [
{
"gender" : "female" ,
"name" : {
"title" : "Miss" ,
"first" : "Nina" ,
"last" : "Simmmons"
},
"location" : {
"street" : {
"number" : 970,
"name" : "Eason Rd"
},
"city" : "Fullerton" ,
"state" : "Wyoming" ,
"country" : "United States" ,
"postcode" : 57089,
"coordinates" : {
"latitude" : "83.1807" ,
"longitude" : "104.7170"
},
"timezone" : {
"offset" : "+8:00" ,
"description" :
"Beijing, Perth, Singapore, Hong Kong"
}
},
"email" : "nina.simmmons@example.com" ,
"login" : {
"uuid" : "bd0d135f-84df-4102-aa4f-5baaa41baf5c" ,
"username" : "yellowfrog722" ,
"password" : "dawg" ,
"salt" : "q28gdiyN" ,
"md5" : "291987daea22bb91775226574925b271" ,
"sha1" : "a0463a26ea5c2ff4f3ad498fd01c5994926e5021" ,
"sha256" :
"6583eb74ca08bfac50b3b29aa52c9f02ea5d9d017fef0e5a5a6fae4f5225f928"
},
"dob" : {
"date" : "1980-11-01T23:10:05.403Z" ,
"age" : 40
},
"registered" : {
"date" : "2013-04-02T02:26:52.904Z" ,
"age" : 7
},
"phone" : "(216)-693-7015" ,
"cell" : "(501)-534-9413" ,
"id" : {
"name" : "SSN" ,
"value" : "847-09-2973"
},
"picture" : {
"large" :
" https://randomuser.me/api/portraits/women/60.jpg " ,
"medium" :
" https://randomuser.me/api/portraits/med/women/60.jpg " ,
"thumbnail" :
" https://randomuser.me/api/portraits/thumb/women/60.jpg "
},
"nat" : "US"
}
],
"info" : {
"seed" : "82a8d8d4a996ba17" ,
"results" : 1,
"page" : 1,
"version" : "1.3"
}
}

Затем вам понадобится HTML-файл для внешнего интерфейса, в котором вы хотите отображать полученные данные.
Мы можем использовать либо тег «div» (на уровне блока), либо тег «span» (на строчном уровне), который будет действовать как заполнитель для информации. Используя атрибут «id», мы можем получить требуемый контейнер «div / span», в котором мы хотим разместить информацию.

HTML

<html lang="en">
  
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content=
    "width=device-width, initial-scale=1.0" />
  
  <link id="favicon" rel="icon" 
      href="" sizes="16x16" />
        
  <!-- font-awesome library to make the 
      webpage more appealing -->
  <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
  
  <!-- Internal CSS styling -->
  <style>
    .content {
      text-align: center;
      padding: 30px;
      margin: 0px auto;
    }
  
    .details {
      margin-left: auto;
      margin-right: auto;
    }
  
    img {
      border-radius: 5px;
      box-shadow: black;
    }
  
    table,
    td {
      border-collapse: collapse;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      padding: 10px;
      border: 1px solid black;
    }
  </style>
</head>
  
<body>
  <div class="content">
    <div class="head">
      <h1 id="head"></h1>
    </div>
    <div class="email">
      <i class="fa fa-envelope" style=
        "font-size: 15px; color: blue;"></i>
      <a href="" id="email"> </a>
    </div>
    <div class="phone">
      <i class="fa fa-phone" style=
        "font-size: 15px; color: blue;"></i>
      <a href="" id="phone"> </a>
    </div>
    <br />
    <div id="user-img"></div>
    <br />
  
    <div class="details">
      <table>
        <tr>
          <td>Age</td>
          <td><span id="age"></span></td>
        </tr>
        <tr>
          <td>Gender</td>
          <td><span id="gender"></span></td>
        </tr>
        <tr>
          <td>Location</td>
          <td><span id="location"></span></td>
        </tr>
        <tr>
          <td>Country</td>
          <td><span id="country"></span></td>
        </tr>
      </table>
    </div>
  </div>
</body>
  
</html>

Тег скрипта будет содержать код, который будет делать запрос API и обрабатывать ответ. Его нужно разместить в теге body или в виде отдельного файла.

Мы используем функцию async / await, которая в основном обеспечивает отображение данных даже после загрузки страницы.

Вы можете использовать метод console.log (…), чтобы проверить, получает ли пользователь правильную информацию. Результат для того же можно увидеть, открыв окно консоли в своем веб-браузере (щелкните правой кнопкой мыши -> Проверить -> Консоль или Ctrl + Shift + J в Chrome / Edge).

Javascript

<script>
const api_url = " https://randomuser.me/api/ " ;
async function getUser() {
// Making an API call (request)
// and getting the response back
const response = await fetch(api_url);
// Parsing it to JSON format
const data = await response.json();
console.log(data.results);
// Retreiving data from JSON
const user = data.results[0];
let { title, first, last } = user.name;
let { gender, email, phone } = user;
let image = user.picture.large;
let image_icon = user.picture.thumbnail;
let age = user.dob.age;
let { city, state, country } = user.location;
let fullName = title + ". " + first + " " + last;
document.title = fullName;
// Accessing the div container and modify/add
// elements to the containers
document.getElementById( "head" ).innerHTML = fullName;
document.getElementById( "email" ).href = "mailto:" + email;
document.getElementById( "email" ).innerHTML = email;
document.getElementById( "phone" ).href = "tel:" + phone;
document.getElementById( "phone" ).innerHTML = phone;
// accessing the span container
document.querySelector( "#age" ).textContent = age;
document.querySelector( "#gender" ).textContent = gender;
document.querySelector( "#location" ).textContent
= city + ", " + state;
document.querySelector( "#country" ).textContent = country;
// Creating a new element and appending it
// to previously created containers
let img = document.createElement( "img" );
let img_div = document.getElementById( "user-img" );
img.src = image;
img_div.append(img);
const favicon = document.getElementById( "favicon" );
favicon.setAttribute( "href" , image_icon);
}
// Calling the function
getUser();
</script>

Окончательный код: это комбинация вышеуказанных разделов кода.

< html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta name = "viewport" content =
"width=device-width, initial-scale=1.0" />
<!-- font-awesome library to make the
webpage more appealing -->
< link rel = "stylesheet" href =
" https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css " />
<!-- Internal CSS styling -->
< style >
.content {
text-align: center;
padding: 30px;
margin: 0px auto;
}
.details {
margin-left: auto;
margin-right: auto;
}
img {
border-radius: 5px;
box-shadow: black;
}
table,
td {
border-collapse: collapse;
margin-left: auto;
margin-right: auto;
text-align: center;
padding: 10px;
border: 1px solid black;
}
</ style >
</ head >
< body >
< div class = "content" >
< div class = "head" >
< h1 id = "head" ></ h1 >
</ div >
< div class = "email" >
< i class = "fa fa-envelope" style =
"font-size: 15px; color: blue;" ></ i >
< a href = "" id = "email" > </ a >
</ div >
< div class = "phone" >
< i class = "fa fa-phone" style =
"font-size: 15px; color: blue;" ></ i >
< a href = "" id = "phone" > </ a >
</ div >
< br />
< div id = "user-img" ></ div >
< br />
< div class = "details" >
< table >
< tr >
< td >Age</ td >
< td >< span id = "age" ></ span ></ td >
</ tr >
< tr >
< td >Gender</ td >
< td >< span id = "gender" ></ span ></ td >
</ tr >
< tr >
< td >Location</ td >
< td >< span id = "location" ></ span ></ td >
</ tr >
< tr >
< td >Country</ td >
< td >< span id = "country" ></ span ></ td >
</ tr >
</ table >
</ div >
</ div >
</ body >
< script >
const api_url = " https://randomuser.me/api/ ";
async function getUser() {
// Making an API call (request)
// and getting the response back
const response = await fetch(api_url);
// Parsing it to JSON format
const data = await response.json();
console.log(data.results);
// Retreiving data from JSON
const user = data.results[0];
let { title, first, last } = user.name;
let { gender, email, phone } = user;
let image = user.picture.large;
let image_icon = user.picture.thumbnail;
let age = user.dob.age;
let { city, state, country } = user.location;
let fullName = title + ". " + first + " " + last;
document.title = fullName;
// Accessing the div container and modify/add
JavaScript Вопросы о Web технологиях HTML CSS-Misc HTML-Misc JavaScript-Misc CSS

РЕКОМЕНДУЕМЫЕ СТАТЬИ

Что такое тернарный оператор?
23 Января, 2024
Trovo: Путь к звездам стриминга в новом десятилетии
31 Октября, 2023
Топ сервисов для создания чат-бота в Телеграме
15 Июня, 2023
Что такое прокси IPv4 и что он умеет
14 Июня, 2023
Ember.js Свойство содержимого ArrayProxy
24 Февраля, 2023
Ошибка «Объект не определен» при попытке повернуть объект в three.js
24 Февраля, 2023
Как изменить строку в JavaScript?
23 Февраля, 2023
Как создать массив с несколькими объектами, имеющими несколько вложенных пар ключ-значение в JavaScript?
23 Февраля, 2023