Связь фронтенда и бэкенда через API

У тимбилдер спроси чтобы джуниоры сорсы побагрили. Либо учи русский.

Вот пример простого запроса от фронтенда к бэкенду через API, используя JavaScript и методы Fetch API:

 // Предполагаем, что у вас есть данные из формы, которые нужно передать на бэкенд 
const formData = { 
  username: 'myUsername', 
  password: 'myPassword', 
  email: 'myEmail@example.com' 
}; 
 
// Отправляем POST-запрос на URL вашего API 
fetch('https://api.example.com/register', { 
  method: 'POST', // Указываем метод запроса 
  headers: { 
    'Content-Type': 'application/json' // Устанавливаем заголовок Content-Type для указания типа данных 
  }, 
  body: JSON.stringify(formData) // Преобразуем данные в формат JSON и передаем в теле запроса 
}) 
.then(response => { 
  if (!response.ok) { 
    throw new Error('Ошибка сети или сервера'); 
  } 
  return response.json(); // Парсим ответ сервера в формате JSON 
}) 
.then(data => { 
  console.log(data); // Обрабатываем полученные данные 
}) 
.catch(error => { 
  console.error(error); // Обрабатываем ошибки 
});  

Пример выше отправляет POST-запрос на URL " https://api.example.com/register " с данными из формы регистрации в формате JSON в теле запроса. Заголовок "Content-Type" указывает на тип данных, который передается (в данном случае - JSON). Вы можете настроить параметры запроса (например, метод, заголовки, тело) в зависимости от требований вашего бэкенд-API.

На бэкенде вам нужно будет настроить обработку этого POST-запроса и сохранение данных в вашу базу данных. Конкретные шаги для этого зависят от технологий, которые вы используете на бэкенде, таких как язык программирования, фреймворк или библиотеки.

JavaScript

 const formData = new FormData(document.querySelector('form')); 
 
fetch('http: //example.com/api/register', { 
  method: 'POST', 
  body: formData 
}) 
.then(response => response.json()) 
.then(data => { 
  console.log(data);
}) 
.catch(error => { 
  console.error(error);
}); 

И сразу все набросились отвечать с чатгпт...

Фронтенд и бэкенд - это две разные части приложения, которые выполняют разные функции. Фронтенд обычно отвечает за отображение пользовательского интерфейса и взаимодействие пользователя с приложением, а бэкенд обрабатывает данные, хранит информацию и обеспечивает логику и функциональность приложения.

Для связи между фронтендом и бэкендом используется API (Application Programming Interface). API - это набор протоколов, правил и инструментов, которые позволяют двум разным приложениям взаимодействовать и обмениваться данными.

В случае связи между фронтендом и бэкендом, API обычно представляет собой серверную часть приложения, которая обрабатывает запросы от фронтенда и возвращает данные в формате, который может быть использован фронтендом.

API может быть построен на различных технологиях, таких как REST (Representational State Transfer), GraphQL и других, и обычно использует протоколы HTTP и HTTPS для передачи данных.

Чтобы связать фронтенд с бэкендом через API, необходимо сначала определить структуру и формат данных, которые будут передаваться в запросах и ответах. Затем разработчики могут создать и настроить API, чтобы обрабатывать запросы от фронтенда и возвращать необходимые данные.

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

Простая форма авторизации для примера:

 // константы

const   
    LOGIN = 'login',
    PASSWORD = 'password'
  
// функция внури функционального компонента

    const handlerLogin = useCallback((e: HandlerFormSubmit) => {
        const formData = new FormData(e.target)   

        const map = new Map(formData)   

        const data = {
            login: map.get(LOGIN),
            password: map.get(PASSWORD),
        }

        dispatch({ type: 'RPC_SIGNIN_ACTION', data })
    }, [])  


// JSX

            

                
                
                LogIn
            
 

Form, как Input - обычные компоненты, ничего интересного. В компоненте Form дополнительно прописан

 e.preventDefault()  

Отправка на сервер, в простом виде, выглядит так:

 export async function signin({ login, password }) {  
    const url = new URL(`http://127.0.0.1:8000/auth/signin`)  
  
    const headers = new Headers({  
        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'  
    })  
  
    const urlSearchParams = new URLSearchParams({  
        username: login,  
        password,  
    })  
  
    const options = {  
        method: 'POST',  
        cache: 'no-cache',  
        headers,  
        body: urlSearchParams,  
    };  
  
    try {  
        const request = await fetch(url.href, options)  
        const response = await request.json()  
  
        const {  
            token_type,  
            access_token,  
        } = response  
          
        jwt.setToken({  
            token_type,  
            access_token,  
        })  
      
        return response  
    } catch (e) {  
        return {  
            message: e.message,  
        }  
    }  
}  

Проще всего использовать XMLHttpRequest().