Перейти к основному содержимому

Создание и тестирование вызова API

На этой странице вы узнаете, как создать и протестировать вызов API.

Создание вызовов API​

Чтобы использовать API в вашем приложении, сначала вам нужно создать вызов API.

Чтобы создать вызов API, выполните следующие шаги:

  1. Выберите Вызовы API из левого меню навигации.
  2. Нажмите на кнопку + Добавить и выберите Создать вызов API.
  3. Введите Имя вызова API.
  4. Выберите Тип метода: GET, POST, DELETE, PUT или PATCH.
  5. Введите URL API службы, к которой вы хотите получить доступ.
примечание

Если вы хотите использовать динамический URL, например, <https://reqres.in/api/users/2>, где 2 является динамическим и <https://reqres.in/api/users?page=5>, где 5 является динамическим:

  1. Замените жестко заданное значение на понятное имя внутри скобок (например, от https://reqres.in/api/users/2 до https://reqres.in/api/users/[user_id]).
  2. Затем создайте новую переменную с тем же именем, которое вы указали в скобках.

Дальнейшие инструкции зависят от выбранного Типа метода.

Для вызова GET и DELETE​

Если вы выбрали GET или DELETE в качестве типа метода, выполните следующие шаги:

  1. Дополнительно: если для вызова API требуются заголовки запросов, такие как токен авторизации, добавьте заголовок.
  2. Дополнительно: если вызов API требует параметры запроса, такие как номер страницы или идентификатор пользователя, добавьте параметры запроса.
  3. Нажмите Добавить вызов, чтобы сохранить вызов API.
warning

После внесения любых изменений необходимо сохранить вызов API.

В приведенной выше демонстрации определен вызов API GET для получения данных пользователей с REQ | RES (который предоставляет размещенный REST API для тестирования HTTP-запросов).

Демонстрация использования динамического URL в запросе GET выглядит следующим образом:

Чтобы добавить такой вызов API:

  1. Замените жестко заданное значение на понятное имя внутри скобок (например, от https://reqres.in/api/users/2 до https://reqres.in/api/users/[user_id]).
  2. Затем создайте новую переменную с тем же именем, которое вы указали в скобках.

Вызов API DELETE можно также определить аналогичным образом; просто убедитесь, что вы выбрали Тип метода DELETE.

Для вызова POST, PUT и PATCH​

Если вы выбрали запрос POST, следуйте следующим шагам:

  1. Дополнительно: если вызов API требует заголовки запросов, такие как токен авторизации, добавьте заголовок.
  2. Создайте тело запроса для вызова API.
  3. Нажмите Добавить вызов, чтобы сохранить вызов API.
warning

После внесения любых изменений необходимо сохранить вызов API.

В этой демонстрации определен вызов API POST с двумя переменными, userName и userJob. Переменные используются в теле запроса JSON.

Вызовы API PUT и PATCH могут быть определены аналогичным образом; убедитесь, что вы ввели допустимый URL-адрес конечной точки API и выбрали правильный тип метода.

Группировка вызовов API​

Вы можете создать группу вызовов API, которые разделяют одинаковый базовый URL. Группировка вызовов API помогает добавить все заголовки запросов (например, токен авторизации) одновременно, и они будут автоматически добавлены для всех вызовов API внутри группы.

warning

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

Для создания группы API:

  1. Нажмите на кнопку + (в левом верхнем углу) и выберите Создать группу API.
  2. Введите Имя группы API.
  3. Введите Базовый URL API. Это должна быть часть, которая общая для всех API. Примечание: Не оставляйте '/' в конце.
  4. Вы можете добавить заголовки запроса, нажав на кнопку + Добавить заголовок. См. подробные инструкции по добавлению заголовков.
  5. Нажмите Добавить группу. Это отобразит группу слева.
  6. Откройте только что созданную группу API и нажмите на кнопку + Добавить вызов API.
  7. Добавьте вызов API так, как вы бы это обычно делали. Примечание: Внутри конечной точки API введите часть URL, которая начинается после базового URL.

Импорт определений API​

Мы предоставляем вам возможность добавлять множество определений вызовов API путем их импорта напрямую из Swagger/OpenAPI одним махом. Простым щелчком вы можете добавить большое количество API, существенно сократив время и усилия, необходимые для их создания вручную.

Более того, возможность импорта определений Swagger/OpenAPI непосредственно в FlutterFlow исключает риск возникновения ошибок при создании определений API вручную, гарантируя надежность и эффективность приложений.

к сведению

Мы также добавляем все настройки, необходимые для запуска API, такие как заголовки, параметры запроса, переменные и тело, как они определены в файле Swagger. Однако вам может потребоваться заменить жестко заданные значения в тексте тела переменными переменных.

warning

Обратите внимание, что при импорте API, созданных с использованием OAS 2.0 в FlutterFlow, могут возникнуть некоторые проблемы, например, теряется запрос тела во время процесса импорта. Наша функциональность импорта создана на основе стандарта OAS 3.0, поэтому для лучшего опыта и совместимости рекомендуется использовать API, соответствующие OAS 3.0 или выше.

Для импорта определений вызовов API:

  1. Нажмите на значок Импорт OpenAPI. Это откроет новое всплывающее окно.
  2. Нажмите Загрузить файл. Здесь вы можете загрузить файл сваггера в формате .yml или .json.
  3. После успешного импорта вы увидите список всех созданных и добавленных API в виде группы.

Вот пример импорта определений вызовов API пакетно, взятый из здесь.

Тестирование вызовов API​

Всегда стоит протестировать ваш вызов API перед его использованием в вашем приложении. Мы облегчаем для вас возможность попробовать вызов API внутри нашего конструктора.

Для тестирования вызова API вместе с его ответом выполните следующие шаги:

  1. Выберите уже созданный вызов API или тот, над созданием которого вы в настоящее время работаете, и перейдите на вкладку Ответ & Тест.
  2. Слева вы увидите раздел Переменные, где вы можете ввести значения для переменных, определенных для вашего вызова API.
  3. Справа в разделе Предварительный просмотр вы можете проверить URL вызова API, заголовки запросов, тело запроса и ответ. Во вкладке Тестовый ответ вы можете просмотреть полный ответ API, включая формат JSON и сырой текст тела, а также заголовок ответа.
  4. Нажмите Тестировать вызов API, чтобы вызвать API. Вы увидите, что статус запроса GET отображается, и если он успешен (код статуса 200), то результат запроса будет отображен ниже.
  5. Любое значение из JSON-результата можно получить, определив путь к JSON.

Ниже демонстрируется тестирование создания нового пользователя с использованием запроса POST. Вызов API принимает две переменные: userName и userJob. Успешный запрос POST возвращает код статуса 201.

к сведению

Тестирование запросов PUT и PATCH также будет похоже на это.

Вызов API [Действие]​

Используя это действие, вы можете вызвать определенный в вашем проекте вызов API.

подсказка

Также вы можете добавить вызов API как Запрос бэкэнда, который будет автоматически запускаться, когда страница или виджет загружается на экран.

Перейдите к вашему проекту и выполните следующие шаги, чтобы определить действие для любого виджета.

  1. Выберите Виджет (например, Кнопку), для которого вы хотите задать действие.
  2. В панели свойств (справа) выберите Actions и нажмите Open. Это откроет Редактор потока действий (Action Flow Editor) в новом всплывающем окне.
  3. Нажмите на кнопку + Add Action.
  4. Справа найдите и выберите действие API Call (в разделе Backend/Database).
    1. Выберите Group or Call Name из выпадающего списка.
    2. Необязательно: если для вашего API-запроса требуются переменные (например, токен аутентификации, параметры запроса, ID пользователя и т.д.), передайте их значение, нажав на кнопку + Variable.
    3. Имя переменной для вывода действия (Action Output Variable Name) позволяет получить ответ от API-запроса. По умолчанию задается случайное имя, однако вы можете изменить его на осмысленное название (например, loginResponse).
    4. Вы можете добавить условное действие, которое проверяет успешность выполнения API-запроса.
    5. Если API-запрос выполнен успешно, будут выполнены все действия по пути TRUE. Например, переход на главную страницу при успешной авторизации.
    6. Если API-запрос завершился неудачей, будут выполнены все действия по пути FALSE. Например, показ уведомления (snackbar) при неуспешной авторизации.