在 jQuery.ajax() 中重写 fetch 函数答案

【问题标题】：Rewite fetch function in jQuery.ajax()在 jQuery.ajax() 中重写 fetch 函数
【发布时间】：2019-12-23 04:19:48
【问题描述】：

当前使用 fetch 的解决方案

我们目前已实现此功能并且运行良好。

function setupCKConnect() {

    fetch('ajax/myfile.php?id=1234567')
        .then(response => { 
            response.json()
        .then(json => {
            function1(json)
        .then(data => {
            function2()
        })
        .catch(data => {
            setupCKConnect()
        });
      });
    });

  };

上面代码的解释

对 myfile.php 的 ajax 调用检索在 function1() 中使用的 json 响应。
function1() 然后监听来自另一个函数的回调（有时长达 10 分钟）
function1() 收到回调并执行后，function2() 会轮询数据库以获取结果。

为什么我们需要改变

不幸的是，我们的客户群中似乎有很大一部分使用不支持获取的设备。

因此我尝试使用 jQuery.ajax() 重写它。

我知道这似乎是倒退，但在这种情况下是必要的。

新代码

下面是我到目前为止的代码。请注意，我没有嫁给 jQuery，因为有人有更好的选择。

到目前为止，我有这个代码：

function setupCKConnect() {

    $.ajax({
        type: "GET",
        dataType: 'json',
        url: 'ajax/myfile.php?id=1234567'
    }).done(function(data) {  
        function1(data)
    }).done(function() {  
        function2()
    }).fail(function(jqXHR, textStatus, errorThrown) {  
        setupCKConnect()
    });

};

新代码的问题

新代码实际上运行良好，除了一个小点

function2() 立即执行，而不是等待 function1() 完成。

谁能帮助解释如何在 function1() 完成之前停止 function2() 的执行

感谢帮助

【问题讨论】：

你能修正你的语法吗？在json();.then( 附近有序列;. 是非法的。
是的，抱歉...已修复
github.com/github/fetch 您的浏览器支持有多远？这个 polyfill 负责 IE 10 和 11。
问题在于 iPhone 上的 safari 主要是旧版本......我们的许多客户都有 2017 年之前的 iphone，但似乎从未更新过任何东西

标签： javascript jquery ajax xmlhttprequest fetch-api

【解决方案1】：

所以 ajax 响应返回一个延迟对象而不是一个承诺。这些看起来很相似，但是将两者混合起来可能会很不稳定。我基于deferred.done documentation 创建了一个js fiddle 来说明我的意思。

我敢猜测function1(json) 会返回一个承诺。 deferred 得到一个值（未解决的承诺）并认为“很好，让我们继续前进”你要么需要异步/等待，要么在该函数调用上调用，以便执行暂停其他任何事情。

【讨论】：

【解决方案2】：

如果您修复原始代码的缩进，您会发现问题。对function2() 的调用不在链接到第一个.then() 的.then() 中，而是在function1() 的结果上调用。而且.catch()也是从那里调用的，而不是从fetch()调用的，所以你不能用.fail()作为替代。

function setupCKConnect() {
  fetch('ajax/myfile.php?id=1234567')
    .then(response => {
      response.json()
        .then(json => {
          function1(json)
            .then(data => {
              function2()
            })
            .catch(data => {
              setupCKConnect()
            });
        });
    });
};

所以你需要类似地构造 jQuery 代码。

function setupCKConnect() {
    $.ajax({
        type: "GET",
        dataType: 'json',
        url: 'ajax/myfile.php?id=1234567'
    }).done(function(data) {  
        function1(data)
            .then(function(data) {
                function2()
            })
            .catch(function() {  
                setupCKConnect(data)
            });
    })
};

这假设 function1() 与原始版本相似，因此它会返回一个承诺。

【讨论】：