I think I've found a way to do what I want
import axios, { AxiosResponse } from "axios";
class BadResponseFormatError extends Error {
constructor (public response: AxiosResponse) {
super("Malformed response");
}
}
axios.interceptors.response.use(
(response: AxiosResponse) => {
if (response.headers["content-type"] !== "application/json") {
throw new BadResponseFormatError(response);
}
try {
response.data = JSON.parse(response.data);
return response;
} catch {
throw new BadResponseFormatError(response);
}
}
)
axios.get('http://cataas.com/cat?html=true', {responseType: "json", transformResponse: (body) => body})
.then((res) => console.log(`Got response with data ${JSON.stringify(res.data)}`))
.catch((err) => {
// This could also be moved to a response interceptor,
// I just did it here for the sake of demonstration
if (err instanceof BadResponseFormatError) {
console.error(`Got a bad format response with status code ${err.response.status}: ${err.response.data}`)
} else {
console.error(`Got some other error: ${err}`)
}
}
)
A brief summary of what's going on
- I'm using
transformResponsewith a value of(body) => body, as presented in this answer. This allows the response interceptor to actually get at the textual response data. This was the key to make this work. - I then delay the actual parse to the response interceptor, which allows me to error handle the parse manually.
- From there, I can create a custom exception that contains the original response, which I then use in my error handling.
Top answer 1 of 2
4
I think I've found a way to do what I want
import axios, { AxiosResponse } from "axios";
class BadResponseFormatError extends Error {
constructor (public response: AxiosResponse) {
super("Malformed response");
}
}
axios.interceptors.response.use(
(response: AxiosResponse) => {
if (response.headers["content-type"] !== "application/json") {
throw new BadResponseFormatError(response);
}
try {
response.data = JSON.parse(response.data);
return response;
} catch {
throw new BadResponseFormatError(response);
}
}
)
axios.get('http://cataas.com/cat?html=true', {responseType: "json", transformResponse: (body) => body})
.then((res) => console.log(`Got response with data ${JSON.stringify(res.data)}`))
.catch((err) => {
// This could also be moved to a response interceptor,
// I just did it here for the sake of demonstration
if (err instanceof BadResponseFormatError) {
console.error(`Got a bad format response with status code ${err.response.status}: ${err.response.data}`)
} else {
console.error(`Got some other error: ${err}`)
}
}
)
A brief summary of what's going on
- I'm using
transformResponsewith a value of(body) => body, as presented in this answer. This allows the response interceptor to actually get at the textual response data. This was the key to make this work. - I then delay the actual parse to the response interceptor, which allows me to error handle the parse manually.
- From there, I can create a custom exception that contains the original response, which I then use in my error handling.
2 of 2
3
I think there is some confusion about the term "JSON"
I think what you mean is that you want the result from Axios to be a Javascript object, not a JSON string. The confusion is common because we often call Javascript objects "JSON objects" as a slang term.
If you type the following into the console, the resulting value of a will be a Javascript object:
const a = { x: 10}
Some people would call a a JSON object, but strictly speaking it is not. The JSON representation of a is the following string:
{ "x": 10 }
What Axios returns to you_ not a JSON string, but a Javascript object
This contains various pieces of information, in different properties of the object. Important to us here are:
The "data" property, which may be a string containing HTML, or a Javascript object, or something else.
Within the "headers" property, the "content-type" subproperty. This will begin with "application/json" if
datais a Javascript object, and "text/html" ifdatais an HTML response.
Here is your code showing the content-type of the server response explicitly.
axios.get('http://cataas.com/cat?html=true')
.then(response => {
console.log("Example of an API returning an HTML response")
const contentType = response.headers["content-type"];
const data = response.data;
console.log("Type of response data is:", contentType)
console.log("Because it is a long string, I am just going to show a few characters of it:", data.slice(0, 40))
})
.catch((err) => console.log(`Error: ${err}`))
axios.get('https://dummyjson.com/products/1')
.then(response => {
console.log("Example of an API returning an JSON response")
const contentType = response.headers["content-type"];
const data = response.data;
console.log("Type of response data is:", contentType)
console.log("Because it is a small object, I am going to show it all:", data)
})
.catch((err) => console.log(`Error: ${err}`))<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.4/axios.min.js" integrity="sha512-LUKzDoJKOLqnxGWWIBM4lzRBlxcva2ZTztO8bTcWPmDSpkErWx0bSP4pdsjNH8kiHAUPaT06UXcb+vOEZH+HpQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>The http://cataas.com/cat?html=true API returns an HTML string
Axios faithfully gives you that string in the data property.
<!DOCTYPE html>
<html lang="en">
<header>
<meta charset="utf-8">
</header>
<body>
<img alt="ltBmKwnyGcagdHo3" src="/cat/ltBmKwnyGcagdHo3">
</body>
</html>
The https://dummyjson.com/products/1 API returns a JSON string to Axios
Axios automatically converts that JSON string into a Javascript object for you.
{"id":1,"title":"iPhone 9","description":"An apple mobile which is nothing like apple","price":549,"discountPercentage":12.96,"rating":4.69,"stock":94,"brand":"Apple","category":"smartphones","thumbnail":"https://i.dummyjson.com/data/products/1/thumbnail.jpg","images":["https://i.dummyjson.com/data/products/1/1.jpg","https://i.dummyjson.com/data/products/1/2.jpg","https://i.dummyjson.com/data/products/1/3.jpg","https://i.dummyjson.com/data/products/1/4.jpg","https://i.dummyjson.com/data/products/1/thumbnail.jpg"]}
One way to achieve what you want:
Read
response.headers["content-type"]If it begins with
application/json, then you are in luck: just treatresponse.dataas a Javascript objectIf it begins with
text/html, despite you having requested a JSON, then something has gone wrong. You could readresponse.dataas HTML, and look for whether the server said anything helpful.
I don't like the idea of wrapping everything in a try/catch, and picking up a failed JSON.parse. We are already being given information on whether response.data is an object or not, so let's use that.
You could even write a wrapper for Axios
That could do the above, so you only have to write the code once.
Axios
axios-http.com › docs › intro
Getting Started | Axios Docs
Automatic JSON data handling in ... FormData and Blob (including node.js) Client side support for protecting against XSRF · Using npm: $ npm install axios ·...
Videos
#11 Working with JSON, Fetch, and Axios | API Integration in ...
09:44
React JS Tutorial - 15 - Get Data from API in React for Beginners ...
Get API REST - Récupérer des données JSON avec AXIOS ...
Axios - GET Request
07:44
Consumir servicios en React con Axios - ejemplo práctico Json ...
15:02
Axios + Express: (JSON) Request Bodies - YouTube
Reddit
reddit.com › r/reactjs › how to get json from local file with axios get request?
r/reactjs on Reddit: How to get json from local file with Axios get request?
November 5, 2022 -
My json file "testing.json" is in the public folder, the line I have is
axios.get('testing.json').then(.....but it can't read the file for some reason. I uploaded the exact same json file to a website and put the url in the get request, and it worked fine, so the file isn't the issue. I think it's a problem with how I'm calling the file with axios.get but I've looked at other posts on various online forums and can't figure it out. Does axios not work with local files?
Top answer 1 of 2
3
If you're using a bundler, you should be able to import the json file directly.
2 of 2
1
Can't you just import the json directly into your file? If you really want to fetch it over a network request for some reason, you're gonna have to serve the file from a static folder and then fetch it via its endpoint
GitHub
github.com › axios › axios
GitHub - axios/axios: Promise based HTTP client for the browser and node.js · GitHub
3 days ago - By default, axios serializes JavaScript objects to JSON.
Starred by 109K users
Forked by 11.6K users
Languages JavaScript 86.4% | TypeScript 11.6% | HTML 2.0%
Mastering JS
masteringjs.io › tutorials › axios › json
How to Use JSON with Axios - Mastering JS
April 21, 2021 - const axios = require('axios'); ... instanceof Object; // true · When making a POST or PUT request, Axios will automatically parse the data to JSON, provided you are sending an object, and make the necessary adjustments ...
freeCodeCamp
forum.freecodecamp.org › javascript
How to filter the JSON response coming from axios request?
December 18, 2022 - hello, im trying to filter and organize a Json response from axios.get, im requesting a soccer standings table i ve succeded in returning the data but is bit messy, im using node express, axios, and cheerio as you can see on my code below this is my code: const express = require('express'); const PORT = 8888 const app = express(); const cheerio = require('cheerio'); const axios = require("axios"); app.get('/td', async (req, res) => { var results = []; try { const url = "https://ww...
CodeSandbox
codesandbox.io › examples › package › axios-get-json-response
axios-get-json-response examples - CodeSandbox
AboutA small utility for validating an axios response and parsing it as JSON, *with* distinguishable error types26Weekly Downloads
npm
npmjs.com › package › axios-get-json-response
axios-get-json-response - npm
August 30, 2019 - A simple utility for checking status codes and parsing JSON data from Axios responses.
» npm install axios-get-json-response
Published Aug 30, 2019
Version 1.0.1
Author Sven Slootweg
GitHub
github.com › axios › axios › issues › 787
GET request does not send data (JSON). · Issue #787 · axios/axios
March 24, 2017 - axios.get("/api/v1/post/allFromUser", {data: {"author": "fharding"}}).then(response => { this.posts = response.data; }).catch(err => { alert(err); console.log(err); }) When I switch this to POST the data get's send just find, but there is no body when sent with GET. Sending JSON with GET is ...
Author ghost
RapidAPI
rapidapi.com › guides › axios-different-data-formats
How to use Axios with different data formats?
In this section, we'll look at how to send and receive HTTP requests using Axios and JSON data, as well as how to handle response data in JavaScript. To send a GET request with Axios and JSON data, use the axios.get() method and pass in the ...
Top answer 1 of 12
91
In Axios responses are already served as javascript object, no need to parse, simply get response and access data.
2 of 12
35
Assuming the response from the server looks like this:
{"token": "1234567890"}
Then in Axios you can access it like this:
console.log( response.data.token )
Top answer 1 of 2
4
obj.data(in data there is property children which is Array) is Object not Array, I think in this case better change default state, and create one field for kind (String) and one for data (Array), like so
class TableUser extends React.Component {
constructor(props) {
super(props);
this.state = {
kind: '',
data: []
};
}
componentDidMount(){
axios
.get('https://www.reddit.com/r/reactjs.json')
.then(({ data })=> {
this.setState({
kind: data.kind,
data: data.data.children
});
})
.catch((err)=> {})
}
render() {
const child = this.state.data.map((el, index) => {
return <div key={index}>
<p>Title - { el.data.title }</p>
<p>Author - { el.data.author }</p>
</div>
});
return <div>
<p>{ this.state.kind }</p>
<div>{ child }</div>
</div>;
}
}
ReactDOM.render(
<TableUser />,
document.getElementById('container')
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.15.3/axios.js"></script>
<div id="container"></div> 2 of 2
1
data.json
{ "email":"[email protected]", "password":"1234" }
get_data.js
import React, { Component } from 'react';
import './css.css'
import Logout from './logout';
import axios from 'axios';
import { Redirect } from 'react-router-dom';
class Login extends Component {
constructor(props){
super();
this.state=({
valid:false,
email1:'',
pass1:'',
msg:'valid'
})
this.check = this.check.bind(this);
}
check()
{
axios.get('http://127.0.0.1:8887/src/component/data.json')
.then((response) => {
this.setState({
email1:response.data.email,
pass1:response.data.password
})
})
.catch((err)=> {})
if(this.email.value === this.state.email1 && this.password.value === this.state.pass1)
{
this.setState({
valid:true
})
}
else{
this.setState({
msg:"invalid number"
})
}
}
render() {
return (
<div className="card-m">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input ref={(email1 => (this.email=email1))} type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" />
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input ref={(pass => (this.password=pass))} type="password" class="form-control" id="exampleInputPassword1" />
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1" />
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button onClick={this.check} type="submit" class="btn btn-primary">Submit</button>
{ this.state.valid &&
<Redirect to="/logout" />
}
</div>
);
}
}
export default Login;
Axios
axios-http.com › docs › post_example
POST Requests | Axios Docs
function getUserAccount() { return axios.get('/user/12345'); } function getUserPermissions() { return axios.get('/user/12345/permissions'); } const [acct, perm] = await Promise.all([getUserAccount(), getUserPermissions()]); // OR Promise.all([getUserAccount(), getUserPermissions()]) .then(function ([acct, perm]) { // ... }); Post an HTML form as JSON ·
CircleCI
circleci.com › blog › making-http-requests-with-axios
Making HTTP requests with Axios - CircleCI
May 19, 2022 - Considering that this is a GET request, you do not need to pass a body with a request. Next I will show you how to do that in a POST request using Axios. A POST request is a little different because you often need to pass some data in the request to the server. In the sample application, we have a POST request that creates a user and passes in details for that user. The code snippet for the request looks like this: axios .post("https://jsonplaceholder.typicode.com/users", { id: 11, name: "Tom Brady", username: "Brad", email: "tombrad@asd.com", }) .then((response) => displayOutput(response)) .catch((err) => console.log(err));
ZetCode
zetcode.com › javascript › axios
Axios Tutorial - Simplifying HTTP Requests
In the example, we get the number of followers and location of a user. $ node main.js # of followers: 324 Location: Bratislava · A POST request is created with post method. Axios automatically serializes JavaScript objects to JSON when passed to the post function as the second parameter; we ...
npm
npmjs.com › package › axios
axios - npm
20 hours ago - By default, axios serializes JavaScript objects to JSON.
» npm install axios
Published Apr 08, 2026
Version 1.15.0
Mastering JS
masteringjs.io › tutorials › axios › post-json
POST JSON with Axios - Mastering JS
June 12, 2020 - Axios automatically serializes JavaScript objects into JSON, but you can also send a manually serialized JSON string. Here's what you need to know.
Mastering JS
masteringjs.io › tutorials › axios › response-body
Get the HTTP Response Body with Axios - Mastering JS
July 23, 2020 - const axios = require('axios'); ... property using Axios' responseType object. By default, responseType is set to 'json', which means Axios will try to parse the response as JSON....
Laracasts
laracasts.com › discuss › channels › vue › getting-all-json-instances-from-an-axios-response-dynamically
Getting all json instances from an axios response ...
We cannot provide a description for this page right now
LogRocket
blog.logrocket.com › home › axios in javascript: how to make get, post, put, and delete requests
Axios in JavaScript: How to make GET, POST, PUT, and DELETE requests - LogRocket Blog
April 9, 2025 - This method involves obtaining a token (JSON Web Token – JWT) after a successful login and including this token in the Authorization header of subsequent requests. You can make protected requests with Axios using the bearer token method by ...