Как отклик доступа axios в sweetalert2 подтвердить диалог

Question

Я, вероятно, не понимаю обещания полностью, даже после прочтения https://gist.github.com/domenic/3889970, Мне нужно получить доступ к ответу от axios в результате подтверждения подсластителя.

это мой код

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;
    })

ответ не определен, думаю, я не понимаю, как работают области действия в js

Answer 1

Я прочитал ваш комментарий, и вы сказали, что обратный вызов - это URL, раньше я использовал axios и sweetalert, похоже, вам нужно передать «обратный вызов» в формате json. Ты сделал это? Если нет, то это пример использования Laravel. Извините за мой английский.

Controller.php

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

View (Vue, использующий Sweetalert), общий Sweetalert тоже должен работать

...
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
axios.post("{{route('someroute')}}",{id:xid}) //you can ignore this, this is just passing 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");
});
...

Надеюсь, это кому-нибудь поможет:)

Answer 2

Вот пример, который вы можете отразить. Он берет URL, полученный от успешного вызова API (URL находится в ответе API), а затем отправляет другой запрос ... это должно продемонстрировать вам, что вы можете делай что хочешь там ... запускай другую функцию ... буквально, * все, что ты хочешь делать, ты можешь делать в этом * .then(...) блоке ..

---

Пример CodeSandbox (дополнен связанными оповещениями и вызовами API)

РЕДАКТИРОВАТЬ: обновил мой ответ, чтобы показать, как вы можете использовать данные, которые вы получаете из вызовов API ....

---

// Modal.vue component - holds the SweetAlert2

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