Как получить данные, отправленные обратно на Ajax-вызов SweetAlert2? - PullRequest
Новая
       6

Как получить данные, отправленные обратно на Ajax-вызов SweetAlert2?

0 голосов
/ 23 октября 2018

Я создаю веб-сайт и использую исключительно SweetAlert2 для своих методов подтверждения (уведомление об успехе, редактирование или удаление).

Так как это занимает довольно много строк, я решилчтобы установить все, что связано со SweetAlert в JS-файле, который я бы вызвал и использовал как функцию, следующим образом: 

// src/config/SweetAlert.js

import swal from 'sweetalert2'
import 'sweetalert2/src/sweetalert2.scss'
import axios from 'axios'

const API = axios.create({
  baseURL: 'http://localhost:3333/api/v1'
})

const SweetAlert = {
  delete (title, text, type, confirmation, url) {
    swal({
      title: title,
      text: text,
      type: type,
      showCancelButton: true,
      showLoaderOnConfirm: true,
      confirmButtonText: 'Delete',
      preConfirm: () => {
        return API.delete(url)
          .then(response => {
            return response
          })
      },
      allowOutsideClick: () => !swal.isLoading()
    }).then((result) => {
      if (result.value) {
        swal({
          type: 'success',
          title: confirmation
        })
      }
    })
  },

  // Some other possibilities
}

export default SweetAlert

И я использую его следующим образом: 

// some methods
handleDelete (post, index) {
  const result = SweetAlert.delete(
    `Delete "${post.title}"?`,
    `Are you sure you want to delete "${post.tite}"?`,
    'warning',
    `"${post.title}" was successfully deleted`,
    `/post/${post.id}`
  )
}

Я быЯ хотел бы убедиться, что все прошло хорошо в моем API, прежде чем удалять удаленный элемент из списка.Я попытался добавить return result.value, так как есть следующий блок кода: 

if (result.value) {
  swal({
    type: 'success',
    title: confirmation
  })
  // Returns undefined as soon as SweetAlert shows up
  return result.value
  // shows up only when I click "Delete" on the Swal modal, has the infos I need
}

Я попытался изменить свой код на следующее: 

const result = SweetAlert.delete(  // my initial code )

if (result.data === 'ok') {
    this.posts.splice(index, 1) 
}

Но все, что я получаю, это "undefined".

Есть ли способ получить данные такого рода?

Заранее спасибо

1 Ответ

0 голосов
/ 23 октября 2018

Swal возвращает Promise, поэтому используйте его в своей функции delete следующим образом: 

delete (title, text, type, confirmation, url) {
    let res = swal({
      // your code here ...
    });
    res.then(result => {
      // your code here ...
    })
    return res;
)

После этого вы можете использовать его следующим образом: 

SweetAlert.delete(  // my initial code )
    .then(result => {
        if (result.value) {
            this.posts.splice(index, 1);
        }
    })
    .catch(error => {
        console.log('error', error)
    })
...