Как фронтенд отправляет запрос бекенду?

Question

[Антон]

Работаю на работе с одним проектом. На мне задача сделать фронтэнд, на другом сотруднике, таком же "специалисте" как я, бэкенд. :)
Сверстал я свой фронт на React с Material-UI, все красиво и интерактивно. Теперь встал вопрос, я понимаю что вопрос наиглупейший, но сам не допираю. Как я должен отправлять запрос на сервер? Что это будет? Я должен написать какую-то функцию? Если да, то что она должна отправлять на сервер и как? И как мой фронт должен знать куда отправлять запрос? IP сервера и порт указывать?
Я понимаю, что я должен отправлять серверу запрос GET или POST и сервер будет отдавать мне ответ в формате JSON. Но как, как я JS должен отправить информацию ему?
В общем вы поняли по моим вопросам, какой я специалист. :)
Может есть какая-то подробная статья как это организовывается?

Comments

[Dima Polos]

Напиши мне в телегу, объясню)

Answer 1

[hzzzzl]

https://developer.mozilla.org/ru/docs/Web/API/Fetch_API

вкратце

async componentDidMount() {
  const response = await fetch('/api/get_all_data')
  const data = await response.json()
  this.setState({ data: data })
}

так и искать - реакт загрузка данных
https://habr.com/ru/company/ruvds/blog/443212/

Comments

[Антон]

Все равно ничего не понятно. Во-первых, я не знаю какое API используется на сервере. Во-вторых, если я к примеру знаю что там используется, но как я узнаю, что я должен отправить серверу. Например, у меня есть поля в которых должно отображаться ФИО, я знаю, что такая информация есть в БД, и вот как я должен спросить это у сервера?

[hzzzzl]

zakharoffam, эээээ, ну это вы должны "с другим сотрудником" договориться, как фронт и бек соединять, как он напишет так и будет

Answer 2

[zorca]

API || GraphQL

Answer 3

[tundramani]

вот типичный простейший запрос

var сохранить_данные = function()
	{
		var данные = JSON.stringify(  обьект )
 
		var запрос = new XMLHttpRequest()
        запрос.open('POST', 'сохранить_данные.php')    
        запрос.send(данные)
 
        запрос.onreadystatechange = function()
            {
                if(запрос.readyState === 4)
                    { 	
                    	if(запрос.responseText)
                    	{ 
                    		var ответ = JSON.parse(запрос.responseText)

		                    if(ответ !== 'ок')
		                        {
		                        	 alert('ошибка сохранения')
		                        }
		                }
		            }
		    }
	}