Comment faire un appel de repos à partir du code ReactJS?

126

Je suis nouveau dans ReactJS et UI et je voulais savoir comment faire un simple appel POST basé sur REST à partir du code ReactJS.

S'il y a un exemple, ce serait vraiment utile.

Divya
la source
6
Pourriez-vous s'il vous plaît choisir la réponse qui vous a aidé?
Socrates

Réponses:

215

Directement à partir des documents React :

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

(Il s'agit de publier du JSON, mais vous pouvez également faire, par exemple, un formulaire en plusieurs parties.)

Malvolio
la source
4
Vous devez l' installer et l'importer . N'oubliez pas que la fetch()fonction ne renvoie pas les données , elle renvoie simplement une promesse .
Malvolio
1
haha @Divya, j'étais sur le point de faire le même commentaire avant de lire le vôtre. Je ne sais pas s'il faut le mettre ou non dans React.createClass. Aussi, pourrions-nous avoir un lien vers les documents de réaction? J'ai essayé de rechercher leur site ( facebook.github.io/react/docs/hello-world.html ) sans succès.
Tyler L
1
Pouvons-nous s'il vous plaît modifier la réponse originale pour inclure l'importation?
Tyler L
5
OMI, @amann a une meilleure réponse ci-dessous . Cette réponse implique qu'il fetchest intégré à React, ce qui n'est pas le cas, et qu'il n'y a pas de lien vers les documents référencés. fetchest (au moment de la rédaction) une API expérimentale basée sur Promise . Pour la compatibilité du navigateur, vous aurez besoin d' un polyfill babel .
chris
2
Notez que cela provient de la documentation React Native, pas de la documentation React JS, mais vous pouvez également utiliser Fetch_API dans React JS. facebook.github.io/react-native/docs/network.html
Pål Brattberg
23

React n'a pas vraiment d'opinion sur la façon dont vous passez des appels REST. En gros, vous pouvez choisir le type de bibliothèque AJAX que vous souhaitez pour cette tâche.

Le moyen le plus simple avec l'ancien JavaScript est probablement quelque chose comme ceci:

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

Dans les navigateurs modernes, vous pouvez également utiliser fetch.

Si vous avez plus de composants qui effectuent des appels REST, il peut être judicieux de placer ce type de logique dans une classe qui peut être utilisée entre les composants. Par exempleRESTClient.post(…)

Amann
la source
5
Pour moi, c'est la meilleure réponse, car React n'a rien de intégré. Vous devez soit importer fetchou superagentou jQueryou axiosou quelque chose d'autre qui ne fait pas partie de "vanilla React" pour faire autre chose que ce qui est affiché ci-dessus .
vapcguy
Il semble que si vous utilisez flask, cela fonctionne bien à faire JSON.stringify({"key": "val"}), puis du côté du flacon à fairerequest.get_json()
Pro Q
Oui, si vous publiez du JSON, vous devez d' JSON.stringifyabord le faire.
amann le
19

Un autre paquet récemment populaire est: axios

Installer: npm install axios --save

Demandes basées sur des promesses simples


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

vous pouvez installer superagent

npm install superagent --save

puis pour faire un appel au serveur

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);
});  
Chandrakant Thakkar
la source
5

À partir de 2018 et au-delà, vous disposez d'une option plus moderne qui consiste à incorporer async / await dans votre application ReactJS. Une bibliothèque client HTTP basée sur la promesse telle qu'axios peut être utilisée. L'exemple de code est donné ci-dessous:

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) {
           ...
        }
    }
    ...
}
Kevin Le - Khnle
la source
pour une raison quelconque, nodejs interprète await-SyntaxError: await is a reserved word (33:19)
prieragupd
@prayagupd quelle version de nœud utilisez-vous?
Kevin Le - Khnle
5

Je pense que de cette façon aussi une manière normale. Mais désolé, je ne peux pas décrire en anglais ((

    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', {méthode: 'POST', headers: {Accept: 'application / json', 'Content-Type': 'application / json',}, body: JSON.stringify (this.state) }). then (réponse => {console.log (réponse)}) .catch (erreur => {console.log (erreur)})

Monsieur amusant
la source
2

Voici une liste de comparaison des bibliothèques ajax basée sur les fonctionnalités et le support. Je préfère utiliser fetch uniquement pour le développement côté client ou isomorphic-fetch pour une utilisation à la fois côté client et développement côté serveur.

Pour plus d'informations sur isomorphic-fetch vs fetch

user3603575
la source
0

Voici une fonction util modifiée (un autre article sur la pile) pour obtenir et publier les deux. Créez le fichier 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 };

Utilisation comme ci-dessous dans un autre composant

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);   
    });
  }
shailesh gavathe
la source
-4

Voici un exemple: 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');
  });

Il utilisait une jquery.ajaxméthode mais vous pouvez facilement la remplacer par des bibliothèques basées sur AJAX comme axios, superagent ou fetch.

Sanyam Agrawal
la source
Merci beaucoup pour l'exemple :). Je voulais également savoir si mon service attend des données au format JSON, quelles modifications seraient alors nécessaires? Toute sorte d'information serait vraiment utile. Ainsi, lorsque j'utilise la commande curl pour atteindre le point de terminaison, c'est comme curl -v -X POST localhost: 8080 / myapi / ui / start -d '{"Id": "112", "User": "xyz"}' alors comment puis-je appeler un tel service.
Divya le
créez une variable appelée data avec '{"Id":"112","User":"xyz"}'et changez l'URL en localhost: 8080 / myapi / ui / start, c'est à peu près tout, une fois l'appel XHR réussi, vous arriverez dans la méthode done et vous aurez accès à vos données via le résultat propriété.
Sanyam Agrawal