CODEWITHSUNDEEP
axiosjsonplaceholder
Paul A.
Paul A.

Reputation: 11

Axios returns gibberish with JSONPlaceholder

I'm trying to learn to use Axios to fetch API data (ultimately to work with the HubSpot API). I've set up a small testing project where I'm trying to retrieve data from JSONPlaceholder and the RapidAPI FamousQuotes API, using fetch and Axios.

Everything works fine for Rapid API using the code examples for Axios and fetch. But when I use the same code to target JSONPlacholder, I get weird results. Here's the code using fetch, which works:

//import node-fetch
const url = 'https://jsonplaceholder.typicode.com/posts';
const options = {
  method: 'GET',
  headers: {}
};
fetch(url, options)
    .then(res => res.json())
    .then(json => console.log(json))
    .catch(err => console.error('error:' + err));

returns

[
  {
    userId: 1,
    id: 1,
    title: 'sunt aut facere repellat provident occaecati excepturi optio reprehenderit',
    body: 'quia et suscipit\n' +
etc ...

However, if I'm using axios i'm getting something strange:

const axios = require('axios')
const url = 'https://jsonplaceholder.typicode.com/posts';
const options = {
  method: 'GET',
  url: url,
  headers: {}
};
axios.request(options).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.error(error);
});

returns gibberish text:

`\x13\x7Fk�H��\x01�\b\x1D>����\x15��T��N\x1B.\x16���r�H�v\x1E �_"9\x18'?1�\x13��J��\\���LA.\t��H\x17���\x10\x9B!�b�\x12\x04R� 9�܅��ڹ�\x0EK�}��%��A\x12�v�\x15Q*�g�dwf�\n` +
    '�ئ��iQ��}���0\t\x18c�?�߾������K\x05�_��/y���\x1E/�\x1D�9��K^�,E+�v\x1C���95��6���xIyu��\x0E�]\x1C��\x07:�w��a�,�{�|��嗼�\n' +
    'R���b6��\x1B�A�P\x1B\n' +
    '�n�]eYG�0�w��^�ك�ee�D$\x15R)��KC�SW3��SK\x0EN-A\x04�\x92\x18���\x12<`D�+��oJ���/"��\x03j\x03�V��\x18�\x14\x11�{��]|�ĺ�@\x1ELE��_B\tZ���\t�w��ӏܠ�\x10赿5B\f���w}RSnSm0ɐ�ϺR\x13r�9.\x0F��3P\x7F�\x03v�\x06��.�^8�%�&\x037&C^��\x0B�\n' +

I've tried forcing the response type to "text" or the encoding to "utf8" with no succes. What's weird is that when targeting 'https://famous-quotes4.p.rapidapi.com/random' with both methods, I get proper responses in both cases. I'm probably missing something but I don't know what ...

Upvotes: 0

Views: 606

Answers (1)

Bench Vue
Bench Vue

Reputation: 9380

In v1.2.1 fixed this error.

Add Accept-Encoding with application/json in Axios Get header. It is defect in v1.2.0

It is known defect.

The default of it is gzip in axios v1.2.0

const axios = require('axios')
const url = 'https://jsonplaceholder.typicode.com/posts';
const options = {
  method: 'GET',
  url: url,
  headers: {
    'Accept-Encoding': 'application/json'
  }
};
axios.request(options).then(function (response) {
    console.log(response.data);
}).catch(function (error) {
    console.error(error);
});

Result

$ node get-data.js
[
  {
    userId: 1,
    id: 1,
    title: 'sunt aut facere repellat provident occaecati excepturi optio reprehenderit',
    body: 'quia et suscipit\n' +
      'suscipit recusandae consequuntur expedita et cum\n' +
      'reprehenderit molestiae ut ut quas totam\n' +
      'nostrum rerum est autem sunt rem eveniet architecto'
  },
  {
    userId: 1,
    id: 2,
    title: 'qui est esse',
    body: 'est rerum tempore vitae\n' +
      'sequi sint nihil reprehenderit dolor beatae ea dolores neque\n' +
      'fugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\n' +
      'qui aperiam non debitis possimus qui neque nisi nulla'
  },
...

Upvotes: 1

Related Questions