I have a Vue-App which runs with Vuex and Axios. In this app I have vuex-store which handles API-calls, but a problem is that when I call the store-actions I cant chain the response in the caller.Any ideas what Im doing wrong?
Calling code:
import { FETCH_PRODUCTS, ADD_PRODUCT } from './actions.type'
methods: {
sendNewProduct () {
this.$store
.dispatch(ADD_PRODUCT, this.newProductForm)
.then(() => {
console.log('This never gets called')
})
}
}
Vuex-store:
const actions = {
[ADD_PRODUCT] (context, credentials) {
return new Promise((resolve) => {
ApiService
.post('/Products/', {
Name: credentials.Name,
Description: credentials.Description,
Price: credentials.Price
})
.then(({ data }) => {
this.$store
.dispatch(FETCH_PRODUCTS)
resolve(data)
})
.catch(({ response }) => {
console.log(response)
context.commit(SET_ERROR, 'Error adding product')
})
})
}
}
const actions = {
[ADD_PRODUCT](context, credentials) {
return ApiService.post("/Products/", {
Name: credentials.Name,
Description: credentials.Description,
Price: credentials.Price
})
.then(({ data }) => {
this.$store.dispatch(FETCH_PRODUCTS);
return data;
})
.catch(({ response }) => {
console.log(response);
context.commit(SET_ERROR, "Error adding product");
throw new Error("Error adding product");
});
}
};
I've removed the new Promise(...) because axios already creates a promise.
If added a return data in the then callback and a throw in the catch callback to let the calling api receive the data/error.
Note that the promise resolves before the FETCH_PRODUCTS completes, to make sure that action is also completed, you'd write:
.then(({ data }) => {
return this.$store.dispatch(FETCH_PRODUCTS)
.then(() => data);
})
Related
I'm getting some data from server and have set-up this service on client to request them accordingly:
const serviceSyncFollowedArtists = async userId => {
if (!userId) return
const { data } = await axios.get(`${httpLink}/sync`, {
params: {
accessToken,
userId,
},
})
return data
}
service is called within context:
const syncFollowedArtists = async () => {
await spotifyService
.serviceSyncFollowedArtists(user.userId)
.then(res => {
if (res.length === 0) return
dispatch({
type: 'SYNC',
data: res,
})
})
.catch(err => {
console.log(err)
})
}
It works fine as I want it to, however, before, I have set up the service to request data using promises:
const serviceSyncFollowedArtists = async userId => {
if (!userId) return
await axios
.get(`${httpLink}/sync`, {
params: {
accessToken,
userId,
},
})
.then(res => {
return res.data
})
.catch(err => {
console.log(err.message)
})
}
Even though I manage to obtain the data from server inside the service, when it's returned to the function in context, it's empty, undefined. Is threre any reason for this?
You are getting undefined because you are not returning anything from the function in the case of promises, unlike you are doing it in the first case
So just add a return keyword
const serviceSyncFollowedArtists = async userId => {
if (!userId) return
return await axios
.get(`${httpLink}/sync`, {
params: {
accessToken,
userId,
},
})
.then(res => {
return res.data
})
.catch(err => {
console.log(err.message)
})
}
I'm trying to get the error response from my Vue store dispatch method, into my component, so I can tell the user if the save failed or not.
store/userDetails.js
const state = {
loading: {
user_details: false,
}
}
const getters = {
// Getters
}
const actions = {
save({commit, dispatch, rootState}, payload) {
commit('setLoading', {name: 'users', value: true});
axios(
_prepareRequest('post', api_endpoints.user.details, rootState.token, payload)
).then((response) => {
if (response.data) {
commit('setState', {name: 'user_details', value: response.data.units});
commit('setLoading', {name: 'user_details', value: false});
dispatch(
'CommonSettings/setSavingStatus',
{components: {userDetails: "done"}},
{root:true}
);
}
}).catch((error)=> {
console.log(error)
return error
}
)
}
My component method
views/Users.vue
send() {
this.$store.dispatch({
type: 'Users/save',
userDetails: this.current
}).then(response => {
console.log(response)
});
},
Above, I'm logging out the response in two places.
The response in my store/userDetails.js file is logged out fine, but it's not being passed to my send() function in my component - it comes up as undefined. Any reason why it wouldn't be passed through? Is this the correct way to do this?
This works for me. Try this solution.
store.js
actions: {
save(context, payload) {
console.log(payload);
return new Promise((resolve, reject) => {
axios(url)
.then((response) => {
resolve(response);
})
.catch((error) => {
reject(error);
});
});
},
},
My Component method
App.vue
save(){
this.$store.dispatch("save", dataSendToApi).then((response)=>{
console.log(response)
})
}
Try returning axios call in the Store Action:
// add return
return axios(
_prepareRequest('post', api_endpoints.user.details, rootState.token, payload)
)
.then() // your stuff here
.catch() // your stuff here
If that won't work, use Promise in the Store Action. Like this:
return new Promise((resolve, reject) => {
return axios() // simplify for readibility reason, do your stuff here
.then((response) => {
//... your stuff here
resolve(response) // add this line
})
.catch((error) => {
// ... your stuff here
reject(error) // add this line
})
})
you should return a promise, reference link：vue doc
Im getting this error:
TypeError: Cannot read property 'then' of undefined in controller
[controller]
fetchGameData() {
DataModel.getList().then(data => {
console.log(data);
})
}
[DataModel]
export default {
getList() {
fetch('URL')
.then((res) => {
return Promise.resolve(res.json());
})
.catch((err) => {
console.log("Fetch Error!!!", err);
})
}
}
The error is already clear actually. Your function getList() does not return anything which is going to be undefined in JavaScript. You should return "something" at the end of your function. If you want to use .then on the return value of your function, you probably want to return a "Promise"
fetch function will return a Promise anyway. So can simply return that. You can find more info about fetch here https://javascript.info/fetch
So a neater alternative would be
export default {
getList() {
return fetch('URL')
.then((res) => {
return Promise.resolve(res.json());
})
.catch((err) => {
console.log("Fetch Error!!!", err);
})
}
}
You need to return a promise to do .then
export default {
getList() {
return new Promise((resolve, reject) => {
fetch("URL")
.then((res) => {
resolve(res.json());
})
.catch((err) => {
console.log("Fetch Error!!!", err);
});
});
},
};
[Service]
async function getList() {
const result = await fetch('URL')
.then((res) => {
return Promise.resolve(res.json());
})
.catch((err) => {
console.log("Fetch Error!!!", err);
})
return result.json();
}
[controller]
fetchGameData() {
DataModel.getList().then(data => {
console.log(data);
})
}
You are getting that error because the DataModel.getList() doesn't return a Promise so you can have access to Promise then chain. All you have to do is to add a return keywork in the getList before the fetch function so the getList method can return a resolve Promise instead of undefined
export default {
getList() {
return fetch('URL')
.then((res) => {
return Promise.resolve(res.json());
})
.catch((err) => {
console.log("Fetch Error!!!", err);
});
}
}
You should return the promise inside your getList() function.
otherwise a function with no return will return undefined.
And this you will have the error "...cant read then of undefined"
your code should be :
export default {
getList() {
return fetch('URL')
.then((res) => {
return Promise.resolve(res.json());
})
.catch((err) => {
console.log("Fetch Error!!!", err);
})
}
}
I have quite an issue for some time and is getting on my nerves and it doesn't make sense. I have used axios on my react frontend and it works perfect when assigning the get value to the state. But when using it in a normal javascript code, I appear to have this following issue: i can print the object's value in the console but it will return only undefined.. Here is my code:
login = () => {
let data;
axios.get('https://myaddress/authenticate')
.then(response => {
data = response;
console.log('data here', data);
})
.catch(error => {
console.error('auth.error', error);
});
console.log('eee', data);
return data;
};
Here we are talking about axios strictly.
You can't return an ajax response because it's asynchronous. You should wrap your function into a promise or pass a callback to login
UPDATE: As #Thilo said in the comments, async/await would be another option, but it will let you set the response to data tho ...
1. Wrap into a promise
login = () => new Promise((resolve, reject)=>{
axios.get('https://myaddress/authenticate')
.then(response => {
resolve(response)
})
.catch(error => {
reject(error)
});
});
// Usage example
login()
.then(response =>{
console.log(response)
})
.catch(error => {
console.log(error)
})
2. Pass a callback
login = (callback) => {
axios.get('https://myaddress/authenticate')
.then(response => {
callback(null,response)
})
.catch(error => {
callback(error,null)
});
};
// Usage example
login((err, response)=>{
if( err ){
throw err;
}
console.log(response);
})
3. Async/Await
login = async () => {
// You can use 'await' only in a function marked with 'async'
// You can set the response as value to 'data' by waiting for the promise to get resolved
let data = await axios.get('https://myaddress/authenticate');
// now you can use a "synchronous" data, only in the 'login' function ...
console.log('eee', data);
return data; // don't let this trick you, it's not the data value, it's a promise
};
// Outside usage
console.log( login() ); // this is pending promise
In ES7/ES8 you can do async/await like a boss:
login = () => {
return new Promise((resolve, reject) => {
axios.get('https://myaddress/authenticate')
.then(response => {
resolve(response)
})
.catch(error => {
console.error('auth.error', error);
reject(error)
});
});
};
async function getData() {
try{
const data = await login()
} catch(error){
// handle error
}
return data;
}
getData()
.then((data) => console.log(data));
How do I return my result please,
I get an error
Can't find variable: convertToArray
I have a function in my api.js
export function apiGet() {
return axios
.get('http')
.then(res => {
const convertToArray = []
for (const key in res.data) {
convertToArray.push({ ...res.data[key], id: key })
//console.log confirms my convertToArray has the info I expect in it
}
return convertToArray;
})
.catch(e => {
console.log(e);
})
}
in my vuex store I have
// Get list of cases
loadCasess ({ commit, context }) {
return new Promise ((resolve, reject) => {
apiGet()
resolve(commit('LIST_CASES', convertToArray))
})
.catch(e => {
console.error(e)
// reject('/')
})
},
You're receiving this error because convertToArray doesn't exist in the context of your Vuex Store. You're returning it, but doesn't mean that on the function that calls the apiGet() it will exist. You should write like:
// Get list of cases
loadCases ({ commit, context }) {
return new Promise ((resolve, reject) => {
const convertToArray = apiGet()
resolve(commit('LIST_CASES', convertToArray))
}).catch(e => {
console.error(e)
// reject('/')
})
}, // ...