Question

我有此代码：

$.ajax({
    method: 'GET',
    url: 'a.php'
}).done(function(res){
    $.ajax({
        method: 'POST',
        url: 'b.php',
        data: {data: res}
    }).done(function(res){
        console.log(res);
        $.ajax({
            method: 'POST',
            url: 'c.php',
            data: {data: res}
        }).done(function(res){
            console.log(res);
        });
    });
});

如您所见，它只是三个AJAX函数。第二个取决于第一个，第三个取决于第二个。

如何将其转换为Promise，从而避免使用回调并使代码更易于阅读？

Answer 1

使用jQuery承诺，它应该看起来像这样，各个提取之间明确的关注点分离：

function a() {
    return $.get('a.php');
}

function b(res) {
    return $.post('b.php', {data: res});
}

function c(res) {
    return $.post('c.php', {data: res});
}

function d(res) {
    console.log(res);
}

a().then(b).then(c).then(d);

Answer 2

您似乎正在尝试发出~~ synchronous ~~ 顺序网络请求（等待第一个完成，然后再执行第二个），在这种情况下，您可以执行以下任一操作：

//
// chaining fetches with .then()
//
fetch('a.php')
    .then(res => fetch('b.php', { body: res.json() }))
    .then(res => fetch('c.php', { body: res.json() }))
    .then(res => res.json())
    .then(res => console.log(res)); 

//
// my fav, use async & await
//
(async () => {
    const a = await fetch('a.php'); 
    const b = await fetch('b.php', { body: a.json() });
    const c = await fetch('c.php', { body: b.json() }).then(res => res.json());
    console.log(c); 
})();

编辑：我假设从您的问题的标题开始，您想要的是Javascript（而不是jQuery）的答案。确实没有理由不使用fetch，除非您需要支持旧的浏览器，但是.....这是一些Vanilla JS示例。

编辑2：我假设您需要JSON，但是您可以将获取的响应转换为文本，html，json，也许也可以转换为其他一些。.MDN Fetch API

如何将三个链接的回调（AJAX）转换为Javascript中的Promises

2 个答案: