Question

我在甜蜜提醒中使用SWAL2 preConfirm()函数来测试服务器端ID是否正确...将socket.emit()与acknowledgements一起使用

我希望能够使用Swal.showValidationMessage("Some error")，具体取决于返回的服务器错误...

但是preConfirm函数仅适用于promises函数，这意味着使用.then().catch()...

我发现的唯一解决方法是一个丑陋的方法：

 Swal.fire({
  title: 'ID ?',
  input: 'text',
  showCancelButton: true,  
  confirmButtonText:'Go',
  cancelButtonText: "Cancel",
  showLoaderOnConfirm: true,
  preConfirm: (id) => {
    if(id.trim().length === 3){
      socket.emit('isID', id, this.props.name, (r) => {

        // Here I have the answer from the server so I can test the returned
        // value and eventualy set an error which I couldn't if I didn't put the "TRICK" part ( see below )
        if(r === 'ok'){
          Swal.fire({
            title: `ok !!`,
            type: 'success'
          });
        } else {
           Swal.showValidationMessage("Server error !");
        }
      });

      Swal.showValidationMessage(""); // --> HERE IS THE 'TRICK'

    } else {
      Swal.showValidationMessage(" it's 3 letters for an id mate !");
    }
  },
});

让我解释一下：使用Swal.showValidationMessage("")可以使甜蜜警报保持打开状态，以便以后在服务器错误时实现该警报...

问题是，即使服务器的应答正确，连接数也很低，仍然可以看到空消息

关于如何改善这一点的任何建议？

（在下面的代码段中，我使用带有超时的promise来模仿较长的服务器答案）

Swal.fire({
      title: 'ID ?',
      input: 'text',
      showCancelButton: true,  
      confirmButtonText:'Go',
      cancelButtonText: "Cancel",
      showLoaderOnConfirm: true,
      preConfirm: (id) => {
        if(id.trim().length === 3){
          let r = new Promise(function(resolve, reject) {
            setTimeout(function() {
              Swal.fire({
                title: `Server answered OK no need to error message !`,
                type: 'success'
              });
            }, 2000);
          });
       
          Swal.showValidationMessage(""); // --> HERE IS THE 'TRICK'
            
        } else {
          Swal.showValidationMessage(" it's 3 letters for an id mate ;)");
        }
      },
    });

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8.0.7/dist/sweetalert2.all.min.js"></script>

编辑凹凸

Answer 1

您可以使用另一个自定义的Promise函数来调用socket.emit，例如：

emit(event, data,prop) {
   return new Promise((resolve, reject) => {
       if (!this.socket) {
           reject('No socket connection.');
       } else {
           this.socket.emit(event, data, prop, (response) => {
              resolve(response);
           });
       }
   });
 }

然后您的代码将如下所示：

Swal.fire({
  title: 'ID ?',
  input: 'text',
  showCancelButton: true,  
  confirmButtonText:'Go',
  cancelButtonText: "Cancel",
  showLoaderOnConfirm: true,
  preConfirm: (id) => {
    if(id.trim().length === 3){
      return emit('isID', id, this.props.name)
      .then((r) => {
        if(r === 'ok'){
          return r;
        } else {
           Swal.showValidationMessage("Server error !");
        }
      })
      .catch(error => {
        Swal.showValidationMessage(
          `Request failed: ${error}`
        )
      })
    } else {
      Swal.showValidationMessage(" it's 3 letters for an id mate !");
    }
  },
  allowOutsideClick: () => !Swal.isLoading()
}).then((result) => {
  if (result.value) {
    Swal.fire({
        title: `ok !!`,
        type: 'success'
      });
  }
})

希望有帮助。

Answer 2

在@ Mike85的帮助下，这是有效的方法：

const gonnaWork = false;
const promiseWrapper = (id) => {
   return new Promise((resolve, reject) => {
       //this.socket.emit(id, data, data2, (response) => {
       //   resolve(response);
       //});
       setTimeout(function() {
          resolve(gonnaWork ? 'ok' : 'ko');
       }, 2000);
   });
}

Swal.fire({
  title: 'ID ?',
  input: 'text',
  showCancelButton: true,  
  confirmButtonText:'Go',
  cancelButtonText: "Cancel",
  showLoaderOnConfirm: true,
  preConfirm: (id) => {
    if(id.trim().length === 3){
      return promiseWrapper(id)
      .then((r) => {
        if(r === 'ok'){
          return r;
        } else {
           Swal.showValidationMessage("Server error !");
        }
      })
      .catch(error => {
        Swal.showValidationMessage(
          `Request failed: ${error}`
        )
      })
    } else {
      Swal.showValidationMessage(" it's 3 letters for an id mate !");
    }
  },
  allowOutsideClick: () => !Swal.isLoading()
}).then((result) => {
  if (result.value) {
    Swal.fire({
        title: `ok !!`,
        type: 'success'
      });
  }
})

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8.0.7/dist/sweetalert2.all.min.js"></script>

Sweet Alert 2和Socket.io在preConfirm中使用发射结果

2 个答案: