Como fazer uma chamada pós-descanso a partir do código ReactJS?


126

Eu sou novo no ReactJS e na interface do usuário e queria saber como fazer uma simples chamada POST baseada em REST a partir do código ReactJS.

Se houver algum exemplo presente, seria realmente útil.


6
Você poderia escolher a resposta que o ajudou?
Sócrates

Respostas:


215

Diretamente dos documentos do React :

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

(Isso está postando JSON, mas você também pode fazer, por exemplo, formulário de várias partes).


4
Você precisa instalá-lo e importá-lo . Não se esqueça, a fetch()função não retorna os dados , apenas retorna uma promessa .
Malvolio 21/07

1
haha @Divya, eu estava prestes a fazer o mesmo comentário antes de ler o seu. Não tenho certeza se deve ou não colocá-lo em React.createClass. Além disso, poderíamos ter um link para os documentos de reação? Tentei pesquisar no site deles ( facebook.github.io/react/docs/hello-world.html ) sem êxito.
Tyler L

1
Podemos modificar a resposta original para incluir a importação?
Tyler L

5
IMO, @amann tem uma resposta melhor abaixo . Esta resposta implica que fetchestá embutido no React, o que não é, e não há link para os documentos mencionados. fetché (no momento da redação) uma API experimental baseada em promessa . Para compatibilidade com o navegador, você precisará de um polyfill babel .
Chris

2
Observe que isso é proveniente dos documentos React Native, não dos documentos React JS, mas você também pode usar Fetch_API no React JS. facebook.github.io/react-native/docs/network.html
Pål Brattberg

23

O React realmente não tem uma opinião sobre como você faz chamadas REST. Basicamente, você pode escolher qualquer tipo de biblioteca AJAX que desejar para esta tarefa.

A maneira mais fácil com o JavaScript antigo simples é provavelmente algo como isto:

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

Nos navegadores modernos, você também pode usar fetch.

Se você tiver mais componentes que fazem chamadas REST, pode fazer sentido colocar esse tipo de lógica em uma classe que possa ser usada entre os componentes. Por exemploRESTClient.post(…)


5
Para mim, esta é a melhor resposta, porque Reagir não tem nada construído dentro. Você quer ter de importação fetchou superagentou jQueryou axiosou qualquer outra coisa que não faz parte do "vanilla Reagir", a fim de fazer outra coisa senão o que é postado acima .
vapcguy

Parece que se você estiver usando o balão, ele funciona bem para fazer JSON.stringify({"key": "val"})e, em seguida, no lado do balão, #request.get_json()
Pro Q

Sim, se você estiver postando JSON, precisará JSON.stringifyprimeiro.
21419

19

Outro pacote recentemente popular é: axios

Instalar: npm install axios --save

Pedidos simples baseados em promessas


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

9

você pode instalar superagent

npm install superagent --save

depois, para fazer uma chamada posterior ao servidor

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

A partir de 2018 e além, você tem uma opção mais moderna que é incorporar async / wait no seu aplicativo ReactJS. Uma biblioteca de cliente HTTP baseada em promessa, como axios, pode ser usada. O código de exemplo é dado abaixo:

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) {
           ...
        }
    }
    ...
}

para alguns nodejs razão que interpretam await-SyntaxError: await is a reserved word (33:19)
prayagupd

@prayagupd qual versão do nó você está usando?
Kevin Le - Khnle

5

Penso assim também de maneira normal. Desculpe, não posso descrever em inglês ((

    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

busca ('url / questions', {method: 'POST', headers: {Accept: 'application / json', 'Content-Type': 'application / json',}, body: JSON.stringify (this.state) }). then (response => {console.log (response)}) .catch (erro => {console.log (erro)})



0

Aqui está uma função util modificada (outra publicação na pilha) para obter e publicar as duas. Crie o arquivo 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 };

Uso como abaixo em outro componente

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

Aqui está um exemplo: 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');
  });

Ele usou o jquery.ajaxmétodo, mas você pode substituí-lo facilmente por bibliotecas baseadas em AJAX, como axios, superagent ou fetch.


Muito obrigado pelo exemplo :). Também queria entender se meu serviço espera dados no formato JSON. Então, que alterações seriam necessárias? Qualquer tipo de informação seria realmente útil. Portanto, quando estou usando o comando curl para acessar o terminal, é como curl -v -X POST localhost: 8080 / myapi / ui / start -d '{"Id": "112", "User": "xyz"}' Então, como posso chamar esse serviço?
Divya

crie uma variável chamada data com '{"Id":"112","User":"xyz"}'e altere a URL para localhost: 8080 / myapi / ui / start, é isso, uma vez que a chamada XHR for bem-sucedida, você continuará no método concluído e terá acesso a seus dados através do resultado propriedade.
Sanyam Agrawal
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.