如何在不使用“async：false”和不使用回调的情况下等待 ajax 调用完成？

Question

我有以下 TypeScript 为我的视图上的可点击元素定义了一个 KnockoutJS 绑定处理程序：

module MyModule {
    export interface ICopyButtonParams {
        dataUrl: string;
    }

    ko.bindingHandlers.copyButton = {
        init: (element: HTMLElement, valueAccessor: () => ICopyButtonParams) => {
            var options: any = ko.utils.unwrapObservable(valueAccessor());
            if (!options.dataUrl) {
                return;
            }

            new Clipboard(element, {
                text: () => {
                    var clipboardData: string;

                    $.ajax({
                        url: options.dataUrl,
                        type: "GET",
                        contentType: "application/json",
                        cache: false,
                        async: false,
                        success: (result: SubmitResult) => {
                            clipboardData = result.Data;
                        }
                    });

                    return clipboardData;
                }
            });
        }
    };
}

此绑定处理程序的作用是将可单击元素转换为启用Clipboard.JS 的元素，该元素在单击时将字符串存储在剪贴板中。在我的例子中，我想利用 Clipboard.JS 的动态文本功能，您可以将一个函数传递给 Clipboard 构造函数，该构造函数返回要存储在剪贴板中的文本。在这个函数中，我想调用一个返回要存储的文本的 API。

由于这种架构的性质，我无法使用带有成功回调的标准 ajax 调用，因为这意味着剪贴板文本无法及时解析。

作为权宜之计，您会在我的代码中注意到我已使我的 ajax 调用异步（不好，我知道）。由于从 JQuery 1.8 开始不推荐使用“异步”标志，我正在尝试考虑另一种方法。

有什么想法吗？

Answer 1

我认为更好的方法是自己处理点击事件。

然后在您的 ajax 回调中创建一个 textarea，设置值，选择并调用 document.execCommand('copy')，就像 Clipboard.JS 一样。与此类似的东西（对不起，在打字稿上用 javascript 代替）

ko.bindingHandlers.copyButton = {
  init: function(element, valueAccessor) {
    var url = ko.utils.unwrapObservable(valueAccessor());

    $(element).click(function() {
      $.ajax({
        url: url,
        type: "GET",
        contentType: "application/json",
        cache: false,
        async: false,
        success: function(result) {
          var ta = document.createElement('textarea');
          document.body.appendChild(ta);
          ta.value = result;
          ta.select();
          var r = document.createRange();
          r.selectNode(ta);
          document.getSelection().addRange(r);
          document.execCommand('copy');
          document.body.removeChild(ta);
        }
      });
    });
  }
};

我有一个类似的工作示例 here（没有 ajax 请求）