代码之家 › 专栏 › 技术社区 › trzczy

当一个获取url出现net::ERR_CONNECTION_REFUSED错误时,获取任务的Promise.rese将停止

fetch-api promise javascript

0

trzczy · 技术社区 · 2 年前

当一个url不可用时,我试图使用另一个url,但承诺的竞争是一个获取的连接错误拒绝了另一个获取过程。

在代码中,您可以看到 reverse 被注释的函数。取消注释时,竞争不会被拒绝。也许这是一个提示。如何改进代码以使用替代URL?(好的url与端口11112一致)

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Home</title>
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <link href="" rel="stylesheet" title="style">
    <script>
        (() => {
            let urls = [
                'http://localhost:11997/style.css',
                'http://localhost:11112/style.css'
            ]
            // urls = urls.reverse();
            console.log(urls);
            let i = 0, promises = [];
            while (urls.length) {
                const url=urls.shift();
                console.log(url);
                promises.push(fetch(url, {method: 'HEAD'}));
            }
            p = Promise.race(promises);
            console.log(p);
            p
                .then(response => {
                    console.log(response.url);
                    return response.url;
                })
                .then(res_data => {
                    document.querySelector('[title=style]').href = res_data;
                })
            p
                .catch(e => console.log('trzczy', e))
        })();
    </script>
</head>
<body>
content
</body>
</html>

错误

(2)Â ['http://localhost:11997/style.css', 'http://localhost:11112/style.css']
index.html:19 http://localhost:11997/style.css
index.html:19 http://localhost:11112/style.css
index.html:23 PromiseÂ {<pending>}
index.html:20 
        
        
       HEAD http://localhost:11997/style.css net::ERR_CONNECTION_REFUSED
(anonymous) @ index.html:20
(anonymous) @ index.html:34
index.html:33 trzczy TypeError: Failed to fetch
    at index.html:20:31
    at index.html:34:11
index.html:20 
        
        
       Uncaught (in promise) TypeError: Failed to fetch
    at index.html:20:31
    at index.html:34:11
(anonymous) @ index.html:20
(anonymous) @ index.html:34
Promise.then (async)
(anonymous) @ index.html:29
(anonymous) @ index.html:34

1 回复 | 直到 2 年前

1

Heiko Theißen 2 年前

Promise.race 当一种成分不合格,而另一种成分尚未沉淀时,就会被拒绝。使用 Promise.any 相反,因为当一种成分被满足时,即使另一种成分已经被拒绝,这也会实现。另请参阅 here .

function twoRequests() {
  return [
    fetch("https://httpbin.org/delay/1"),
    fetch("https://does.not.exist")
  ];
}

function logPromise(p, title) {
  p.then(function(value) {
    console.log(title, "fulfilled with value", value);
  }, function(err) {
    console.error(title, "rejected with error", err.message);
  });
}
logPromise(Promise.race(twoRequests()), "race");
logPromise(Promise.any(twoRequests()), "any");