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.

// 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.

// 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

Initial position of jQuery slider

The system failed to locate the necessary dependency: * firebase within the file path ./src/firebase/firebase.js

Mongoose is unable to update arrays, so it will simply create a new array

The Vue-cli webpack development server refuses to overlook certain selected files

Obtaining response object when encountering 401 error in AngularJS

The functionality of jQuery touch events on iOS devices is not functioning properly

Is it possible to directly utilize functions from an imported JavaScript library, such as Change Case, within the template of a Vue component?

Module for managing optional arguments in Node.js applications

What are the steps for implementing responsive design animation in my particular scenario?

Electron: Interactive menu customization

Search for data in Mongoose by utilizing a query object that has been obtained from a query string

jQuery - patience is required until all elements have completely faded away

Why isn't changing the property of a Sequelize instance having any effect?

Issues with jQuery functionality occurring when trying to display or hide div contents on dynamically loaded AJAX content

Can you please explain the process of retrieving the value of an item from a drop-down menu using JavaScript?

Choose not to alter the display value during keyup and keydown events, while still triggering the change event

Achieving functionality with dropdown menus in jQuery

Effectively implementing an event observer for dynamically loaded content

Discovering a specific URL link element within the DOM using webdriver.io

limit stop choice