Как подключить api к react

Подключение API с JavaScript на react-app

У меня есть проект на create-react-app. Есть несколько страниц которые находятся в папке /src/components/ . На странице Donate.jsx нужно использовать API(виджет) от trademc(хочу сделать донат для игрового сервера).

 TrademcAPI.GetBuyForm(< Shop: "186970", Title: "Поддержать наш сервер!", Nickname: "Введите ваш никнейм", Item: "Выберите товар", Coupon: "Введите купон, если есть", Button: "Продолжить", Success_URL: "https://trademc.org", Pending_URL: "https://trademc.org", Fail_URL: "https://trademc.org", PastPlaceID: "trademc-buyform", >); 

Незнаю как подключить JavaScript на эту страницу, вставить не работает. Пробовал подключить через /public/index.html , работает только тогда когда обновляешь страницу /donate в браузере. А так оно ищет на главной странице и когда переходишь на другую страницу оно не ищет этот div.

Пробовал так, но не работает. Пустота даже Navbar не видно. (без /* global GetBuyForm / говорит no undef. ): / global GetBuyForm */

function Donate() < GetBuyForm(< Shop: "186970", Title: "Поддержать наш сервер!", Nickname: "Введите ваш никнейм", Item: "Выберите товар", Coupon: "Введите купон, если есть", Button: "Продолжить", Success_URL: "https://trademc.org", Pending_URL: "https://trademc.org", Fail_URL: "https://trademc.org", PastPlaceID: "trademc-buyform", >); return export default Donate; 

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

Оптимизация подключения REST API для React приложений

Я извиняюсь как человек, пишущий в ооп стиле и пользующийся мобиксом, вот этот трэш, подписанный как «CLASSIC OLD», его реально пишут? Его там тимлиды смотрят на код ревью, говорят что все норм и аппрувят? Просто мне казалось, в редаксе запросы к сервисам принято хотя бы в экшены прятать.

Развернуть ветку

привет,
Пример с использованием экшенов я особо не упоминал, тк это в большей степени напоминает сагу, где происходит практически то же самое , но через прослойку эффектов.
Если посмотреть ≈90% гайдов с ютуба, все они рекомендуют именно такой способ «classic».
Сам я рекомендую использовать данный способ из статьи только при не большом количестве эндпоинтов, когда выгоднее отказаться от включения библиотеки

Развернуть ветку

Привет, дай наводку, где мы с тобой виделись)
Возможно, это мой первый опыт,
появился повод попробовать для конкурса

Отправка данных в API в приложении React

Существует несколько способов отправки данных в API в приложении React. Некоторые распространенные варианты включают в себя:

• fetch(): Функция fetch() — это встроенная функция JavaScript для выполнения HTTP-запросов. Его можно использовать для отправки данных в API в приложении React, выполнив запрос POST с помощью функции fetch() и предоставив данные в качестве тела запроса.
• Axios: Axios — это популярная библиотека JavaScript для создания HTTP-запросов. Его можно использовать для отправки данных в API в приложении React с помощью метода post() , предоставленного Axios, и предоставления данных в качестве тела запроса.

Другие варианты включают в себя:

• HTTP-библиотеки: Существуют различные библиотеки HTTP, доступные для JavaScript, которые можно использовать для отправки данных в API в приложении React, например запрос, суперагент и выборка узла. Эти библиотеки предоставляют различные функции и параметры для выполнения HTTP-запросов и могут использоваться для отправки данных в API путем выполнения запроса POST с соответствующей библиотечной функцией и предоставления данных в качестве тела запроса.
• React hooks: React hook, такие как useEffect() и useState() , можно использовать для отправки данных в API в приложении React. Например, вы можете использовать hook useEffect() для выполнения HTTP-запроса к API при монтировании или обновлении компонента, а также использовать hook useState() для хранения данных ответа и обновления состояния компонента.
• Компоненты Higher-order: Компоненты высшего порядка (HOC) — это способ повторного использования кода в React путем включения в компонент дополнительной функциональности. Вы можете создать HOC, который делает HTTP-запрос к API и передает данные ответа в качестве реквизита обернутому компоненту, позволяя компоненту отправлять данные в API и получать ответ.

Вот пример того, как вы можете использовать fetch() для отправки данных в API в компоненте React:

import React, < useState >from 'react'; function MyComponent() < const [data, setData] = useState(<>); const handleSubmit = (event) => < event.preventDefault(); const formData = new FormData(event.target); fetch('http://example.com/api/endpoint', < method: 'POST', body: formData >) .then((response) => response.json()) .then((result) => < setData(result); >); >; return ( 
>  Submit 
 ); > export default MyComponent;

В этом примере функция handleSubmit() вызывается при отправке формы. Он предотвращает действие по умолчанию (которое обновляет страницу), а затем использует fetch() для отправки запроса POST в конечную точку API с данными формы в качестве тела запроса. Ответ от API анализируется как JSON и используется для обновления состояния компонента с помощью функции setData() .

Чтобы отправить данные в API в приложении React с помощью Axios, вы можете использовать метод post() , предоставляемый Axios. Вот пример того, как вы можете использовать его в компоненте React:

import React, < useState >from 'react'; import axios from 'axios'; function MyComponent() < const [data, setData] = useState(<>); const handleSubmit = (event) => < event.preventDefault(); const formData = new FormData(event.target); axios.post('http://example.com/api/endpoint', formData) .then((response) =>< setData(response.data); >); >; return ( 
>  Submit 
 ); > export default MyComponent; 

В этом примере функция handleSubmit() вызывается при отправке формы. Он предотвращает действие по умолчанию (которое обновляет страницу), а затем использует Axios для отправки запроса POST в конечную точку API с данными формы в качестве тела запроса. Ответ от API используется для обновления состояния компонента с помощью функции setData() .

Axios и fetch() являются популярными вариантами выполнения HTTP-запросов в JavaScript, и оба имеют свои преимущества и недостатки. Вот некоторые потенциальные преимущества использования Axios по сравнению с fetch() :

1. Автоматическое преобразование данных: Axios может автоматически преобразовывать данные JSON в запросе и ответе, в то время как fetch() требует, чтобы вы вручную анализировали данные ответа как JSON.
2. Улучшенная обработка ошибок: Axios предоставляет более комплексную систему обработки ошибок, позволяющую перехватывать определенные коды состояния HTTP и ошибки. fetch() отклоняет обещание только в том случае, если сервер возвращает код состояния, отличный от 2xx, что усложняет обработку определенных ошибок.
3. Возможность отмены запросов: Axios позволяет отменять ожидающие запросы с помощью функции CancelToken . Это может быть полезно, если вам нужно отменить запрос, потому что он больше не актуален или если пользователь уходит со страницы.
4. Более полный API: Axios предоставляет более широкий набор функций для выполнения различных типов HTTP-запросов (например, post() , get() , put() и т. д.), а также функции для настройки поведения запросов (например, тайм-аут). fetch() предоставляет только одну функцию для выполнения запросов и не предлагает столько параметров конфигурации.
5. Поддержка старых браузеров: Axios лучше поддерживает старые браузеры, чем fetch() , которая не поддерживается в некоторых старых браузерах.

У Axios есть свои недостатки. Некоторые потенциальные недостатки использования Axios включают в себя:

1. Больший размер: Axios больше, чем некоторые другие варианты выполнения HTTP-запросов, такие как fetch(), что может быть проблемой, если вы пытаетесь минимизировать размер своей кодовой базы.
2. Зависимость от сторонней библиотеки: Axios — это сторонняя библиотека, которую вам необходимо установить и поддерживать в вашем проекте. Это может быть дополнительным бременем, если вы уже используете несколько библиотек, и это также означает, что вы зависите от обслуживания и обновлений библиотеки.
3. Асинхронный характер: Axios является асинхронным, что означает, что он использует промисы и обратные вызовы для обработки ответа от сервера. Это может быть сложнее, чем использование синхронной библиотеки, особенно для разработчиков, плохо знакомых с асинхронным программированием.
4. Отсутствие поддержки некоторых функций: Axios не поддерживает некоторые функции, доступные в других библиотеках HTTP, например API AbortController для отмены запросов.

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

AJAX и обращение к API

Вы можете использовать встроенный в браузер метод window.fetch или любую AJAX-библиотеку, например Axios или jQuery AJAX.

Где в жизненном цикле компонента лучше делать запрос?

Вы можете сделать AJAX-запрос в componentDidMount . Когда вы получите данные, вызовите setState , чтобы передать их компоненту.

Пример: Устанавливаем состояние из AJAX-запроса

Компонент ниже показывает, как в componentDidMount задать внутреннее состояние из результата AJAX-запроса.

Допустим, наш API возвращает следующий JSON-объект:

class MyComponent extends React.Component  constructor(props)  super(props); this.state =  error: null, isLoaded: false, items: [] >; > componentDidMount()  fetch("https://api.example.com/items") .then(res => res.json()) .then( (result) =>  this.setState( isLoaded: true, items: result.items >); >, // Примечание: важно обрабатывать ошибки именно здесь, а не в блоке catch(), // чтобы не перехватывать исключения из ошибок в самих компонентах. (error) =>  this.setState( isLoaded: true, error >); > ) > render()  const  error, isLoaded, items > = this.state; if (error)  return div>Ошибка: error.message>div>; > else if (!isLoaded)  return div>Загрузка. div>; > else  return ( ul> items.map(item => ( li key=item.id>> item.name> item.price> li> ))> ul> ); > > >

Вот эквивалент с хуками:

function MyComponent()  const [error, setError] = useState(null); const [isLoaded, setIsLoaded] = useState(false); const [items, setItems] = useState([]); // Примечание: пустой массив зависимостей [] означает, что // этот useEffect будет запущен один раз // аналогично componentDidMount() useEffect(() =>  fetch("https://api.example.com/items") .then(res => res.json()) .then( (result) =>  setIsLoaded(true); setItems(result); >, // Примечание: важно обрабатывать ошибки именно здесь, а не в блоке catch(), // чтобы не перехватывать исключения из ошибок в самих компонентах. (error) =>  setIsLoaded(true); setError(error); > ) >, []) if (error)  return div>Ошибка: error.message>div>; > else if (!isLoaded)  return div>Загрузка. div>; > else  return ( ul> items.map(item => ( li key=item.id>> item.name> item.price> li> ))> ul> ); > >