如何链接包含 then 和 catch 块的嵌套承诺？

Question

如何链接ES6 嵌套Promises 与每个Promise 在嵌套有then 和catch 块？

例如，考虑到每个 API 调用都返回一个 @ 987654332@?

$.ajax({ 
    url: 'url1', 
    success: function() {
        console.log('URL1 call success');
        $.ajax({    
            url: 'url2',
            success: function() {
                console.log('URL2 call success');
            },
            error:function() {
                console.log('URL2 call error');
            }
         })
    },
    error: function() {
        console.log('URL1 call error');
        $.ajax({
            url: 'url3',
            success: function() {
                console.log('URL3 call success');
            },
            error:function() {
                console.log('URL3 call error');
            }
         })
    }})

Answer 1

如果你想链接 Promise，你可以让每个处理程序返回一个 Promise，然后从那里链接 then 和 catch 函数。我相信这表明了你想要做什么：

const getPromise = (time, reject=false) => new Promise((res, rej) => {
  setTimeout(() => reject ? rej() : res('done'), time);
});

getPromise(500)
  .then(() => {
    console.log('first response');
    return getPromise(500, false);
  })
  .then(() => {
    console.log('second response');
    return getPromise(500, true);
  })
  .catch((error) => {
    console.log('you can have catch statements return promises, too');
    return getPromise(700, true)
  })
  .then(() => {
    // this structure falls down here; is this a response to the promise returned from
    // the catch, or the promise returned from the 'second response' part?
    console.log('third response');
  })
  .catch(() => {
    console.error('hit an error');
  });

但是，重要的是要意识到这是一个没有分支逻辑的链。使用结构handle success -> handle error -> handle success，一旦你的错误处理程序返回有效的承诺，链的其余部分就无法判断之前发生的事情是成功处理程序还是错误处理程序的结果。这里没有分支逻辑，你需要嵌套 promise 来实现。

这里有两个主要的选择。首先，您可以抛出不同的错误类型并在单个 catch 处理程序中处理每个不同的错误。其次，您可以改用async/await 语法。任何一个都可能适合你，但我认为他们需要一个单独的问题。

Answer 2

你试过.done和.fail吗？

你可以重写代码如下

const doAjaxCall = (url) => $.ajax({ url })

const callURL = (url) => doAjaxCall(url)
  .done(() => console.log(`${url} is ok!`) )
  .fail(() => console.log(`${url} failed!`) );

doAjaxCall('/url1')
.done(() => {
  console.log('url1 is ok!');
  callURL('/url2');
 })
.fail(callURL('url3'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 3

This can be written like this :

function makeAjaxCall(url){
    return new Promise((s, f) => {
        $.ajax({ 
            url: url, 
            success: s,
            error: f
        })
    })
}
makeAjaxCall('url1')
.then((data) => {
    console.log('URL1 call success');
    return makeAjaxCall('url2')
}, (error) => {
    console.log('URL1 call error');
    return makeAjaxCall('url3')
})
.then(() => {
    //It Could be Either url2 success or url3 success
}, () => {
    //It Could be Either url2 failure or url3 falure
})