Лучший способ получить доступ к API из приложения React?

Question

Каков наилучший способ получить доступ к API с помощью приложения React? API в настоящее время разрабатывается в Голанге, используя kami & mgo для запросов POST/GET/DELETE.

Я хочу, чтобы иметь возможность сделать запрос GET по следующему URL-адресу:

http://user:password@localhost:8000/api/v1/systems

на моем React приложение и сохранить результат в государственном атрибуте:

this.state = { 
    data: //store the data here 
} 

Я также хотите загружать эти данные всякий раз, когда страница загружается, поэтому, возможно, я должен использовать функцию componentDidMount(), чтобы справиться с этим?

Я никогда не пользовался вызовами API на React, поэтому мне было интересно, может ли кто-нибудь здесь сказать мне хороший способ?

EDIT

Я использую Реагировать 15.3.2.

EDIT # 2

Я взял взгляд на выборку для обработки запросов, но я все еще не знаю, как использовать его в моей ситуации. У меня есть среагировать приложение работает на локальном хосте: 3000 и API-интерфейс, работающий на локальном хосте: 8000,/API/v1/системы будет возвращать JSON в следующем формате:

{ systems : [ //list of objects ] } 

Я попытался следующие внутри мой componentDidMount():

fetch(myRequest) 
    .then(result => { 
    console.log(result); 
    //this.setState({ data: result.json() }); 
    }); 

не слишком уверен, что myRequest должна быть (пытается с помощью простой строки в URL: «http://localhost:8000/api/v1/systems»), и я также не уверен, что порты, где приложение под управлением может конфликт или что-то в этом роде.

Answer 1

Вам нужно будет решить, что библиотека выполняет вызовы API. Простым способом является использование fetch, который встроен в современные браузеры. Есть polyfill для покрытия старых. jQuery's AJAX или SuperAgent - две альтернативы. Вот простой пример: fetch. Вам нужно будет изменить URL-адрес запроса.

class Example extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = { data: {} }; 
 
    } 
 
    componentDidMount() { 
 
    var self = this; 
 
    fetch('http://reqres.in/api/users') 
 
     .then(function(response) { 
 
     return response.json() 
 
     }).then(function(data) { 
 
     self.setState({ data },() => console.log(self.state)); 
 
     }); 
 
    } 
 
    render() { 
 
    return (
 
     <div/> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<Example/>, document.getElementById('View'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="View"></div>