I'm developing a VUE application, and I am trying to figure out how to handle post responses in Axios. I wrote it and used vue-router to make the fetch but decided to try out Axios.
Axious code:
methods: {
sendForm () {
console.log("submitHandler called - success!");
const payload = {
first_name: this.event.firstName,
last_name: this.event.lastName,
email: this.event.email,
password: this.event.password,
name: this.event.agencyName,
abbreviation: this.event.abbreviation,
type: this.event.agencyType,
address: this.event.agencyAddress,
city: this.event.agencyCity,
state: this.event.state,
zipcode: this.event.zipcode,
phone: this.event.phone,
}
axios.post(process.env.VUE_APP_API_URL+"/agency/add",payload)
.then(function (response) {
console.log('Response', response)
//reformat returned expiration date for displaying on webpage
console.log("Expiry date:", response.data.data.agency.expiry);
let expd = dayjs(response.data.data.agency.expiry).format("dddd, MMMM D YYYY");
//Write retunred values to storeage
store.user = {
id: response.data.data.user.id,
first_name: response.data.data.user.first_name,
last_name: response.data.data.user.last_name,
email: response.data.data.user.email,
agency_name: response.data.data.agency.name,
expiry_date: expd,
}
router.push("/SignUpConfirm");
})
.catch(function (error) {
console.log('Error', error.message);
Swal.fire({
icon: 'error',
title: 'Oops...',
text: error.message,
})
})
}
}
My issue/question is, for some reason, I have to use "response.data.data.foo" to drill to the response I want.
When I used the built-in view router, I just used "data.foo"
Vue-router option:
methods: {
submitHandler() {
console.log("submitHandler called - success!");
const payload = {
first_name: this.firstName,
last_name: this.lastName,
email: this.email,
password: this.password,
agency_name: this.agencyName,
abbreviation: this.abbreviation,
agency_type: this.agencyType,
agency_address: this.agencyAddress,
agency_city: this.agencyCity,
state: this.state,
zipcode: this.zipcode,
phone: this.phone,
}
const requestOptions = {
method: "POST",
body: JSON.stringify(payload),
}
fetch(process.env.VUE_APP_API_URL+"/agency/add", requestOptions)
.then((response) => response.json())
.then((response) => {
if (response.error) {
console.log("Error:", response.message);
Swal.fire({
icon: 'error',
title: 'Oops...',
text: response.message,
})
} else {
//reformat returned expiration date for displaying on webpage
console.log("Expiry date:", response.data.agency.expiry);
let expd = dayjs(response.data.agency.expiry).format("dddd, MMMM D YYYY");
//Write retunred values to storeage
store.user = {
id: response.data.user.id,
first_name: response.data.user.first_name,
last_name: response.data.user.last_name,
email: response.data.user.email,
agency_name: response.data.agency.name,
expiry_date: expd,
}
router.push("/SignUpConfirm");
}
})
}
}
Your API response is probably something like this (after parsing JSON of course)
{
data: {
user: {
......
}
}
}
For clarity, lets say it is instead returning
{
topLevel: {
nextLevel: {
......
}
}
}
so, below, toplevel would actually be data, and nextLevel would actually be user ... but, using these abstract names of toplevel and nextLevel should help illustrate why you end up with data.data in axios
axios response schema is as follows
{
data: {}, // server response
status: 200, // response status
statusText: 'OK', // response status text
headers: {}, // response headers
// etc - there's more but not relevant
}
So in
axios.post(....)
.then(function (response) {
})
then nextLevel is clearly response.data.topLevel.nextlevel
Note that the response from the server here is a property of the data property of the response variable - i.e. two "levels" inside the response variable
When using fetch
fetch(....)
.then(response => response.json())
.then(response => .....)
(it doesn't help clarity that you use response in both .then by the way, I'd use result in the second .then)
in the above, the FIRST response is
{
status: 200, // response status
statusText: 'OK', // response status text
headers: {}, // response headers
body: // a readableStream of the response body
json() {}, // method to parse the body as json
// .... etc
}
and the second response is the parsed JSON response from your server,
so in this case nextLevel is response.topLevel.nextLevel
And the response from the server here is a property of (the second) response variable
Related
I'm having difficulties to understand how Shall I handle this type of calls. I need an initial axios.get call and loop through to make an axios.all call. This is my code:
export async function getServerSideProps(context) {
const axios = require("axios");
const options = {
method: 'GET',
url: 'xxxxx',
params: { id_user: 'xxxxx' },
headers: {
'X-RapidAPI-Host': 'xxxxxxx',
'X-RapidAPI-Key': 'xxxxxxx'
}
};
const res = axios.request(options).then(function (response) {
axios.all(response.data.users.map(user => {
axios.get('xxxxxxx', {
params: { response_type: 'short', ig: user.username, corsEnabled: 'true' },
headers: {
'X-RapidAPI-Host': 'xxxxx',
'X-RapidAPI-Key': 'xxxxxxx'
}
})
})).then(res => {
return res.data
})
})
const payload = await res;
I have an error on the page when I try to console log the payload. What's going worng with my call?
Looks like you need a return inside your map.
The below code worked for me and the unique params were updated on each request. Once you prepare your series of endpoints or whatever is unique for each request (user data per your sample code) you map over the relevant data and make all your get requests. The result returned will be an array of the responses you get back from each request once all of the requests have finished.
Regarding chaining together requests, you can use any number of .then() to kick off other actions. You mention needing an id from an initial get request, so here is a solution based on that example.
Hope you find it helpful.
const users = [{ username: '1' }, { username: '2' }, { username: '3' }];
axios
.get('https://jsonplaceholder.typicode.com/posts')
.then((res) => {
console.log(res);
// simulating getting some id you need...
const id = res.data[4].id;
console.log(id);
return id;
})
.then((id) => {
axios
.all(
users.map((user) => {
return axios.get('https://jsonplaceholder.typicode.com/posts', {
params: {
response_type: 'short',
// just an example of using id...
importantId: id,
ig: user.username,
corsEnabled: 'true',
},
headers: {
'X-RapidAPI-Host': 'xxxxxxx',
'X-RapidAPI-Key': 'xxxxxxx',
},
});
})
)
.then((res) => {
console.log(res);
});
});
I have a function that I am using axios to post data to nodeJS rest api. The problem that I am having is that axios added post a list with the object instead of just the array object. Please help me fix this.
The function receives the follow from "documents"
{
_id: '6149290b197615d32c515dab',
instantMessage: false,
isComplete: true,
},
{
_id: '614a249636503d7aa9fb138d',
instantMessage: false,
isComplete: true,
},
{
_id: '614a2bf5560184026def253a',
date: '2021-09-21',
title: 'Not getting erro',
},
{
_id: '614a2c6a560184026def253d',
date: '2021-09-21',
title: 'Every thing working',
}
my function is as follow:
async function SaveAsTemplate(documents) {
const result = await axios
.post('http:localhost/templates', {
documents,
})
.catch(function (error) {
// handle error
console.warn(error.message);
});
return result;
}
in my nodeJS project where the query is received I am console.log the data and I am getting the follow results:
documents: [
{
_id: '6149290b197615d32c515dab',
instantMessage: false,
isComplete: true,
},
{
_id: '614a249636503d7aa9fb138d',
instantMessage: false,
isComplete: true,
},
{
_id: '614a2bf5560184026def253a',
date: '2021-09-21',
title: 'Not getting erro',
},
{
_id: '614a2c6a560184026def253d',
date: '2021-09-21',
title: 'Every thing working',
}
]
How can I use axios where it only give me the object without documents in front.
When I use Postman and other tools to send query to post I do not have this problem everything come out correct. Only have issues when using axios
You're doing
const result = await axios
.post('http:localhost/templates', {
documents,
})
which is the same as:
const result = await axios
.post('http:localhost/templates', {
documents: documents,
})
try:
const result = await axios
.post('http:localhost/templates', documents)
async function SaveAsTemplate(documents) {
const result = await axios
.post('http:localhost/templates', {
headers: {
'Content-Type': 'application/json',
},
body: documents,
})
.catch(function (error) {
// handle error
console.warn(error.message);
});
return result;
}
or you can try to change array to object first and then you assign on body post
we have this object, we need to get it as JSON instead of JS object, so we do it with JSON.stringify()
and we receive this error:
Converting circular structure to JSON
> --> starting at object with constructor 'ClientRequest'
> | property 'socket' -> object with constructor 'TLSSocket'
> --- property '_httpMessage' closes the circle
and here is my whole end-point, I think it might have something to do with Axios, please note we uses TypeScript so actually this file is not .js file but .ts:
app.post('/payment-key-request', async (req: any, res: any) => {
const {auth_token, order_id} = req.body;
const payload1 = {
auth_token,
amount_cents: 100,
expiration: 3600,
order_id,
billing_data: {
apartment: 803,
email: "claudette09#exa.com",
floor: 42,
first_name: "Clifford",
street: "Ethan Land",
building: 8028,
phone_number: 9135210487,
shipping_method: "PKG",
postal_code: 41523,
city: "Jaskolskiburgh",
country: "CR",
last_name: "Nicolas",
state: "Utah"
},
currency: "EGP",
integration_id: 1 // something goes off here
};
let cache: any = [];
await Axios.post(
"https://accept.paymobsolutions.com/api/acceptance/payment_keys",
JSON.stringify(payload1),
{
headers: { "Content-Type": "application/json" }
}
)
.then((resp: any) => {
res.status(200).json({ ...resp });
})
.catch((error: any) => {
if (error.response) {
console.log("// Request made and server responded");
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) {
console.log("// The request was made but no response was received");
console.log(error.request);
} else {
console.log(
"// Something happened in setting up the request that triggered an Error"
);
console.log(error.message);
}
res.status(400).json({ ...error });
});
cache = null;
})
Instead of trying to respond with the entire response object, you should send just the parsed body:
res.status(200).json(resp.data);
Same with the error case:
res.status(400).json(error.response.data);
So, basically I have a form data that I am having trouble parsing correctly. I keep getting [object Object]'s in the response for the listPets variable. Every other variable is mapping correctly. Anyone have any ideas on how I could go about this? :)
<Formik
initialValues={{
email: '',
password: '',
jobType: '',
comments: '',
cookies: [],
terms: '',
newsletter: '',
firstName: '',
pets: [{ type: '', name: '', id: '1' }]
}}
validationSchema={ LoginSchema }
onSubmit={
async data => {
await sleep(1000);
setStatus(prevStatus => ({ ...prevStatus }));
const res = await fetch('/api/send', { method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
});
const text = await res.text();
handleResponse(res.status, text);
}
}
>
const sgMail = require('#sendgrid/mail');
export default async function(req, res){
sgMail.setApiKey(process.env.SENDGRID_API_KEY);
const { email, comments, firstName, cookies, jobType, pets } = req.body;
const content = {
to: '',
from: email,
subject: `New Message From - ${email}`,
text: comments,
html: `
<p>Hi, ${firstName}.</p>
<p>${comments}</p>
<p>${cookies}</p>
<p>${jobType}</p>
<p>${listPets}</p>
`
};
try {
console.log('Content', content);
res.status(200).send('Message sent successfully.');
} catch (error) {
console.log('ERROR', error);
res.status(400).send('Message not sent.');
}
}
Why not use JSON.stringify(pets) to debug whats happening? I would have commented but i dont have enough reputation.
i have an object that i will use in post request using axios
employee:{
name: 'test',
email: 'test#gmail.com',
password: '123456',
role: {
created_at:"2018-08-03 07:34:30"
deleted_at:null
id:2
role_name:"employee"
updated_at:"2018-08-03 07:34:30"
}
},
this is my post request
axios.post('api/employees', vm.employee)
.then( response => {
alert("Employee Inserted");
vm.errors.clear();
vm.setFalse();
vm.fetchEmployees();
})
.catch( error => {
vm.errors.record(error.response.data);
});
how can I pass in post request only the role_name in role object together with name, email and password
If you mean headers by parameters then you can try:
var options = {
headers: {'X-My-Custom-Header': 'Header-Value'}
};
axios.post('api/employees', vm.employee, options);
Other wise just create a a body like this:
var options = {
headers: {'X-My-Custom-Header': 'Header-Value'}
};
axios.post('api/employees', {
name: vm.employee.name,
role: {
role_name: vm.employee.role.role_name
}
}, options);
I think this work for you.
axios.post('api/employees', {name: employee.name, email: employee.email, role_name: employee.role.role_name})
.then( response => {
alert("Employee Inserted");
vm.errors.clear();
vm.setFalse();
vm.fetchEmployees();
})
.catch( error => {
vm.errors.record(error.response.data);
});
If ES2015 is ok then this would be a shorter way to pass the data:
axios.post('api/employees', {
...employee,
role: { role_name: employee.role.role_name }
}) ...