I am wondering how do I return a promise form Axios? I am not sure if I need to use an Interceptors?
I have this code right now
export function fetchStorage() {
return function (dispatch) {
return new Promise(function(resolve, reject) {
if (1 === 1) {
resolve('it works!');
} else {
reject(':(');
}
});
};
}
and
this.props.fetchStorage().then(function() {
console.log('then');
});
Now say I want to change the fetchStorage to do something via ajax and I would have it like
var instance = axios.create({
baseURL: 'http://localhost:54690/api',
timeout: 2000,
});
instance.get('/Storage/Get')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
how do I return the promise instead of doing it here?
Edit
Just for clarification why I am doing this I have something like this
componentWillMount() {
this.props.setPreLoader(true);
this.props.fetchStorage().then(function() {
this.props.setPreLoader(false);
});
}
export function fetchStorage() {
return function (dispatch) {
return new Promise(function (resolve, reject) {
axiosInstant.get('/Storage/Get')
.then(function (response) {
let payload = response.data;
console.log(payload);
dispatch({ type: actions.FETCH_STORAGE, payload: { storages: payload } });
})
.catch(function (error) {
console.log(error);
});
});
};
}
On the other hand, Axios will reject the request promise if one of these error codes gets returned from the server. The second difference is, Fetch doesn't send cookies back (by default) to the server when performing a request. You have to explicitly provide an option in order to include the cookies.
You cannot access the result of the promise . You have to wait for it, then the promise will pass it to your callback: When using async / await, the async function will always return a promise.
Axios Response object When we send a request to a server, it returns a response. The Axios response object consists of: data - the payload returned from the server. status - the HTTP code returned from the server.
From Axios documentation, "Axios is a promise-based HTTP Client for node. js and the browser." You would need to await on a promise object to access the response value. Note that in order to use await keyword in your function, you would need to mark it as async .
Axios is promise based, so you don't need to wrap it in Promise, you can do something like this, and axiosInstance.[post|put|get| end etc.] methods will return promise.
export function fetchStorage() {
return function (dispatch) {
return axiosInstant.get('/Storage/Get')
.then(function (response) {
let payload = response.data;
console.log(payload);
dispatch({ type: actions.FETCH_STORAGE, payload: { storages: payload } });
})
.catch(function (error) {
console.log(error);
});
};
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With