Eu acredito que o corpo de resposta do servidor não é Content-Type:application/json
, isto não prejudica em nada em relação a manipulação dos dados recebidos, porém em minha opinião é um erro do backend não te notificar o verdadeiro tipo de conteúdo que será recebido (até mesmo por questão de segurança), pois o Content-Type
diz para o cliente qual é o tipo de conteúdo que a resposta, de fato, tem...
Porém o seu verdadeiro problema como disse acima, você provavelmente não está recebendo um conteúdo do tipo JSON
, com isto você está tentando forçar uma conversão que não pode, neste caso você está tentando passar um conteúdo recebido do servidor do tipo HTML
ou XML
para JSON
, por isto é gerado o error
.
Para saber qual tipo de conteúdo você está recebendo do servidor, faça o seguinte:
Marque a guia "Rede" nas ferramentas do Chrome Dev para ver o tipo de conteúdo da resposta do servidor, ou depure usando este código:
.then(function(response) {
console.log(response);
console.log(response.status);
console.log(response.json());
console.log(response.text());
}).catch(function(err) {
console.log('Fetch Error :-S', err);
});
Para manipular corretamente o conteúdo XML
recebido, siga as instruções:
- 1) Remova o
response.json()
- 2) Para transformar o conteúdo do tipo
text
emXML
noReact
, você pode utilizar a biblioteca react-xml-parser.
Como utilizar a biblioteca react-xml-parser
?
Utilizando este XML
como exemplo:
<?xml version='1.0' encoding='utf-8'?>
<Library>
<Books count='1'>
<Book id='1'>
<Name>Me Before You</Name>
<Author>Jojo Moyes</Author>
</Book>
</Books>
<Music count=1>
<CD id='2'>
<Name>Houses of the Holy</Name>
<Artist>Led Zeppelin</Artist>
</CD>
</Music>
</Library>
Passo 1): Instale a mesma com o comando abaixo no seu terminal:
npm i react-xml-parser
Passo 2): Utilize o código abaixo da biblioteca para converter o conteúdo do tipo text
para XML
e poder manipular o mesmo.
var XMLParser = require('react-xml-parser');
var xml = new XMLParser().parseFromString(xmlText);
console.log(xml);
console.log(xml.getElementsByTagName('Name'));
Métodos que são atualmente suportados pela biblioteca:
parseFromString(string)
: Retorna um objetoXML
conforme descrito no exemplo de saída que representa o texto de entrada.
toString(objeto XML)
: retorna a representação de texto de umXML
de entrada.
getElementsByTagName(string)
: Retorna todas as tags com o mesmo nome da string de entrada do método (sem diferenciação de maiúsculas e minúsculas). para todas as tags possíveis, use '*' como entrada.
Nota
Adicione o código do passo (2) dentro do seu
.then()
, substitua oxmlText
pela suaresponse
e utilize oxml.getElementsByTagName('nomeDaTag')
de acordo com o seu cenário.