Как загрузить API через url в React?

Question

mr jeery @jeerjmin

Как загрузить API через url в React?

Есть такая ссылочка https://api.coinmarketcap.com/v1/ticker/?limit=10, которая содержит массив криптовалют с обновляющимися ценами.

Как его загрузить и передать в state с помощью react/redux?
Любая инфа, ссылки, аналогичные примеры будут полезными!

С подобным backend'м не имел дело, прошу помощи!

Вопрос задан более трёх лет назад
246 просмотров

10 комментариев

Подписаться 1 Простой 10 комментариев

Сергей @sabramovskikh

Вы видимо и с реактом не имели дел, как и с js
Просто посылаете запрос и получаете данные

Написано более трёх лет назад
mr jeery @jeerjmin Автор вопроса

Сергей, что за запрос?

Написано более трёх лет назад
Сергей @sabramovskikh

mr jeery, Да обычый аякс запрос

Написано более трёх лет назад
MeGaBoJIbT @MeGaBoJIbT

если опустить редакс и обработку ошибок, то отправляем запрос любым способом которым у вас отправляет запрос в componentDidMount, когда он завершится делаем setState с результатом запроса. Если делать это с редаксом то так как запрос действие асинхронное, то экшн у нас не один а два (стартовать запрос, обработать результаты) а то и три (обработать ошибку). Но вообще для этого принято использовать соответствующую мидлварь. В документации впрочем подробно: https://redux.js.org/docs/advanced/AsyncActions.html

Но если вы не понимаете как запрос сделать и что за запрос то то что выше можно не читать потому что сначала надо изучить основы.

Написано более трёх лет назад
mr jeery @jeerjmin Автор вопроса
Сергей, MeGaBoJIbT,

Сделал следующее:

class App extends Component { constructor(props) { super(props); this.state = { items: [] }; } componentDidMount() { fetch( 'http://swapi.co/api/people/?format=json') .then( response => response.json() ) .then( ({results: items}) => this.setState({items})) } render() { return ( <div> {this.state.items.map(item => <h4>{item.name}</h4>)} </div> ); } }

Но браузер стал ругаться, что загружаю с другого домена:

Failed to load swapi.co/api/people/?format=json: Redirect from 'swapi.co/api/people/?format=json' to 'https://swapi.co/api/people/?format=json' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Посоветовали в package.json поставить прокси

"proxy": "http://localhost:3010",

Но теперь стал выдавать ошибку.

Proxy error: Could not proxy request /robots.txt from localhost:3000 to http://localhost:3010.
See https://nodejs.org/api/errors.html#errors_common_s... for more information (ECONNREFUSED).

Нашел уж слишком огромные статьи с сложными решениями.
Возможно я закапываюсь?
Раз мне тут отвели, что все просто и я дурак ничего не знаю
Написано более трёх лет назад
Виталий @vshvydky

mr jeery, проксировать чужое апи на свой домен действительно выглядит странным образом, лучше поднять на сервере свой эндпоинт, который зеркально пробросит данные между фронтом и сторонним апи. Если No 'Access-Control-Allow-Origin' наблюдается, значит сайт не счел нужным отдавать свое апи сторонним фронтэндам. Вообще судя по уровню вопросов лучше вернуться к изучению тодолист и вообще основ языка жс и работы в браузере, без этого будет еще миллион глупых вопросов.

Написано более трёх лет назад
mr jeery @jeerjmin Автор вопроса

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

Написано более трёх лет назад

Виталий @vshvydky

mr jeery, на примере koa.js v2

const rp = require('request-promise');
const url = ' https://api.coinmarketcap.com/v1/ticker/?limit=10';
module.exports.myendpoint = async (ctx) => {
    try {
          ctx.body = await rp(url);
      } catch (error) {
           ctx.throw(500, 'blablabla);
      }
}

Написано более трёх лет назад

mr jeery @jeerjmin Автор вопроса

Виталий, а как совместить это с фронтендом ? можно статью какую-нибудь ? это же просто отрывок кода

Написано более трёх лет назад
Виталий @vshvydky

mr jeery, я не буду искать за тебя статью, если не понимаешь что я пишу, тут очевидный путь, изучать докумнтацию по используемым продуктам , потом начинать эксперименты. Хирург же не вырезает тебе апендицит пока не знает как держать в руках скальпель, чем ты то лучше?

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 1

2 комментария

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

+2 ещё

Простой
Как отобразить массив из элементов?
- 1 подписчик
- 21 минуту назад
- 15 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Неизвестные скрипты на сайте (plupload и moxie). Для чего?
- 1 подписчик
- 4 часа назад
- 93 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как сделать так, чтобы звезда падала только при скролле страницы?
- 1 подписчик
- 5 часов назад
- 67 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Почему вылезает второй слайд?
- 1 подписчик
- 6 часов назад
- 33 просмотра
1

ответ
JavaScript

Простой
Почему в букмарклете должным образом не выполняется Alt + Click?
- 1 подписчик
- 14 часов назад
- 33 просмотра
0

ответов
JavaScript

Средний
Как создать кроссбраузерный функиональный плеер?
- 1 подписчик
- 14 часов назад
- 61 просмотр
0

ответов
React

Простой
У меня react up и я беру из .env пароль а мне бьет ошибку, как быть?
- 1 подписчик
- 16 часов назад
- 50 просмотров
0

ответов
JavaScript

+1 ещё

Средний
Почему функция mnemonicToWalletKey из библиотеки тон генерирует неверный адрес кошелька?
- 1 подписчик
- 22 часа назад
- 45 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как передавать данные гугл таблицы в телеграм при добавлении новой записи?
- 1 подписчик
- 22 часа назад
- 56 просмотров
0

ответов
JavaScript

Простой
Проблема с добавлением полей товара в куки, почему-то при клике ничего в куки не записывает, что делать?
- 1 подписчик
- вчера
- 31 просмотр
2

ответа
Показать ещё Загружается…

JavaScript разработчик

summer • Ярославль

от 100 000 до 140 000 ₽

Junior JavaScript Developer

КРАФТТЕК • Санкт-Петербург

от 60 000 до 80 000 ₽

JavaScript разработчик

Мэтч

от 80 000 ₽

Перекрасить 2 вкладыш для типографии в новый цвет

18 апр. 2024, в 15:55

500 руб./за проект

Починить лайки и удаление сторис на React Native

18 апр. 2024, в 15:52

2500 руб./за проект

Требуется переводчик на португальский

18 апр. 2024, в 15:39

500 руб./в час

Вы видимо и с реактом не имели дел, как и с js
Просто посылаете запрос и получаете данные
если опустить редакс и обработку ошибок, то отправляем запрос любым способом которым у вас отправляет запрос в componentDidMount, когда он завершится делаем setState с результатом запроса. Если делать это с редаксом то так как запрос действие асинхронное, то экшн у нас не один а два (стартовать запрос, обработать результаты) а то и три (обработать ошибку). Но вообще для этого принято использовать соответствующую мидлварь. В документации впрочем подробно: https://redux.js.org/docs/advanced/AsyncActions.html

Но если вы не понимаете как запрос сделать и что за запрос то то что выше можно не читать потому что сначала надо изучить основы.
Сергей, MeGaBoJIbT,

Сделал следующее:

class App extends Component { constructor(props) { super(props); this.state = { items: [] }; } componentDidMount() { fetch( 'http://swapi.co/api/people/?format=json') .then( response => response.json() ) .then( ({results: items}) => this.setState({items})) } render() { return ( <div> {this.state.items.map(item => <h4>{item.name}</h4>)} </div> ); } }

Но браузер стал ругаться, что загружаю с другого домена:

Failed to load swapi.co/api/people/?format=json: Redirect from 'swapi.co/api/people/?format=json' to 'https://swapi.co/api/people/?format=json' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Посоветовали в package.json поставить прокси

"proxy": "http://localhost:3010",

Но теперь стал выдавать ошибку.

Proxy error: Could not proxy request /robots.txt from localhost:3000 to http://localhost:3010.
See https://nodejs.org/api/errors.html#errors_common_s... for more information (ECONNREFUSED).

Нашел уж слишком огромные статьи с сложными решениями.
Возможно я закапываюсь?
Раз мне тут отвели, что все просто и я дурак ничего не знаю
mr jeery, проксировать чужое апи на свой домен действительно выглядит странным образом, лучше поднять на сервере свой эндпоинт, который зеркально пробросит данные между фронтом и сторонним апи. Если No 'Access-Control-Allow-Origin' наблюдается, значит сайт не счел нужным отдавать свое апи сторонним фронтэндам. Вообще судя по уровню вопросов лучше вернуться к изучению тодолист и вообще основ языка жс и работы в браузере, без этого будет еще миллион глупых вопросов.
Виталий, прошу простить за глупые вопросы.
можете поделиться хорошей статьей, будучи в курсе моей цели, где рассказывается процесс поднятия эндпоинд, который зеркально пробрасывает данные между фронтом и сторонним апи?
буду супер благодарен
mr jeery, на примере koa.js v2
const rp = require('request-promise'); const url = ' https://api.coinmarketcap.com/v1/ticker/?limit=10'; module.exports.myendpoint = async (ctx) => { try { ctx.body = await rp(url); } catch (error) { ctx.throw(500, 'blablabla); } }
Виталий, а как совместить это с фронтендом ? можно статью какую-нибудь ? это же просто отрывок кода
mr jeery, я не буду искать за тебя статью, если не понимаешь что я пишу, тут очевидный путь, изучать докумнтацию по используемым продуктам , потом начинать эксперименты. Хирург же не вырезает тебе апендицит пока не знает как держать в руках скальпель, чем ты то лучше?

Answer 1 · 2018-01-31 23:06:06

гугл это показывает везде.
концепция реакт редакс
1. создается экшен, в нем асинхронный запрос к апи, он диспетчит 3 события, запрос выполняется, выполнен, сбой.
2. создается 3 диспетчера, каждый из которых получая конкретное событие модифицирует стор определенным образом. к примеру {isRun: false, response: [], status: true}
3. создается компонент, мапится к стейту на эту ветку, пробрасывается в компонент соответствующий экшен.
4. В зависимости от поставленной задачи экшен вызывается в нужной части компонента. Аля в момент маунта, с момент изменения каких-то пропс в момент срабатывания события онклик / онченж какого-то элемента.

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

Как загрузить API через url в React?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт