I am looking to initiate an axios request once the previous one has been completed

Question

I am looking to initiate an axios request once the previous one has been completed

I am working on an Axios request to retrieve some data and store it in local storage. My goal is to make another request once the first one is complete, using the response data from the initial request.

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 have also attempted to use async/await but have not been successful in achieving the desired outcome.

javascript vue.js ecmascript-6 axios es6-promise

Answer 1

Answer №1

Approach 1: Passing the outcome to the next "then" callback using return.

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

Approach 2: Saving the result of the initial request in a higher-level scope variable.

let myResponse;

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

Answer 2

Approach 1: Passing the outcome to the next "then" callback using return.

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

Approach 2: Saving the result of the initial request in a higher-level scope variable.

let myResponse;

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

I am looking to initiate an axios request once the previous one has been completed

Answer №1

Similar questions

three.js canvas, sphere rotates gracefully to the right

Encountering Typescript errors when trying to destructure a forEach loop from the output of

CSS modal does not extend to the full height of its parent container

What is the best way to determine the number of dimensions in a JavaScript array?

React and Material UI: Ensuring Proper Whitespace Handling in Strings

Is it necessary to encapsulate the last Typsecript export in a module?

What could be causing my Node.js (Express) application to have a response time of 21000 milliseconds for a simple GET request?

Changing an array into an object in JavaScript without rearranging the keys

Is it possible to conceal the source code within the dist js file using Vue JS?

Using JSON.parse to convert a JSON list into a JavaScript array is not functioning correctly

Determine whether two inputs are identical by comparing them

Disabling a specific audio element using its ID

Is there a way to supply a list of HTML elements as an argument to a Closure template function?

Is your component failing to re-render after a state change?

Using the spread operator with setState in React TypeScript

Unveiling the hidden: Leveraging Python to extract elements not visible in HTML, yet present in Chrome's "Inspect Element" tool

Tips for adding animation effects to elements when transitioning to a new page using Vuetify

Opening a Material UI dialog results in a change in the style of other components

The useEffect hook in ReactJs is triggering multiple times

What is the best way to showcase items stored in local storage on a website?