axios transformResponse returning undefined

Question

With the following I get the expected response.data value:

axios({
  method,
  url
}).then(response => { console.log(response) })

However, when I add the transformResponse property as follows I get a response.data value of undefined:

axios({
  method,
  url,
  transformResponse: [(data) => {
    return data
  }]
}).then(response => { console.log(response) })

Can someone please tell me what I'm missing here! Thanks

Answer 1

You can check the below sample to safe parse. transformResponse get data as raw staring so u can parse it.

const instance = axios.create({
  baseURL: baseURL,
  transformResponse: [
    (data) => {
      let resp;
      try {
        resp = JSON.parse(data);
      } catch (error) {
        throw Error(
          `[requestClient] Error parsingJSON data - ${JSON.stringify(
            error
          )}`
        );
      }
      if (resp.status === "success") {
        return resp.data;
      } else {
        throw Error(`Request failed with reason -  ${data}`);
      }
    },
  ],
});

Else you can use an interceptor to simplify it.

//const axios = require("axios");
const jsonInterceptor = [
  (response) => response.data,
  (error) => Promise.reject(error),
];
function jsonClient() {
  const client = axios.create();
  client.interceptors.response.use(...jsonInterceptor);
  return client;
}
// Page 1

const jhttp = jsonClient();
jhttp
  .get("https://jsonplaceholder.typicode.com/todos/1")
  .then((data) => console.log(data));

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>

Answer 2

I suggest you to use interceptors since they are more clean

Interceptors work as a middlware on your requests

remove transformResponse and add this

axios.interceptors.response.use(function (response) {
  return response.data;
});

axios({
  method,
  url,
}).then(response => { console.log(response) })