API (интерфейс прикладного программирования) — это набор протоколов, правил и инструментов, которые позволяют различным программным приложениям получать доступ к разрешенным функциям и данным и взаимодействовать друг с другом. API — это сервис, созданный для пользовательских приложений, которые запрашивают данные или некоторые функции с серверов.
Чтобы предоставить конкретный доступ к нашей системе другим приложениям, которые могут быть им полезны, разработчики создают API и предоставляют им конечные точки для взаимодействия и доступа к данным сервера. При работе с JavaScript часто приходится взаимодействовать с API для получения данных или отправки запросов на сервер. В этой статье мы увидим 4 способа вызова API в JavaScript.
4 способа сделать вызов API в JavaScript
API используются для отправки запросов к серверам и взаимодействия с их данными. Когда вы работаете с JavaScript, велика вероятность столкнуться с API, поэтому очень важно знать, как выполнить вызов API в JavaScript. Некоторые из них — старые методы, некоторые — новые, но каждый из них имеет свои уникальные функции и варианты использования. Здесь мы обсудим все 4 способа выполнения вызова API в JavaScript.
1. Вызов API в JavaScript с использованием XMLHttpRequest
XMLHttpRequest — это объект, используемый для вызовов API в JavaScript. До выпуска ES6, который поставлялся с Fetch и такими библиотеками, как Axios, в 2015 году, это был единственный способ вызова API.
XMLHttpRequests по-прежнему используются во многих местах, поскольку все новые и старые браузеры поддерживают это.
- Для реализации расширенных функций, таких как отмена запроса и отслеживание прогресса, используется
- Для поддержки старых кодовых баз, написанных до анонса ES6, мы используем XMLHttpRequest.
Пример:
Javascript
const xhttpr =newXMLHttpRequest();xhttpr.open('GET','Api_address',true);xhttpr.send();xhttpr.onload = ()=> {if(xhttpr.status === 200) {const response = JSON.parse(xhttpr.response);// Process the response data here}else{// Handle error}};
Объяснение приведенного выше кода
Шаг 1. Создайте экземпляр объекта XMLHttpRequest.
const xhttpr = new XMLHttpRequest();
Шаг 2. Установите открытое соединение с конечной точкой API, указав необходимый метод HTTP и URL-адрес.
xhttpr.open('GET', 'Api_address', true); Здесь » истина» означает, что запрос является асинхронным.
Шаг 3. Отправьте запрос API.
xhttpr.send();
Шаг 4. Создайте функцию загрузки, когда запрос полностью получен или загружен:
xhttpr.onload = ()=> {
if (xhttpr.status === 200) {
const response = JSON.parse(xhttpr.response);
// Process the response data here
} else {
// Handle error
}
}; status — HTTP-код статуса ответа.
Поскольку рекомендуется использовать более новые альтернативы, такие как fetch и Axios. Но использование XMLHttpRequest даст вам понимание жизненного цикла запрос-ответ и того, как работает HTTP-запрос. Вот как JavaScript API вызывается с использованием XMLHttpRequest.
2. Вызов API в JavaScript с использованием метода fetch()
fetch — это метод вызова API в JavaScript. Он используется для получения ресурсов с сервера. Все современные браузеры поддерживают метод выборки. Его гораздо проще и проще использовать по сравнению с XMLHttpRequest.
Он возвращает обещание, которое содержит одно значение: либо данные ответа, либо ошибку. Метод fetch() извлекает ресурсы асинхронно.
Пример:
Javascript
fetch('Api_address').then(response => {if(response.ok) {returnresponse.json();// Parse the response data as JSON}else{thrownewError('API request failed');}}).then(data => {// Process the response data hereconsole.log(data);// Example: Logging the data to the console}).catch(error => {// Handle any errors hereconsole.error(error);// Example: Logging the error to the console});
Объяснение приведенного выше кода
Шаг 1. Сделайте запрос API к конечной точке URL.
Передайте URL-адрес API методу fetch(), чтобы запросить API, который вернет обещание.
fetch('Api_address') Шаг 2 : Обработайте ответ и проанализируйте данные.
Используйте метод.then() для обработки ответа. Поскольку объект ответа имеет несколько свойств и методов для доступа к данным, используйте соответствующий метод для анализа данных. Если API возвращает данные JSON, используйте метод.then().
.then(response => {
if (response.ok) {
return response.json(); // Parse the response data as JSON
} else {
throw new Error('API request failed');
}
}) Шаг 3: Обработка проанализированных данных
Создайте еще один метод.then() для обработки анализируемых данных. Внутри вы можете использовать эти данные в соответствии с вашими потребностями.
.then(data => {
// Process the response data here
console.log(data); // Example: Logging the data to the console
}) Шаг 4: Обработка ошибки
Для обработки ошибок используйте метод.catch() в конце изменения.
.catch(error => {
// Handle any errors here
console.error(error); // Example: Logging the error to the console
}); 3. Вызов API в JavaScript с использованием Axios
Axios — это библиотека с открытым исходным кодом для отправки HTTP-запросов к серверам. Это подход, основанный на обещаниях. Он поддерживает все современные браузеры и используется в приложениях реального времени. Его легко установить с помощью менеджера пакетов npm.
Он имеет лучшую обработку ошибок, чем метод fetch(). Axios также выполняет автоматическое преобразование и возвращает данные в формате JSON.
Пример:
Javascript
import axios from'axios';axios.get('APIURL').then(response => {const responseData = response.data;// Access the response data// Process the response data here}).catch(error => {// Handle any errors});
Объяснение: при отправке HTTP-запроса он ответит нам сообщением об ошибке или данными, которые уже преобразованы в формат JSON (который является собственностью Axios). Мы можем обрабатывать данные с помощью метода.then(), а в конце мы будем использовать метод.catch() для обработки ошибки.
Примечание. Здесь нам необходимо передать URL-адрес, и в отличие от fetch или XMLHttpRequest мы не можем передать путь к ресурсу.
4. Вызов API в JavaScript с использованием jQuery AJAX
jQuery — это библиотека, используемая для упрощения программирования на JavaScript, и если вы ее используете, то с помощью метода $.ajax() вы можете выполнять асинхронные HTTP-запросы для получения данных.
Пример:
Javascript
$.ajax({url:'APIURL',method:'GET',success:function(response) {const parsedData = JSON.parse(response);// Process the parsed data here},error:function(xhr, status, error) {// Handle any errors}});
Объяснение приведенного выше примера
Шаг 1. Создайте запрос к API.
Чтобы сделать HTTP-запрос, используйте метод $.ajax() и передайте ему URL-адрес, указав необходимый метод.
$.ajax({
url: 'APIURL',
method: 'GET',
}) Шаг 2: Обработка и анализ ответа.
Мы будем использовать успешную функцию обратного вызова для обработки ответа, и если ответ присутствует, мы преобразуем данные в формат JSON.
success: function(response) {
const parsedData = JSON.parse(response);
// Process the parsed data here
} Шаг 3: Обработка ошибки.
Для обработки ошибки во время вызова API мы будем использовать функцию обратного вызова ошибки.
Здесь объект xhr содержит информацию о запросе.
error: function(xhr, status, error) {
// Handle any errors
} Для обработки ответа у него есть две функции обратного вызова: успех и ошибка.
Заключение
При работе с API в JavaScript у вас есть несколько вариантов отправки запросов. XMLHttpRequest — это самый старый способ вызова API с использованием создания экземпляра и обработки ответа с помощью обработчика событий. Но после выпуска ES6 в 2015 году разработчикам была предоставлена возможность использовать более эффективный метод fetch() и библиотеку Axios. Оба возвращают обещания, которые можно обработать с помощью метода.then() или метода async/await. Но в библиотеке Axios обрабатывать ошибки проще, чем с помощью метода fetch(). Однако выбор метода зависит от предпочтений пользователя и сложности проекта.
