Javascript 使用承诺时显示JS/HTML按钮状态/状态？

我试图控制从端点获取一些数据的按钮的状态，返回时间未知或可能超时

我的按钮是一个典型的HTML

，它使用

onclick='doWork（）；'

我为默认状态（提交）、单击（加载）和完成（完成）定义了类

我必须使用这个请求API（）来调用我的端点

请求API示例：

client.request.get("URL", options)
  .then(
    function(data) {
      //handle "data"
      //"data" is a json string with status, headers, and response.
    },
    function(error) {
      //handle failure
    }
  );

方法


我的方法是在
doWork（）中将按钮设置为加载状态

在返回承诺时交换
函数（数据）
中的类，或在返回
函数（错误）

示例代码：

function doWork(){
 $('#btnSave').addClass('loading');
 client.request.get("URL", options)
  .then(
    function(data) {
       $('#btnSave').removeClass('loading');
       $('#btnSave').addClass('completed');
      // do other stuff
    },
    function(error) {
       $('#btnSave').removeClass('loading');
       $('#btnSave').addClass('failed');
       // do some other stuff
    }
  );
}

问题


有没有更简单的方法？这似乎是一个常见的用例
在初始的
then（）
返回后链接和处理按钮状态，在
.request.get.then（）中处理状态，然后（//此处处理按钮状态）
有什么好处吗
在
.catch（）
中重置按钮是否可以防止用户被困在加载状态，或者通过某种超时来重置按钮是否更好

我仍然在等待承诺，因此任何有助于我学习更多东西的见解都非常感谢。
我对承诺也有点陌生，但我认为你做得很好。
要获得更好的语法，您可能需要将按钮存储在变量中，并使用函数更改类（“completed”或“failed”）

您的代码如下所示：

函数doWork（）{
设btn=$（#'btnsave'）；
btn.addClass（“加载”）；
client.request.get（“URL”，选项）
.那么(
功能（数据）{
finishBtnLoading（btn，“已完成”）
//做其他事情
},
函数（错误）{
finishBtnLoading（btn，“失败”）
//做些别的事情
}
);
}
函数finishBtnLoading（btn，newClass）{
btn.removeClass（“加载”）；
btn.addClass（新类）；
}

正如我所说，我对承诺是新手，但是你的代码看起来和我能写的一模一样，但是如果有更好的技能/经验的人有一些建议，我很乐意阅读
 我对承诺也有点陌生，但我认为你做得很好。
要获得更好的语法，您可能需要将按钮存储在变量中，并使用函数更改类（“completed”或“failed”）

您的代码如下所示：

函数doWork（）{
设btn=$（#'btnsave'）；
btn.addClass（“加载”）；
client.request.get（“URL”，选项）
.那么(
功能（数据）{
finishBtnLoading（btn，“已完成”）
//做其他事情
},
函数（错误）{
finishBtnLoading（btn，“失败”）
//做些别的事情
}
);
}
函数finishBtnLoading（btn，newClass）{
btn.removeClass（“加载”）；
btn.addClass（新类）；
}

正如我所说，我对承诺是新手，但是你的代码看起来和我能写的一模一样，但是如果有更好的技能/经验的人有一些建议，我很乐意阅读
 您使用的方法很好，并且无需进行链接，因为您只有一个异步调用。当您处理多个异步调用时，链接非常有用

至于第三个问题，我不明白您将在哪里使用catch，因为您的请求API（）不支持它（至少不符合文档要求）。此外，您还可以在回调函数中处理请求超时，以处理如下错误：

    function doWork(){
     $('#btnSave').addClass('loading');
     client.request.get("URL", options)
     .then(
      function(data) {
         $('#btnSave').removeClass('loading');
         $('#btnSave').addClass('completed');
         // do other stuff
      },
      function(error) {
         if(error.status == 504){
           console.log('request timeout');
           //do whatever you want
         }
         $('#btnSave').removeClass('loading');
         $('#btnSave').addClass('failed');
         // do some other stuff
      }
     );
     }

此外，由于文档中提到的请求超时默认为“6秒”，因此您不会长时间处于加载状态。如果请求超时，错误回调将处理错误。
您使用的方法很好，并且无需链接，因为您只有一个异步调用。链接在处理多个异步调用时非常有用

至于第三个问题，我不明白您将在哪里使用catch，因为您的请求API（）不支持它（至少不符合文档要求）。此外，您还可以在回调函数中处理请求超时，以处理如下错误：

    function doWork(){
     $('#btnSave').addClass('loading');
     client.request.get("URL", options)
     .then(
      function(data) {
         $('#btnSave').removeClass('loading');
         $('#btnSave').addClass('completed');
         // do other stuff
      },
      function(error) {
         if(error.status == 504){
           console.log('request timeout');
           //do whatever you want
         }
         $('#btnSave').removeClass('loading');
         $('#btnSave').addClass('failed');
         // do some other stuff
      }
     );
     }

此外，由于文档中提到的请求超时默认为“6秒”，因此您不会长时间处于加载状态。如果请求超时，错误回调将处理错误