4 способа сделать вызов API в JavaScript

4 способа сделать вызов API в JavaScript Программное обеспечение

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 = new XMLHttpRequest();
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
  }
};

Объяснение приведенного выше кода

Читайте также:  Программа JavaScript для проверки того, отсортирован ли массив или нет

Шаг 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) {
      return response.json(); // Parse the response data as JSON
    } else {
      throw new Error('API request failed');
    }
  })
  .then(data => {
    // Process the response data here
    console.log(data); // Example: Logging the data to the console
  })
  .catch(error => {
    // Handle any errors here
    console.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(). Однако выбор метода зависит от предпочтений пользователя и сложности проекта.

Оцените статью
bestprogrammer.ru
Добавить комментарий