🤔 Как браузер отправляет запрос и получает ответ от API?

Когда браузер отправляет запрос и получает ответ от API, это включает несколько шагов, которые следуют HTTP-протоколу. Этот процесс включает в себя создание и отправку HTTP-запроса, обработку на сервере и получение HTTP-ответа.

🚩Отправка запроса

🟠Инициация запроса
Обычно запрос инициируется через JavaScript с использованием встроенных функций, таких как XMLHttpRequest, fetch или сторонние библиотеки, такие как Axios.

   fetch('https://api.example.com/data', {
       method: 'GET',
       headers: {
           'Content-Type': 'application/json',
           'Authorization': 'Bearer token'
       }
   })
   .then(response => response.json())
   .then(data => console.log(data))
   .catch(error => console.error('Error:', error));
   

🟠Формирование HTTP-запроса
Метод: Указывает тип запроса (например, GET, POST, PUT, DELETE). URL: Указывает на какой URL отправляется запрос. Заголовки (Headers): Включают информацию о типе содержимого, авторизации и других метаданных. Тело (Body): Содержит данные, которые отправляются с запросом (для методов POST, PUT и PATCH).

🟠Отправка запроса
Браузер использует сетевые протоколы для отправки сформированного HTTP-запроса на указанный сервер через интернет.

🚩Обработка запроса на сервере

1⃣Получение запроса
Сервер получает HTTP-запрос.

2⃣Обработка запроса
Сервер обрабатывает запрос, выполняя соответствующие действия, такие как чтение данных из базы данных, выполнение логики приложения или взаимодействие с другими сервисами.

3⃣Формирование ответа
Статус код (Status Code): Указывает результат обработки запроса (например, 200 OK, 404 Not Found, 500 Internal Server Error). Заголовки (Headers): Могут включать метаданные о содержимом ответа, кэшировании и других параметрах. Тело (Body): Содержит данные, которые отправляются обратно клиенту, часто в формате JSON или XML.

   HTTP/1.1 200 OK
   Content-Type: application/json
   Content-Length: 85

   {
       "id": 1,
       "name": "Example",
       "description": "This is an example response"
   }
   

🚩Получение ответа

1⃣Получение ответа
Браузер получает HTTP-ответ от сервера.

2⃣Обработка ответа
Статус код: Браузер или JavaScript-код проверяет статус код, чтобы определить, был ли запрос успешным. Заголовки: Заголовки могут быть использованы для получения дополнительной информации о ответе. Тело: Браузер разбирает тело ответа, если это необходимо, например, преобразует JSON-данные в объект JavaScript.

3⃣Использование данных
Полученные данные могут быть использованы в приложении для обновления интерфейса пользователя, хранения в локальном хранилище или выполнения других действий.

🚩Пример полного цикла запроса и ответа

Отправка запроса

fetch('https://api.example.com/data', {
    method: 'GET',
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer token'
    }
})
.then(response => {
    if (!response.ok) {
        throw new Error('Network response was not ok ' + response.statusText);
    }
    return response.json();
})
.then(data => {
    console.log('Data received:', data);
    // Используем данные для обновления UI или других целей
})
.catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
});

Ставь 👍 и забирай 📚 Базу знаний