Javascript fetch 异常导致死停

Question

我有以下代码：

        function makeid(length) {
            var result = '';
            var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
            var charactersLength = characters.length;
            for ( var i = 0; i < length; i++ ) {
                result += characters.charAt(Math.floor(Math.random() * 
            charactersLength));
            };
            return result;
        };

        var instance = "{{ user }}" + makeid(16);
        var checksum = "First Request Not recieved";
        console.log(instance);
        function downloadPlay(){
            console.log("\ndownloadPlay - Begin\n")
            try{
                fetch("/file?instance=" + instance + "&checksum=" + checksum)
                .then(function(resp) {
                    resp.headers.forEach(
                        function(val, key) {
                            // console.log("key, val: " + key + ", " + val); 
                            if(key == "checksum"){
                                console.log("checksum: " + val); 
                                checksum = val;
                            };
                        }
                    );
                }
            )
            .then(file => {
                var audio = new Audio("/file?instance=" + instance + "&checksum=" + checksum);
                console.log("Done");
                audio.addEventListener('ended', (event) => {
                    delete audio;
                    downloadPlay();
                });
                audio.play();
                }
            )
            } catch (error) {
                console.log("Something went wrong, Retrying: " + error);
            }
            console.log("downloadPlay - Complete\n")
        };
        downloadPlay();

当承诺成功时，这非常有效。然而，当它失败时（例如当客户端设备切换网络时，即 wifi 到数据或只是同一 wifi 网络上的不同接入点），无论有多少 while 循环、额外的递归点或 try 和 catch 语句，它都会停止并永远不会恢复我用。到目前为止，我能做的最好的事情就是让它播放越来越多的音频，大部分是彼此同步的，我只是不明白为什么。看来我对这个承诺的实际功能普遍缺乏理解，但无论我阅读/观看多少教程，我的缺乏理解似乎仍然没有改变。

如果有帮助，这里的代码有点起作用：

        function makeid(length) {
            var result = '';
            var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
            var charactersLength = characters.length;
            for ( var i = 0; i < length; i++ ) {
                result += characters.charAt(Math.floor(Math.random() * 
            charactersLength));
            };
            return result;
        };

        var instance = "{{ user }}" + makeid(16);
        var checksum = "First Request Not recieved";
        console.log(instance);
        function downloadPlay(){
            console.log("\ndownloadPlay - Begin\n")
            try{
                console.log('fetching')
                fetch("/file?instance=" + instance + "&checksum=" + checksum)
                .then(function(resp) {
                    resp.headers.forEach(
                        function(val, key) {
                            // console.log("key, val: " + key + ", " + val); 
                            if(key == "checksum"){
                                console.log("checksum: " + val); 
                                checksum = val;
                            };
                        }
                    );
                }
            ).catch(function(error) {
                console.log('request failed', error)
                console.log('retrying')
                downloadPlay();
                return;
            })
            .then(file => {
                var audio = new Audio("/file?instance=" + instance + "&checksum=" + checksum);
                console.log("Done");
                audio.addEventListener('ended', (event) => {
                    delete audio;
                    downloadPlay();
                });
                audio.play();
                }
            )
            } catch (error) {
                console.log("Something went wrong, Retrying: " + error);
            }
            console.log("downloadPlay - Complete\n")
        };
        downloadPlay();

任何关于我做错了什么的解决方案或非常简单的解释将不胜感激 预先感谢:)

Answer 1

你可以做这样的事情

只需删除注释并使用原来的抓取功能

除非使用 async wait，否则不能将 try catch 与 Promise 一起使用

const fakeChecking = Promise.resolve({headers: {checksum: 'aaaa'}})
const errorChecking = Promise.reject('error')

function downloadPlay(fetching) {
  console.log("\ndownloadPlay - Begin\n")

  console.log('fetching')
  fetching
    .then((resp) =>  resp.headers.checksum)
    .then(checksum  => {
      /*var audio = new Audio("/file?instance=" + instance + "&checksum=" + checksum);
      console.log("Done");
      /*audio.addEventListener('ended', (event) => {
        delete audio;
        downloadPlay();
        console.log("downloadPlay - Complete\n")
      });
      audio.play();*/
      console.log("downloadPlay - Complete\n")
    })
    .catch(function(error) {
      console.log('request failed', error)
      console.log('retrying')
      downloadPlay(fakeChecking);
    })
   
};

downloadPlay(errorChecking);