Getting object promise instead of value

Question

login(loginId, password) {
    return axios
      .post(API_URL + "login", {
        loginId,
        password
        
      })
      .then(response => {
        console.log(response.data);
        if (response.data) {
          localStorage.setItem("token", JSON.stringify(response.data));
          localStorage.setItem("user", this.getUser(loginId));
          console.log(localstorage.getItem("user");
        }
        
        console.log(response.data);
        return response.data;
      });
  }
  getUser(loginId){
    return axios
     .get(API_URL+"user/search/"+loginId,{
      headers: { Authorization: `Bearer ${authHeader()} ` },
    });

   getCurrentUser() {
    return (JSON.parse(localStorage.getItem('user')));
  }
}

class ViewMytweetComponent extends Component {
    constructor(props) {
        super(props)
        this.onChangeReply = this.onChangeReply.bind(this);

        this.state = {
            Tweet: [],
            reply: "",
            user: AuthService.getCurrentUser()
        }

        this.deleteTweet = this.deleteTweet.bind(this);

    }

    componentDidMount() {
        const { user } = this.state;
        console.log(user);
        var userId = user.loginId;
        TweetDataService.getMyTweet(userId).then((res) => {
            this.setState({ Tweet: res.data });
            // console.log(this.state.Tweet);
        });

    }
}

In the login method I call the getUser method and store its return value to localStorage with the key user. The getCurrentUser method is used to return the stored user-item from the localStorage object.

Requesting the previously stored user in the componentDidMount method however fails. Logging the user object to the console produces: [object Promise].

Does anyone know how to solve this?

Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Andy Ray, Aug 18 '22 at 04:21

Erfan · Answer 1 · 2022-08-18T04:35:06.470

since axios.get returns a promise, the getUser method is also returning a promise too. Which is an object, when you try to save it in localStorage in here:

          localStorage.setItem("user", this.getUser(loginId));

JavaScript automaticaly converts it to a string, which becomes: [object Promise].

There are a few ways to solve this, for example:

login(loginId, password) {
return axios
  .post(API_URL + "login", {
    loginId,
    password
    
  })
  .then(response => {
    console.log(response.data);
    if (response.data) {

// store the result instead of the promise itself,
// also stringify the result before javascript creates a meaningless string itself.

  this.getUser(loginId).then((user)=>localStorage.setItem("user", JSON.stringify(user))
      
      localStorage.setItem("token", JSON.stringify(response.data));
       
    
    console.log(response.data);
    return response.data;
  })
 }

Of course nested thens aren't exactly a good practice, so maybe it would be nice to rethink class' overal data fetching logic.

still i am getting object promise – Sravani Upputuri Aug 18 '22 at 04:37 — Sravani Upputuri, Aug 18 '22 at 04:37

Getting object promise instead of value

1 Answers1