i want to execute axios request after one is finished

Question

i have axios request that get some data and store it in local storage i want to make another request after the first one finished and use the first request response data

this.$http.post("http://localhost:8000/oauth/token", data).then(response => { 
      this.$auth.setToken(
        response.data.access_token,
        response.data.expires_in + Date.now()
      );
    }).then(()=>{
      this.$http.get("user").then(response => {
        this.$auth.setAuthenticatedUser(response.data);
        this.user = response.data;
        this.image = response.data.image;
        this.$bus.$emit('logged_user',response.data);
      });

      this.$http
        .get("http://localhost:8000/api/tpa/provider/status")
        .then(res => {
          localStorage.setItem("tpa_provider", JSON.stringify(res.data));
      });

      this.$bus.$emit('logged_user',this.user);

      if(this.$auth.isAuth()){
        this.$router.push({"name":"home"});
      }

i also tried to use async await but i can't achieve it

Answer 1

Option 1. You may pass the result to the next then via return.

this.$http.post("http://localhost:8000/oauth/token", data).then(response => {
  // ...
  return response;
}).then((myResponse) => {
  console.log('first result', myResponse);
  // ...
});

Option 2. You may store the result of the first request in the superscope variable.

let myResponse;

this.$http.post("http://localhost:8000/oauth/token", data).then(response => {
  myResponse = response;
  // ...
}).then(() => {
  console.log('first result', myResponse);
  // ...
});