如何在jQuery中实现 AJAX 的链接方法?

aoyhnmkz  于 2023-05-17  发布在  jQuery
关注(0)|答案(2)|浏览(80)

我有几个 AJAX 请求,将按顺序执行。

$.ajax({
  url: 'https://dummyjson.com/products/1',
  success: (res) => {
    console.log(1, res);
    $.ajax({
      url: 'https://dummyjson.com/carts/1',
      success: (res) => {
        console.log(2, res);
        $.ajax({
          url: 'https://dummyjson.com/posts/1',
          success: (res) => {
            console.log(3, res);
            $.ajax({
              url: 'https://dummyjson.com/comments/1',
              success: (res) => {
                console.log(4, res);
              }
            });
          }
        });
      }
    });
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

我知道这可以用new Promise((resolve,reject)=>{})async & await函数来完成,但是我想使用链接方法来像这样顺序地调用 AJAX 。

ajax1.then((res)=>ajax2).then((res)=>ajax3).then((res)=>ajax4).catch(e => e);

如何用jQuery实现这一点?

cuxqih21

cuxqih211#

希望这会有帮助。

function ajaxSend(data){
    $.ajax({
      url: data.url,
      context: data.body
    }).done(function(res) {
      return ajaxSend(res);
    }).fail(function() {
    return null;
  })
}

ajaxSend(data);
xfb7svmp

xfb7svmp2#

我创建了一个名为ajax的自定义函数来实现链接方法。

let ajax = (url, counter) => $.ajax({
  url: url,
  success: (res) => {
    console.log(counter, res);
  }
});

ajax('https://dummyjson.com/products/1', 1).then(() =>
ajax('https://dummyjson.com/carts/1', 2)).then(() =>
ajax('https://dummyjson.com/posts/1', 3)).then(() =>
ajax('https://dummyjson.com/comments/1', 4)).catch((err) =>
console.error(err));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

相关问题