Свой API на Python. Flask, чтобы быстро писать API

Что такое API и как оно работает: объяснение с нуля, шаг за шагом

Серверная часть

1. API - это код на сервере, который участвует почти во всех ключевых функциях бэкенда сайта:

   1. CRUD-операции с базой данных: чтение, добавление, обновление, удаление данных
   2. Авторизация на сайте
   3. Валидация данных, которые приходят с полей сайта (формы, инпуты и т.д)
   4. Поиск, изменение, добавление страниц на сайте. И многое другое, конечно же

2. Пример простого кода API на Python, используя Flask:

@app.route('/users', methods=['GET'])  # хотим получить информацию о "/users"
def get_users():
    # формируем объект-как-json с ответом:
    response = {
        "user_name": "Damir",
        "id": 0
    }
    return jsonify(response)  # возвращаем json с информацией о человеке

3. Точка входа в API называется эндпоинт:

@app.route('/users', methods=['GET'])  # когда переходим на эндпоинт "/users"
def get_users():
    ...

@app.route('/question', methods=['GET', 'POST'])  # эндпоинт "/question"
def get_questions():
    ...

4. У эндпоинта могут быть параметры, которые позволяет доставать данные выборочно, например, только об одном пользователе:

@app.route('/users', methods=['GET'])
def get_users():
    ...

@app.route('/users/<id>', methods=['GET'])  # эндпоинт с параметром "id"
def get_user(id):
    ...

Клиентская часть

5. Чтобы получить данные с API, мы посылаем запрос из клиента. Клиентом может быть сайт, телефон... Даже твоя VS Code (плагин Thunder Client)

6. В веб-разработке мы обычно используем fetch-запросы, которые отправляем из нашего JavaScript:

async function fetchData() {
  /* посылаем запрос на сервер (1) и принимаем ответ из сервера в формате json (2)  */
  const response = await fetch("https://jsonplaceholder.typicode.com/todos/1"); // 1) 
  const data = await response.json(); // 2) 

  /* выводим json (3) в формате строки (4) на сайте  */
  let placeForData = document.querySelector(".output"); // 3) 
  placeForData.innerText = JSON.stringify(data); // 4) 
}

fetchData();

Смотри живой пример этого кода ниже:

Живой пример на странице

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

7. Правило тут такое: клиент живёт отдельно, сервер - отдельно. Мы связываем их через (fetch-запросы)[/web/lessons/js/fetch/]. Так и создаётся связь клиент-сервер, как показано на картинке ниже:

8. Принцип разделения клиента и сервера - один из основных принципов работы REST API. Смотри первую иконку ниже:

CORS-механизм в браузере

9. Когда мы посылаем запрос из клиента на сервер, в браузере срабатывает CORS-механизм. Cross Origin Resource Sharing, он же CORS - это вшитая в браузер технология защиты от несанкционированного доступа одного ресурса к другому. Грубо говоря, чтобы сайт А не спёр данные с сайта Б.

10. CORS-механизм браузера даёт добро или, наоборот, блокирует запросы на сервер из нашего клиента:

11. CORS-механизм основан на preflight-запросе: перед отправкой твоего запроса срабатывает ещё один, невидимый, запрос, который проверяет, настроен ли сервер на приём входящих запросов и отправку данных:

12. Если сервер не настроен корректно или не хочет отдавать данные, ты увидишь в консоли браузера CORS-ошибку (я её называю именно так):

13. Эту ошибку выдаёт тот самый preflight-запрос. Чтобы исправить её, достаточно добавить на свой сервер поддержку CORS-механизма. Вот пример с Flask:

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
# включаем поддержку CORS, дабы сервер мог свободно делиться данными
CORS(app) 

@app.route('/')
def home():
    return 'Hello, CORS is enabled!'

14. Если же у тебя нет доступа к серверу, значит, тут 2 причины:

    1. Он не настроен корректно
    2. ИЛИ ты неправильно отправляешь запрос.

15. Убедись, что А) эндпоинт сервера действительно настроен на отправку данных и Б) что твой запрос написан 100% правильно

Итоговый код для создания и работы с API: клиент и сервер

Клиент на JavaScript

Отправляет fetch-запрос на сервер:

async function fetchData() {
  const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");  
  const data = await response.json();  

  let placeForData = document.querySelector(".output");  
  placeForData.innerText = JSON.stringify(data);  
}

fetchData();

Сервер на Python + Flask

Ловит fetch-запрос и отвечает объектом Response с данными в формате JSON:

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route('/')
def home():
    return 'Hello, CORS is enabled!'

@app.route('/users', methods=['GET'])
def get_users():
    ...

@app.route('/users/<id>', methods=['GET'])  # эндпоинт с параметром "id"
def get_user(id):
    ...

if __name__ == '__main__':
    app.run()