如何在获取网络错误时获取网址

时间:2018-07-12 15:56:29

标签: javascript fetch-api

我需要向多个(最多80个)microHTTP服务器发出获取请求,其中某些服务器可能未运行。在这些情况下,提取会出现网络错误。有没有办法将错误与原始网址相关联?

这是HTML页面,Javascript文件(我从中删除了大多数与业务相关的语句)和控制台消息。但是首先,重申一下,我希望发现的是如何将网络错误捕获在“ catch”块以外的其他位置,或者如何访问包含URL的“ catch”块中的某些结构。预先感谢。

HTML:

<!DOCTYPE HTML PUBLIC "//w3c//dtd html 4.01 Tradional//EN" "http://www.w3.org/TR/html4/loose/dtd">
<!--               Copyright Siemens AG 2018        -->
<!--  Main Web page for FCUD Overview Display.      -->
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <title>Port Overview</title>
    </head>
    <body>

      <!--- define the port table -->
      <table id="porttable" border>
          <thead>
              <tr><th>Port</th>
                  <th>Last Update</th>
                  <th>data1</th>
                  <th>data2</th>
              </tr>
          </thead>
          <tbody>
          </tbody>
      </table>
    </body>
    <script src="js/fetchExample.js"></script>
</html>

JavaScript文件fetchExample.js:

const numberOfPorts = 5;          // set to 5, but in production 80
const portIncrement = 50000;
var   Host = "pickahost";         // the hostname of the server running the http servers


//  MyPort class.
function MyPort (Json) {          // MyPort Constructor
    console.log("Creating Port object - " + Json.ObjectName);
    this.ObjectName = Json.ObjectName;
    this.fetchInProgress = false;
    // there are many more properties, too.
    // end of MyPort constructor
}; // end of MyPort class definition


function pollForUpdates (test) {
    console.log('Starting polling pass ' + test + ": " + Date().toLocaleString() + " (" + Date.now() + ")");
    var urlHost = "http://" + Host + ":"

    for (port = 1; port <= numberOfPorts; port++) {
        thisPort = ports[port];
        console.log("  Polling " + thisPort.ObjectName + (thisPort.fetchInProgress
                                                                     ? "  fetch in progress!" 
                                                                     : " now"));
        if (! thisPort.fetchInProgress) {
            // Check for identify updates.
            var urlPort = urlHost + (port + portIncrement) + "/identify";
            console.log('    requesting url=' + urlPort);
            thisPort.fetchInProgress = true;
            fetch(urlPort)
            .then(function(response) {
                console.log("Received response from GET of " + response.url);
                var portOffset = response.url.indexOf(":5") + 1;
                var portIndex = parseInt(response.url.slice(portOffset,portOffset+5)) - portIncrement;
                ports[portIndex].fetchInProgress = false;
                if (response.status == 200) {
                    // Examine the text in the response
                    response.json()
                    .then(function(data) {
                        console.log("  json results:", data.ObjectName);
                        var portIndex = parseInt(data.ObjectName.slice(4));
                        // save data from GET request ...
                        console.log("  stashed port (" + portIndex + ") - " + data.ObjectName + ": " + port[portIndex]);
                        } ).then (function() {displayDataRows(); return;} )
                } // end of if {status == 200}

                else {
                    response.json() 
                    .then(function(data) {
                        console.log("  json results:", data.ObjectName);
                        var portIndex = parseInt(data.ObjectName.slice(4));
                        // save data from GET request ...
                        console.log("  stashed ports (" + portIndex + ") - " + data.ObjectName + ": " + ports[portIndex]);
                        } ).then (function() {displayDataRows(); return;} );
                } // end of else {status != 200}
            } ) // end of then call

            .catch(function(err) {
                console.log('Fetch Error :-S', err);
            } )
        } // end of if (! thisPort.fetchInProgress)
    } // end of for port

    // There is logic here to restart pollForUpdates after a delay, but the question relates to the fetch and catch
} // end of pollForUpdates


// Main program
console.log('starting PortStatus.js');
ports = new Array(numberOfPorts);

for (p=1; p<=numberOfPorts; ++p) {
    var ObjName = "port" + ("0" + p).slice(-2);
    ports[p] = new MyPort({ObjectName: ObjName});
}

testing = 0;
pollForUpdates(++testing);
console.log("pollForUpdates has returned to the main program.");
console.log('exiting fetchExample.js');

控制台输出:

starting PortStatus.js
fetchExample.js:69:1
Creating Port object - port01
fetchExample.js:8:5
Creating Port object - port02
fetchExample.js:8:5
Creating Port object - port03
fetchExample.js:8:5
Creating Port object - port04
fetchExample.js:8:5
Creating Port object - port05
fetchExample.js:8:5
Starting polling pass 1: Sat Jul 14 2018 22:58:11 GMT-0500 (CDT) (1531627091876)
fetchExample.js:17:5
  Polling port01 now
fetchExample.js:22:9
    requesting url=http://pickahost:50001/identify
fetchExample.js:28:13
  Polling port02 now
fetchExample.js:22:9
    requesting url=http://pickahost:50002/identify
fetchExample.js:28:13
  Polling port03 now
fetchExample.js:22:9
    requesting url=http://pickahost:50003/identify
fetchExample.js:28:13
  Polling port04 now
fetchExample.js:22:9
    requesting url=http://pickahost:50004/identify
fetchExample.js:28:13
  Polling port05 now
fetchExample.js:22:9
    requesting url=http://pickahost:50005/identify
fetchExample.js:28:13
pollForUpdates has returned to the main program.
fetchExample.js:79:1
exiting fetchExample.js
fetchExample.js:80:1
Fetch Error :-S 
TypeError: NetworkError when attempting to fetch resource.
fetchExample.js:59:17
Fetch Error :-S 
TypeError: NetworkError when attempting to fetch resource.
fetchExample.js:59:17
Fetch Error :-S 
TypeError: NetworkError when attempting to fetch resource.
fetchExample.js:59:17
Fetch Error :-S 
TypeError: NetworkError when attempting to fetch resource.
fetchExample.js:59:17
Fetch Error :-S 
TypeError: NetworkError when attempting to fetch resource.
fetchExample.js:59:17

1 个答案:

答案 0 :(得分:0)

有时您进行请求和响应是无效的,例如404错误代码,在这种情况下,URL被作为响应,但有时您没有互联网或其他东西,因此您不会隐性响应,或者您将在很长一段时间后隐性响应案例编写一个包装程序以获取并控制错误消息。
你应该这样做

 fetch(url, options) {
    let link=url;
    let retries = 3;
    let retryDelay = 1000;
    let timeout = 4000;

    if (options && options.retries) {
        retries = options.retries;
    }
    if (options && options.timeout) {
        timeout = options.timeout;
    }
    if (options && options.retryDelay) {
        retryDelay = options.retryDelay;
    }
    let timeoutCallBack = new Promise((resolve, reject) => {
        setTimeout(reject, timeout, 'request timeout');
    });

    return Promise
        .race([timeoutCallBack, new Promise(function (resolve, reject) {
            let wrappedFetch = function (n) {
                fetch(url, options)
                    .then(function (response) {
                        if (response.ok)
                            resolve(response);
                        else throw error('bad error code' + link)
                    })
                    .catch(function (error) {
                        if (n > 0) {
                            setTimeout(function () {
                                wrappedFetch(--n);
                            }, retryDelay);
                        } else {
                            reject(error+link);//here you send change error massage
                        }
                    });
            };
            wrappedFetch(retries);
        })]);

     };

然后您可以导出此模块,只需将其导入js文件即可。

PS:我使用自己的write fetch,当您不会收到任何响应时,您应该添加超时