9
respostas

retorno de texto no fetch

Olá Flávio,

pesquisei na net e não consegui encontrar de forma precisa como faço um retorno de texto usando a fetch api sem me trazer aqueles caracteres estranhos. Tenho uma aplicação que preciso retornar texto, coloquei como abaixo mas não deu certo. O resultado é parecido com isso:

... Relat�rio de Auditoria ...

class HttpService {

    _handleErrors(res) {
        if (!res.ok) throw new Error(res.statusText);
        return res;
    }

    get(url) {

      var Headers = {
        contentType: "text/html; charset=windows-1251"
      };    

      return fetch(url, Headers)
            .then(res => this._handleErrors(res))
            .then(res => res.text());
    }
9 respostas

Olá! Você disse:

em me trazer aqueles caracteres estranhos.

Se ele traz caracteres estranhos é problema de encondig do seu servidor, não é problema da API Fetch ou do JavaScript.

Vê ai no seu backend como garantir que a resposta use o mesmo enconding utilizado pela sua página HTML. Se forem diferentes, você terá problema, principalmente se for exibir essa informação para o usuário.

Olhando sua tentativa de fazer " charset=windows-1251", chuto que você esta usando o sistema operacional windows. A última versão que usei desse sistema operacional foi XP (acho que era esse nome). Porém, se não me engano, Windows não curte muito UTF-8 e usa como encondig latin1 ou esse ai que você esta usando. Sendo assim, um chute meu para resolver seu problema é na sua página HTML usar: <meta charset="latin1"> ou <meta charset="windows-1251">. Porém, se você salvou o arquivo como UTF-8, vai continuar com o mesmo problema, pois deve haver uma paridade entre todos os encondings (da página HTML, e do JSON enviado).

Sucesso e bom estudo.

Flávio, na verdade estou usando charset=iso-8859-1

coloquei o 1251 em um copiar colar da internet e não prestei atenção. o charset da página é o 8859-1 e o arquivo foi salvo desta maneira, ou seja, todos os encondings estão iguais.

Não sei se reparou no código mas não estou solicitando a resposta em JSON, mas sim em text.

O que não encontrei "corretamente" na net é de que forma solicito que a api me retorne um conteúdo no enconding que desejo. O que eu fiz está correto (headers)?

Opa, se a dúvida é como adicionar informações no header, eu faço assim:

// crio uma instâncias de Headers
const myHeaders = new Headers();
// adicione a chave e o valor 
myHeaders.set('Content-Type', 'text/html;charset=windows-1251');

// Não posso passar esse headers direto, tem que se passado como valor de um objeto cuja a propriedade de chama headers:
const config = { headers: myHeaders };

  return fetch(url, config)
            .then(res => this._handleErrors(res))
            .then(res => res.text());

Pelo o que eu vi no seu código, você não esta passando a informação no formato esperado.

Se quiser saber com mais detalhes, tem um post meu sobre o assunto:

http://cangaceirojavascript.com.br/isolando-acesso-api-classes-servico/

Bom, se no back tá tudo certo para responder com o content type, não terá problema com essa alteração.

Sucesso e bom estudo.

Na verdade está me retornando caracteres "?" em todos os acentos e ç. Ou seja, não está reconhecendo o enconding que estou solicitando, nem "iso" e nem "utf". Preciso saber como informar isso a api, estou meio perdido, tentei várias soluções que busquei em fóruns mas sem sucesso.

    get(url) {

        return fetch(url, {
            method: "GET",
            headers: {
                "Content-Type": "text/plain",
                "encoding": "ISO-8859-1"
            }            
        })
        .then(res => this._handleErrors(res))
        .then(res => res.text());
    }

Para seu backend devolver os dados no enconding que você esta enviando, ele tem que suportar isso, ele não faz por padrão. Como fazer isso, depende de backend para backend.

Já tentou usar o TextEncoder e o TextDecoder da API do navegador para realizar essa conversão no client? Não é o ideal, mas pode ser que resolva.

Eu raramente uso esses artefatos, se não me falha a memória eles funcionam assim (você precisa testar). Segue um exemplo que fiz de cabeça:

const text = 'Flávio Almeida'; // o texto que veio da sua API
const win1251decoder = new TextDecoder('windows-1251'); // o padrão é UTF-8 se você não falar nada
const win1251Encoder = new TextEncoder('windows-1251'); // o padrão é UTF-8
const textAsByteArray = win1251Encoder.encode(text); // pego o texto e transformo para um array de byes
// como o texto agora esta em bytes, possao decodificá-lo para o encoding que eu desejo
const utfDecoder = new TextDecoder(); // o padrão é UTF, não modifiquei
console.log(utfDecoder.decode(textAsByteArray)); // se não me engano, eu vou converter para UTF-8, pois os bytes são neutros

Tomara que ajude!

então, acho que o problema não é o enconding, o arquivo do backend já está retornando o enconding corretamente. Troquei tudo para utf-8 e continua retornando "?" no lugar dos acentos.

Se você diz que o problema não é no encoding, não faço ideia do que possa ser, porque desconfio que o problema seja de enconding.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software