web-dev-qa-db-fra.com

Comment faire une pause post appel depuis le code ReactJS?

Je suis nouveau à réagirJS et UI et je voulais savoir comment faire un simple repos reposant POST appel de code reaJS.

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

Merci.

reactjsreact-jsxreactjs-fluxreactjs-native
104
Divya

Directement du documents React :

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

(Cela consiste à publier du code JSON, mais vous pouvez également utiliser, par exemple, multipart-form.)

177
Malvolio

React n'a pas vraiment d'opinion sur la manière dont vous passez REST. En gros, vous pouvez choisir le type de bibliothèque que vous préférez pour la tâche AJAX.

La méthode la plus simple avec du vieux JavaScript simple est probablement la suivante:

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 appelants REST, il peut être judicieux de placer ce type de logique dans une classe utilisable dans tous les composants. Par exemple. RESTClient.post(…)

21
amann

Un autre paquet récemment populaire est: axios

Installer: npm install axios --save

Requêtes simples basées sur des promesses

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

vous pouvez installer superagent

npm install superagent --save

puis pour faire un appel post 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);
});
9
Chandrakant Thakkar

À partir de 2018, vous disposez d'une option plus moderne qui consiste à incorporer async/wait dans votre application ReactJS. Une bibliothèque client HTTP basée sur les promesses, telle que 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) {
           ...
        }
    }
    ...
}
5
Kevin Le - Khnle

Je pense que 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', en-têtes: {Accepter: 'application/json', 'Content-Type': 'application/json',}, corps: JSON.stringify (this.state) }). then (response => {console.log (réponse)}) .catch (error => {console.log (error)})

3
Mr Fun

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

Pour plus d'informations sur isomorphic-fetch vs fetch

2
user3603575