Jak zadzwonić po odpoczynek z kodu ReactJS?


126

Jestem nowy w ReactJS i UI i chciałem wiedzieć, jak wykonać proste wywołanie POST oparte na REST z kodu ReactJS.

Gdyby był jakiś przykład, byłby naprawdę pomocny.


6
Czy mógłbyś wybrać odpowiedź, która ci pomogła?
Sokrates

Odpowiedzi:


215

Prosto z dokumentacji React :

fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  })
})

(To jest wysyłanie JSON, ale możesz też zrobić na przykład formularz wieloczęściowy).


4
Musisz go zainstalować i zaimportować . Nie zapominaj, że fetch()funkcja nie zwraca danych , po prostu zwraca obietnicę .
Malvolio,

1
haha @Divya, właśnie miałem ten sam komentarz, zanim przeczytałem twój. Nie jestem pewien, czy umieścić go w React.createClass. Czy moglibyśmy też prosić o link do dokumentów reagowania? Próbowałem przeszukać ich witrynę ( facebook.github.io/react/docs/hello-world.html ) bezskutecznie.
Tyler L

1
Czy możemy zmodyfikować oryginalną odpowiedź, aby uwzględnić import?
Tyler L

5
IMO, @amann ma poniżej lepszą odpowiedź . Ta odpowiedź sugeruje, że fetchjest wbudowana w React, a nie jest, i nie ma linku do dokumentów, do których się odwołuje. fetchjest (w czasie pisania) eksperymentalnym API opartym na Promise . Aby zachować zgodność z przeglądarkami, będziesz potrzebować wypełnienia babel .
chris

2
Zauważ, że pochodzi to z dokumentacji React Native, a nie z dokumentacji React JS, ale możesz również użyć Fetch_API w React JS. facebook.github.io/react-native/docs/network.html
Pål Brattberg

23

React tak naprawdę nie ma opinii na temat sposobu wykonywania połączeń REST. Zasadniczo do tego zadania możesz wybrać dowolną bibliotekę AJAX.

Najłatwiejszym sposobem ze zwykłym starym JavaScriptem jest prawdopodobnie coś takiego:

var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
request.send(data);

W nowoczesnych przeglądarkach można również używać fetch.

Jeśli masz więcej komponentów, które wykonują wywołania REST, sensowne może być umieszczenie tego rodzaju logiki w klasie, której można używać w komponentach. Na przykładRESTClient.post(…)


5
Dla mnie jest to najlepsze rozwiązanie, bo React nie ma nic zbudowany w. Trzeba albo do importu fetchlub superagentlub jQuerylub axioslub coś innego, co nie jest częścią „wanilia React”, aby zrobić coś innego niż to, co napisali powyżej .
vapcguy

Wygląda na to, że jeśli używasz kolby, działa dobrze, JSON.stringify({"key": "val"})a następnie po stronie kolby zróbrequest.get_json()
Pro Q

Tak, jeśli publikujesz JSON, musisz JSON.stringifyto najpierw.
amann

19

Inne ostatnio popularne pakiety to: axios

Zainstalować : npm install axios --save

Proste żądania oparte na obietnicy


axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

9

możesz zainstalować superagenta

npm install superagent --save

następnie do wykonania połączenia pocztowego z serwerem

import request from "../../node_modules/superagent/superagent";

request
.post('http://localhost/userLogin')
.set('Content-Type', 'application/x-www-form-urlencoded')
.send({ username: "username", password: "password" })
.end(function(err, res){
console.log(res.text);
});  

5

Od 2018 roku i później masz bardziej nowoczesną opcję, która polega na włączeniu async / await do aplikacji ReactJS. Można użyć opartej na obietnicy biblioteki klienta HTTP, takiej jak axios. Przykładowy kod jest podany poniżej:

import axios from 'axios';
...
class Login extends Component {
    constructor(props, context) {
        super(props, context);
        this.onLogin = this.onLogin.bind(this);
        ...
    }
    async onLogin() {
        const { email, password } = this.state;
        try {
           const response = await axios.post('/login', { email, password });
           console.log(response);
        } catch (err) {
           ...
        }
    }
    ...
}

z jakiegoś powodu nodejs interpretuje await-SyntaxError: await is a reserved word (33:19)
prayagupd

@prayagupd jakiej wersji węzła używasz?
Kevin Le - Khnle

5

Myślę, że w ten sposób też w normalny sposób. Ale przepraszam, nie mogę opisać po angielsku ((

    submitHandler = e => {
    e.preventDefault()
    console.log(this.state)
    fetch('http://localhost:5000/questions',{
        method: 'POST',
        headers: {
            Accept: 'application/json',
                    'Content-Type': 'application/json',
        },
        body: JSON.stringify(this.state)
    }).then(response => {
            console.log(response)
        })
        .catch(error =>{
            console.log(error)
        })
    
}

https://googlechrome.github.io/samples/fetch-api/fetch-post.html

fetch ('url / questions', {metoda: 'POST', headers: {Accept: 'application / json', 'Content-Type': 'application / json',}, body: JSON.stringify (this.state) }). then (response => {console.log (odpowiedź)}) .catch (błąd => {console.log (błąd)})



0

Oto zmodyfikowana funkcja util (kolejny post na stosie) do pobierania i wysyłania obu. Utwórz plik Util.js.

let cachedData = null;
let cachedPostData = null;

const postServiceData = (url, params) => {
    console.log('cache status' + cachedPostData );
    if (cachedPostData === null) {
        console.log('post-data: requesting data');
        return fetch(url, {
            method: 'POST',
            headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json',
            },
            body: JSON.stringify(params)
          })
        .then(response => {
            cachedPostData = response.json();
            return cachedPostData;
        });
    } else {
        console.log('post-data: returning cachedPostData data');
        return Promise.resolve(cachedPostData);
    }
}

const getServiceData = (url) => {
    console.log('cache status' + cachedData );
    if (cachedData === null) {
        console.log('get-data: requesting data');
        return fetch(url, {})
        .then(response => {
            cachedData = response.json();
            return cachedData;
        });
    } else {
        console.log('get-data: returning cached data');
        return Promise.resolve(cachedData);
    }
};

export  { getServiceData, postServiceData };

Użycie jak poniżej w innym komponencie

import { getServiceData, postServiceData } from './../Utils/Util';

constructor(props) {
    super(props)
    this.state = {
      datastore : []
    }
  }

componentDidMount = () => {  
    let posturl = 'yoururl'; 
    let getdataString = { name: "xys", date:"today"};  
    postServiceData(posturl, getdataString)
      .then(items => { 
        this.setState({ datastore: items }) 
      console.log(items);   
    });
  }

-4

Oto przykład: https://jsfiddle.net/69z2wepo/9888/

$.ajax({
    type: 'POST',
    url: '/some/url',
    data: data
  })
  .done(function(result) {
    this.clearForm();
    this.setState({result:result});   
  }.bind(this)
  .fail(function(jqXhr) {
    console.log('failed to register');
  });

Używał jquery.ajaxmetody, ale można ją łatwo zastąpić bibliotekami opartymi na AJAX, takimi jak axios, superagent lub fetch.


Wielkie dzięki za przykład :). Chciałem też dowiedzieć się, czy moja usługa oczekuje danych w formacie JSON. Jakie zmiany byłyby wymagane? Wszelkie informacje byłyby naprawdę pomocne. Więc kiedy używam polecenia curl, aby osiągnąć punkt końcowy, jest to podobne do curl -v -X POST localhost: 8080 / myapi / ui / start -d '{"Id": "112", "User": "xyz"}' więc jak mogę zadzwonić do takiej usługi.
Divya,

utwórz zmienną o nazwie data '{"Id":"112","User":"xyz"}'i zmień adres URL na localhost: 8080 / myapi / ui / start, to wszystko, po pomyślnym wywołaniu XHR wylądujesz w gotowej metodzie i będziesz mieć dostęp do swoich danych za pośrednictwem wyniku własność.
Sanyam Agrawal
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.