Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Return Promise from Axios?

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);
                });
        });
    };
}
like image 628
chobo2 Avatar asked Aug 19 '16 18:08

chobo2


People also ask

Does Axios returns a promise?

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.

How do I get my Axios promise results?

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.

What Axios get returns?

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.

How do you promise in Axios react?

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 .


Video Answer


1 Answers

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);
                });
    };
}
like image 53
Alexander Tuniev Avatar answered Oct 09 '22 22:10

Alexander Tuniev