Discovering the ways to retrieve Axios response within a SweetAlert2 confirmation dialog

Question

Discovering the ways to retrieve Axios response within a SweetAlert2 confirmation dialog

I'm struggling to grasp promises completely even after reviewing https://gist.github.com/domenic/3889970. I am trying to retrieve the response from axios within a sweetalert confirmation dialog result.

Here is my current code:

axios
    .post("/posts", this.formData)
    .then(response => {
        if (typeof response.data.callback !== "undefined") {
            toastr.info("Created");
            swal.fire({
                title: "Success!",
                text: "you created new post",
                type: "success",
                showConfirmButton: true,
                confirmButtonText: "Close this",
                allowOutsideClick: false
            }).then(result => {
                if (result.value) {
                    window.location.replace(response.data.callback);
                }
            });;
        } else {
            toastr.error("Can't process this request");
        }
        this.formLoading = false;
    })

The response variable returns as undefined, indicating that there might be a misunderstanding in how scopes function in JavaScript.

javascript laravel vue.js

Answer 1

Answer №1

This demonstration showcases how you can utilize a URL obtained from an API call to trigger further requests and actions within your code. The possibilities are endless in the .then() block, allowing you to execute any desired function or operation.

Explore the updated CodeSandbox example featuring chained alerts and additional API calls

UPDATE: My answer has been enhanced to illustrate how you can leverage data retrieved from API responses.

https://i.sstatic.net/vnjg6.png

// Utilize the SweetAlert2 component within Modal.vue

<template>
  <div>
    <button @click="swal();">CLICK ME TO LOAD API DATA USING SWEETALERT2</button>
    <div v-if="name != ''">
      <p>Name: {{ name }}</p>
    </div>
    <div v-if="homeworld != ''">
      <p>Homeworld: {{ homeworld }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      homeworld: ""
    };
  },
  methods: {
    swal() {
      let self = this;
      this.$swal
        .fire({
          title: "Click OK to load from: https://swapi.co/api/people/1/",
          showCancelButton: true,
          confirmButtonText: "OK",
          showLoaderOnConfirm: true,
          preConfirm: () => {
            return this.$axios
              .get("https://swapi.co/api/people/1/")
              .then(response => {
                if (response.status != 200) {
                  throw new Error("Something went wrong");
                }
                return response.data;
              })
              .catch(error => {
                this.$swal.showValidationMessage(`Request failed: ${error}`);
              });
          },
          allowOutsideClick: () => !this.$swal.isLoading()
        })
        .then(result => {
          if (result.value) {
            let v = result.value;
            self.name = v.name;
            this.$swal
              .fire({
                title: "Click Ok to redirect to another API call",
                text: `Going to (name:)"${v.name}"'s homeworld URL at: "${
                  v.homeworld
                }"`,
                showCancelButton: true,
                confirmButtonText: "OK",
                showLoaderOnConfirm: true,
                preConfirm: () => {
                  return this.$axios
                    .get(v.homeworld)
                    .then(response => {
                      if (response.status != 200) {
                        throw new Error("Something went wrong");
                      }
                      return response.data;
                    })
                    .catch(error => {
                      this.$swal.showValidationMessage(
                        `Request failed: ${error}`
                      );
                    });
                },
                allowOutsideClick: () => !this.$swal.isLoading()
              })
              .then(res => {
                if (res.value) {
                  self.homeworld = res.value.name;
                  this.$swal.fire({
                    title: "Homeworld",
                    text: JSON.stringify(res.value)
                  });
                }
              });
          }
        });
    }
  }
};
</script>

Answer 2

This demonstration showcases how you can utilize a URL obtained from an API call to trigger further requests and actions within your code. The possibilities are endless in the .then() block, allowing you to execute any desired function or operation.

Explore the updated CodeSandbox example featuring chained alerts and additional API calls

UPDATE: My answer has been enhanced to illustrate how you can leverage data retrieved from API responses.

https://i.sstatic.net/vnjg6.png

// Utilize the SweetAlert2 component within Modal.vue

<template>
  <div>
    <button @click="swal();">CLICK ME TO LOAD API DATA USING SWEETALERT2</button>
    <div v-if="name != ''">
      <p>Name: {{ name }}</p>
    </div>
    <div v-if="homeworld != ''">
      <p>Homeworld: {{ homeworld }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      homeworld: ""
    };
  },
  methods: {
    swal() {
      let self = this;
      this.$swal
        .fire({
          title: "Click OK to load from: https://swapi.co/api/people/1/",
          showCancelButton: true,
          confirmButtonText: "OK",
          showLoaderOnConfirm: true,
          preConfirm: () => {
            return this.$axios
              .get("https://swapi.co/api/people/1/")
              .then(response => {
                if (response.status != 200) {
                  throw new Error("Something went wrong");
                }
                return response.data;
              })
              .catch(error => {
                this.$swal.showValidationMessage(`Request failed: ${error}`);
              });
          },
          allowOutsideClick: () => !this.$swal.isLoading()
        })
        .then(result => {
          if (result.value) {
            let v = result.value;
            self.name = v.name;
            this.$swal
              .fire({
                title: "Click Ok to redirect to another API call",
                text: `Going to (name:)"${v.name}"'s homeworld URL at: "${
                  v.homeworld
                }"`,
                showCancelButton: true,
                confirmButtonText: "OK",
                showLoaderOnConfirm: true,
                preConfirm: () => {
                  return this.$axios
                    .get(v.homeworld)
                    .then(response => {
                      if (response.status != 200) {
                        throw new Error("Something went wrong");
                      }
                      return response.data;
                    })
                    .catch(error => {
                      this.$swal.showValidationMessage(
                        `Request failed: ${error}`
                      );
                    });
                },
                allowOutsideClick: () => !this.$swal.isLoading()
              })
              .then(res => {
                if (res.value) {
                  self.homeworld = res.value.name;
                  this.$swal.fire({
                    title: "Homeworld",
                    text: JSON.stringify(res.value)
                  });
                }
              });
          }
        });
    }
  }
};
</script>

Answer 3

Answer №2

After reading your comment about the callback being a URL, I realized that axios and sweetalert need the "callback" in JSON format. Here's an example using Laravel. Apologies for any language barriers.

Controller.php

...
if(isAjax){
   return response()->json(['status'=>'info','messages'=>'Winter is coming!','rheader'=>'Warning!']);
}
...

View (Vue with Sweetalert), generic sweetalerts should work as well

...
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
axios.post("{{route('someroute')}}",{id:xid}) //this line passes the id to the route
.then(response => {
  this.$swal(response.data.rheader, ""+response.data.messages+"", response.data.status);
  if(response.data.status=="success"){
    $("#something")).hide();
  }
})
.catch(e => {
  this.$swal("Warning", ""+e.response.data.messages+"", "warning");
});
...

I hope this information proves useful to someone :)

Answer 4

After reading your comment about the callback being a URL, I realized that axios and sweetalert need the "callback" in JSON format. Here's an example using Laravel. Apologies for any language barriers.

Controller.php

...
if(isAjax){
   return response()->json(['status'=>'info','messages'=>'Winter is coming!','rheader'=>'Warning!']);
}
...

View (Vue with Sweetalert), generic sweetalerts should work as well

...
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
axios.post("{{route('someroute')}}",{id:xid}) //this line passes the id to the route
.then(response => {
  this.$swal(response.data.rheader, ""+response.data.messages+"", response.data.status);
  if(response.data.status=="success"){
    $("#something")).hide();
  }
})
.catch(e => {
  this.$swal("Warning", ""+e.response.data.messages+"", "warning");
});
...

I hope this information proves useful to someone :)

Discovering the ways to retrieve Axios response within a SweetAlert2 confirmation dialog

Answer №1

Answer №2

Similar questions

Ensuring the accuracy of paths in VueJS

What is the best way to remove an item from my online shopping cart using JavaScript?

Unusual occurrences when making several ajax requests to a single URL

Provide the email address to use on the forum

Having trouble with creating SQLite tables using JavaScript within a for loop

Looking for assistance with getting 2 functions to run onLoad using Ajax - currently only 1 is operational

The Vue carousel will continue to autoplay without interruption, even when the flag is changed

Excessive alerts being produced within the loop

Incorporate dynamic rules into a CSS stylesheet

Nodemailer is having issues, what could be the problem?

The Magnificent jQuery Widget Factory's _trigger Instance

Error: JSON array contains unterminated string literal

Transforming a THREE.js shader into a PIXI.js shader

What is the best way to determine if an application has been installed on an Android device while browsing a website?

"Encountering a 403 error while using the request method in Node.js

Issue with Laravel query not including date filter in where clause

Exploring elementary Expressjs query concepts

validation of dialog forms

What is the best way to display long text in a browser alert without it being cut off?

Retrieve the order in which the class names are displayed within the user interface