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);
});
});
};
}
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);
});
};
}
There must be a better way but you could
export async function fetchStorage() {
return async function (dispatch) {
try {
const { data } = await axiosInstant.get('/Storage/Get')
dispatch({ type: actions.FETCH_STORAGE, payload: { storages: data } })
return data
} catch (e) {
console.error(e)
}
}
}
Then you have to use fetchStorage as follows
this.props.fetchStorage().then(async function(response) {
let payload = await response()
});
See sample:
return new Promise(function (resolve, reject) {
var instance = axios.create({
baseURL: 'http://localhost:54690/api',
timeout: 2000,
});
instance.get('/Storage/Get')
.then(function (response) {
if(1 === 1)
resolve(response);
})
.catch(function (error) {
reject(error);
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.