1

Estou desenvolvendo um projeto em React (primeira vez que estou trabalhando com React) e estou com dúvidas no momento de executar chamadas ao servidor, seja um GET ou POST.

Eu até consegui executar essa tarefa, porém de modo meio "limitado", pois não estou conseguindo enviar estrutura de datas mais complexas, como um objeto JSON.

Atualmente estou utilizando fetch(), deste modo:

// Funcionando normalmente dentro do esperado
fetch(DEFAULT_URL)
.then(function(response) {
    if ( response.status !== 200 ) {
        console.log('Status Code: ' +  response.status);
        return;
    }

    response.json().then(function(data) {
        console.log(data);
    });
})

Porém, ao executar um POST eu só consigo deste modo:

fetch(POST_URL, {
    method: 'POST',
    headers: {
        "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
    },
    body: "name= Nome completo"
})
.then(function(response) {
    if ( response.status !== 200 ) {
        console.log('Status Code: ' +  response.status);
        return;
    }

    response.json().then(function(data) {
        console.log(data);
    });
})

O que não possibilita o envio de um objeto JSON, se utilizar ele apresenta erro e não executa a chamada.


Existe algum outro método, ou um método correto/melhor de se executar essas chamadas com React? Não precisa ser com fetch, só estou utilizando este método pois não consegui encontrar outro.

O objetivo seria tanto obter dados do banco de dados, como postagens de notícias, dados da empresa, etc. Bem como o envio de informações para cadastro no banco de dados, como cadastro de usuário, entre outros.

4
  • Eu uso o método $.ajax do jQuery ou as shorthands get, post, put e delete. Na dúvida, troque de biblioteca de Ajax ou faça umas funções no braço mesmo. Ah! E React não tem nenhum método específico, mas é boa prática incluir chamadas dessas no componentDidMount.
    – Daniel
    Commented 1/04/2017 às 19:24
  • @Daniel Pretendo continuar somente usando React (ou algum plugin para o mesmo). Não pretendo fazer load de jQuery somente para executar as chamadas ajax. Alguma outra sugestão? Sobre o local de onde inserir as chamadas eu já li alguns materiais que guiam para isso. Commented 1/04/2017 às 19:26
  • Então, acho super válido criar umas funções simples usando o XMLHttpRequest logo. developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
    – Daniel
    Commented 1/04/2017 às 19:35
  • Ou então: ao invés de mandar um objeto JSON, manda só uma string usando o JSON.Stringify no objeto que você quer mandar.
    – Daniel
    Commented 1/04/2017 às 19:36

1 Resposta 1

1

Apesar de recomendações quanto ao uso do método fetch, optei por utilizar outro serviço de chamadas AJAX, devido a questões de compatibilidade e uso de promise. O serviço que estou utilizando é o axios que foi extremamente fácil de integrar ao projeto e possui um uso muito simples.

Tudo que precisei fazer foi o download do serviço, feito através do npm, e importação nos componentes que forem necessários, por exemplo:

import axios from "axios";

// Método GET
axios.get('/minha/url').then(function (response) {
    console.log('Success: ', response);

}).catch(function (error) {
    console.log('Error: ', error);
});

// Método POST
axios.post('/minha/outra/url', data).then(function (response) {
    console.log('Success: ', response);

}).catch(function (error) {
    console.log('Error: ', error);
});

// Múltiplas requisições
function carregaUsuario() {
    return axios.get('minha/url/usuario');
}

function carregaEndereco() {
    return axios.get('minha/url/endereco');
}

axios.all([carregaUsuario(), carregaEndereco()]).then(
    axios.spread(function (usuario, endereco) {
        // Retorno das requisições
    })
);

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .