My axios promise is returning undefined as the response.
Although I can see in the dev tools there is a successful response and a body.
app.$axios.post('auth/refresh')
.then(({ data: { access_token } }) => {
return Promise.resolve(access_token);
});
This code results in the below error:
How come it is undefined when I have the below response?
As far as I can see the request is fine, headers below too:
Related
I'm running into this error:
Uncaught (in promise) SyntaxError: Unexpected token [ in JSON at position 1
when I pass a JSON object containing an array of JSON objects to my component. The object structure is:
{ "arrayName": [{object},{object},{object}, etc...] }
I've run the JSON through a validator and it comes up clean but my api call always returns the same error.
export const api = 'http://localhost:8000'
export const headers = {
'Content-Type': 'application/json',
'Accept' : 'application/json',
}
export const getAll = () =>
fetch(`${api}/480.json`, { headers })
.then(res => res.json())
.then(data => data.events)
This is where it gets called in App.js:
componentDidMount() {
eventsAPI.getAll().then((events) => {
console.log(events)
this.setState({ events })
})
}
I'm not sure why I'm getting the error, I know I'm sending a valid JSON object, is the way I'm receiving it wrong? I can see in the network tab of the dev tools that the correct format is being passed and received. I just don't know where exactly I've gone wrong. This is the response logged from the server. I can see the XHR response in dev-tools but it's a bit big to post here 25+ objects.
You need to modify getAll to actually return something. As it is a fetch, you can just return that, which will return the promise.
export const getAll = () =>
return fetch(`${api}/480.json`, { headers })
.then(res => res.json())
.then(data => data.events)
Now wherever you use getAll be sure to call then:
getAll().then(data => console.log(data))
I'm building an api with nodejs to interact with both the client(android) and the admin(web).
When the api is started, it works fine for the admin and the views are rendered properly but when I connect the client to the api, I get an error/warning in server console like:
App at port 4003
db connection opened successfully
Categroies Count: 2
Error: Can't set headers after they are sent.
at validateHeader (_http_outgoing.js:494:11)
at ServerResponse.setHeader (_http_outgoing.js:501:3)
at ServerResponse.header
(E:\nodeCMSApp\node_modules\express\lib\response.js:767:10)
at ServerResponse.json
(E:\nodeCMSApp\node_modules\express\lib\response.js:264:10)
at Categories.find.select.exec.then.data
(E:\nodeCMSApp\routes\admin_categories.js:20:22)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:188:7)
(node:13880) UnhandledPromiseRejectionWarning: Unhandled promise
rejection (rejection id: 1): Error: Can't set headers after they are
sent.
(node:13880) [DEP0018] DeprecationWarning: Unhandled promise rejections
are deprecated. In the future, promise rejections that are not handled
will terminate the Node.js process with
a non-zero exit code.
Here's my api code snippet:
router.get('/', (req, res) => {
Categories.find({})
.select('title slug image _id')
.exec()
.then(data => {
if (data) {
res.status(200)
.json({
success: true,
count: data.length,
categories: data
})
// I understand that the problem lies here
res.render('admin/all_categories', {
categories: data
});
} else {
res.render('all_categories', {
categories: null
});
}
})
.catch(error => {
console.error(error);
res.send('Error 404');
});
});
I understand that it's because I have already rendered a view with the response object and I'm calling it again to return some json for the client.
My question is how do I render the view and return json data for the client concurrently withoutany errors?
Thanks.
In your code, you are sending two responses to user if all goes well:
if (data) {
res.status(200).json({
success: true,
count: data.length,
categories: data
});
// I understand that the problem lies here
res.render('admin/all_categories', {
categories: data
});
}
In the moment you perform some call to res.json, res.send, res.redirect, res.render, etc, you are sending the proper headers to user (browser) so, in your case, after res.status(200).json you are trying to send res.render and is not possible because first res.json started sending the result to the user. I guess you want to render all_categories with "data" so you should render the template in backend (compile) before send it to the user.
this is my function
don't know where is the problem
fetchData() {
fetch(REQUEST_URL, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
Request : 'menu',
active : '1',
})
}).then((response) => response.json())
.then((responseData) => {
this.setState({
menu: responseData.Response,
});
})
.catch((error) => {
console.warn('error',error);
})
.done();
}
please point out the problem in function
The error occcurs because your response cannot be casted to JSON format. This issue might happen because of wrong header, response body, or other various reasons based on your server. The way to go - since apparently the responses are not consistent - is to perform additional validation of server response before trying to cast the response to JSON.
You can do this by replacing:
.then((response) => response.json())
with
.then((response) => {
// In this case, we check the content-type of the response
if (response.headers.get('content-type').match(/application\/json/)) {
return response.json();
}
return response;
// You can also try "return response.text();"
})
The error will be occcurs because your response can not be casted to be JSON
format.
there are three type of php mysqli api formate
1 formData
2 xml
3 json
i think you are use Formdata api but you are request in json see formdata
example
1) json Request.. example
var Request = {
security:1,
token: token,
email: this.state.username,
password: this.state.password
};
console.log(JSON.stringify(Request));
fetch(API.login, {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json"
},
body: JSON.stringify(Request)
})
.then(res => res.json())
.then(res => {
console.log("Login RESPONCE::: ", res);
}
2)Formdata Example use form data i think your error will be solve
let formdata = new FormData()
formdata.append("Api variable",your post variable)
formdata.append("name",this.state.name)
formdata.append("email, this.state.email)
formdata.append("password",this.state.password)
fetch('http://192.168.1.116/Restaurants/Registration.php', {
method: 'POST',
headers: {
'Content-Type': 'multipart/form-data'
},
body:formdata
}).then(res => res.json())
.then(res => {
console.log('Data RESPONCE::', res);
}
then((response) => response.json())
^^^^^^^^^^^^^ I think this is the problem
Responses with status code not equal to 2xx will not go into catch when you use fetch API, therefore you may JSON.parse something such as a HTML page or plain text stream.
You should check if response.ok === true before you parse response as JSON.
The likely cause of this error is your server not returning something that's not valid JSON (likely not JSON at all, like a 404 page or similar).
If you set the request Content-Type to application/json, likely it will send a preflight request to check CORS.
In my React app (not React-Native), I got cross domain issue. My server doesn't support preflight request, and so the response looks like:
{
body: null,
status: 0,
ok: false,
}
which is causing response.json() failed even though I got the expected JSON response in Chrome Dev Tools.
In my case, I change request Content-Type to application/x-www-form-urlencoded which does not require a preflight request. It works as expected.
It might not help in your case but I hope it give you some insight.
Log responseData. It might be possible that API is returning invalid data.
mainpage.html
app.controller('espn', function($scope,$http){
$http.jsonp("http://www.mfrm.von.com/v1/sports")
.success( function(data,status,headers,config){
alert("success");
console.log(data);
console.log(status);
})
.error( function(data,status,headers,config){
alert("error");
console.log(data);
console.log(status);
});
});
Webservice Consumer url:
http://localhost:8080/angularjs/app?abc=123&phon=876
webservice provider(mainframe) url:
http://www.mfrm.von.com/v1/sports
We faced the issues:
Uncaught SyntaxError: Unexpected token :
Is there a possibility to do with the UI(Angularjs) with out using java code?
Angularjs version 1.4.0
Provider part giving response json object.
is (provider) Mainframe can able to configure the cors ability?
Thanks and please correct me
output printing as error method only
When validating a mongoose schema in 'pre' of parallel middleware
schema.pre('save', true, function (next, done) {
if(...) {
next(new Error('Some error message'));
}
next();
});
I return an error and it is available in the callback function:
model.save({},{}, function(err) {
res.json(400, err);
console.log(err)// I see in the console: [Error: 'Some error message']
})
But when I do
res.json(400, err);
I get an empty response
{} No properties
What is the reason for this?
JSON can't stringify errors. You'll need to use something else to send the error.
Perhaps just res.send(err.message), or something similar.