javascript - 无法按顺序触发两个 jQuery ajax 调用

Question

我正在使用一个 JS API，我可以使用 POST 和 GET 访问它。它适用于电子商务平台 (Shopify)，但我认为此问题与平台无关。

我已经能够编写两个 POST 请求，无论是在代码中还是在控制台中，它们都完全按照需要单独执行。但是，我根本无法让他们一个接一个地开火(在我的情况下，第一个必须在第二个开始之前完成)。

第一个请求如下(清空购物车，不需要发送数据，只需要POST URL):

  function clearCart(){
    $.ajax({
      url: '/cart/clear.js',
      method: 'POST',
      success: function(){
        console.log("cleared");  
      },
     error: function(jqXHR, textStatus, errorThrown) {
          console.log('jqXHR:');
          console.log(jqXHR);
          console.log('textStatus:');
          console.log(textStatus);
          console.log('errorThrown:');
          console.log(errorThrown);
     }
    });
  }

第二个请求如下(这会将某个商品和一定数量的所述商品添加到购物车，然后重定向到结帐):

function cartAdd(quantity, id){
    $.ajax({
      url: '/cart/add.js',
      method: 'POST',
      data: {
        quantity: quantity,
        id: id
      },
      success: function(data){
        console.log("added");
        window.location.href = '/checkout';
      },
      error: function(jqXHR, textStatus, errorThrown) {
          console.log('jqXHR:');
          console.log(jqXHR);
          console.log('textStatus:');
          console.log(textStatus);
          console.log('errorThrown:');
          console.log(errorThrown);
     }
    });
  }

我将它们链接在一起的方式如下所示(变量已正确填充):

$.when(
    clearCart(),
    cartAdd(variantQuantity, variantID)
);

经过多次测试，我有时似乎让代码正常工作(可能是 1/10 的时间)所以我被引导相信这是一个时间问题，虽然我不能肯定地说' t 始终如一地测试这些结果。

我唯一真正的线索是，当我使用 .done() 时，这些函数单独工作，但是当我使用 .success() 时，它们返回以下内容:

SyntaxError: Unexpected token :
    at eval (<anonymous>)
    at jquery-1.10.2.min.js?1013630…:4
    at Function.globalEval (jquery-1.10.2.min.js?1013630…:4)
    at text script (jquery-1.10.2.min.js?1013630…:6)
    at On (jquery-1.10.2.min.js?1013630…:6)
    at k (jquery-1.10.2.min.js?1013630…:6)
    at XMLHttpRequest.r (jquery-1.10.2.min.js?1013630…:6)

有什么帮助吗？

更新 我实际上能够通过显式指定“json”数据类型来解决语法错误。不管怎样，这两个函数仍然表现不稳定，有时只是按正确的顺序工作。

Answer 1

如果您的评估是正确的，您可以简单地让函数同步运行，以确保您的第二个函数仅在第一个函数执行时被调用。方法如下:

  function clearCart(){
    $.ajax({
      url: '/cart/clear.js',
      method: 'POST',
      async: false,
      success: function(){
        console.log("cleared");  
      },
     error: function(jqXHR, textStatus, errorThrown) {
          console.log('jqXHR:');
          console.log(jqXHR);
          console.log('textStatus:');
          console.log(textStatus);
          console.log('errorThrown:');
          console.log(errorThrown);
     }
    });
  }

注意 async 属性告诉浏览器在调用下一个函数之前等待请求完成。您不需要在第二个函数上设置它，因为您不希望在该函数之后执行任何操作。

此外，我建议您在第一个函数中使用回调而不是 async=false，因为异步会损害用户体验。

引用:http://api.jquery.com/jquery.ajax/