Kann globale Variablen innerhalb einer Funktion nicht übergeben

Question

Ich versuche, eine FOR-Schleife mit Variablen auszuführen, die in einer anderen Funktion erneut ausgeführt werden müssen, und ich muss sie aus der ersten Funktion Code aber die Funktion empfangen sie als "undefiniert".

Wenn die Variablen innerhalb der collectionChecking-Funktion mit Ausnahme von ledTypes2 lokal sind, ist die Variable von hostIndx2 undefiniert, wenn die Funktion von handleResponse2 versucht, ihn aufzurufen. Diese Funktion sollte die Antwort als ein Symbol aus der Methode von ledTypes2 innerhalb der HTML-Seite darstellen.

var fetch = require('node-fetch'); 

var ledTypes = { 
    green: "<img id='logo' src='green.png' height='30' width='30'>", 
    red: "<img id='logo' src='red.png' height='30' width='30'>", 
    yellow: "<img id='logo' src='yellow.png' height='30' width='30'>" 
}; 

var hosts2 = ['http://host1.com','host2.com','host3.com','host4.com']; 
var hostIndx2 = 0; 

var lengthVal = hosts2.length; 
var token = '1213232431'; 
    function collectionChecking() { 

     console.log("im inside the func" + hostIndx2 + "---" + lengthVal); 
     for (; hostIndx2 < lengthVal; hostIndx2++) { 
      console.log(hostIndx2); 
      let url = hosts2[hostIndx2]; 
      // sendReq(); 
      fetch(url , {method: 'GET', headers:{"X-AUTH-TOKEN": token, "Content-Type": "text/plain"}, timeout: 30000} 
      ).then(function (res, hostIndx2) { 
        console.log(res.status, hostIndx2); 
        handleLedResponse2(res, hostIndx2); 

       }); 
     } 
    } 

function handleLedResponse2(res, hostIndx2) { 
    var curSpan = document.getElementById('col_host_' + hostIndx2); 
    console.log("IM HERE" + res.status + "---" + hostIndx2); 
    if (res.status === 200 || res.status === 204) { 
     curSpan.innerHTML = ledTypes.green; 
    } else if (res.status === 500 || res.status === 404) { 
     curSpan.innerHTML = ledTypes.red; 
    } else if (res.status === 300 || res.status === 301 || res.status === 302) { 
     curSpan.innerHTML = ledTypes.yellow; 
    } 
} 

Answer 1

In diesem Code sind mehrere Dinge falsch.

Als Erstes können Sie eine for Schleifenindexvariable wie diese in einer asynchronen Antwort nicht verwenden. Die for Schleife wird vollständig beendet sein, bevor handleLedResponse2() aufgerufen wird und somit nicht den gewünschten Wert hat.

Zweitens sind deklarieren Sie eine .then() Handler zwei Argumente auf dieser Linie haben:

.then(function (res, hostIndx2) { 

Durch Angabe einer .then() Handler nur ein Argument übergeben wird. Daher definieren Sie ein Argument mit dem Namen hostIndx2, das immer undefined ist und die höhere Bereichsvariable desselben Namens "versteckt", sodass Sie nicht darauf zugreifen können.
Deshalb sehen Sie den Wert immer undefined. Das erste, was zu beheben ist, den obigen Code zu ändern, um nur dies:

.then(function (res) { 

dass Sie mit dem höheren scoped hostIndx2 Variable zugreifen geben (es nicht mehr undefine sein wird). Aber es wird wahrscheinlich nicht den gewünschten Wert wegen der Mischung von einer synchronen for Anrufe und asynchrone fetch() Anrufe als die for Schleife wird bis zum Ende ausgeführt haben, bevor alle fetch().then() Handler aufgerufen werden.

Ich denke, dass erklärt, was mit diesem Teil des Codes falsch ist, aber ich kann die vollständige Lösung nicht empfehlen, weil ich nicht sicher weiß, was Sie versuchen zu tun. Ich würde theoretisieren, dass hostIndx2 überhaupt keine höhere Bereichsvariable sein sollte, da dies nur Probleme verursacht und Gelegenheiten für andere Dinge schafft, um es zu übertreffen. Es sollte wahrscheinlich eine lokale Variable sein, und dann sollten Sie sie als Argument an alles weitergeben, was Sie wollen, um darauf zugreifen zu können.

Um das Problem beim asynchronen Zugriff zu beheben, gibt es mehrere Optionen. Sie können zur Definition in der for Schleife selbst mit let wechseln, und jeder Aufruf der Schleife erhält eine eigene Version der Variablen (löst das asynchrone Zugriffsproblem). Oder Sie können Ihre Schleife so ändern, dass sie forEach verwendet, wodurch für jeden Aufruf der Schleife ein neuer eindeutiger Bereich erstellt wird.

---

Mit ein paar Vermutungen über das, was Sie zu tun versuchen, ist hier eine aufgeräumt Version:

const fetch = require('node-fetch'); 

const ledTypes = { 
    green: "<img id='logo' src='green.png' height='30' width='30'>", 
    red: "<img id='logo' src='red.png' height='30' width='30'>", 
    yellow: "<img id='logo' src='yellow.png' height='30' width='30'>" 
}; 

const hosts2 = ['http://host1.com','http://host2.com','http://host3.com','http://host4.com']; 
const token = '1213232431'; 

function collectionChecking() { 
    hosts2.forEach(function(url, index) { 
     console.log("im inside the func" + index); 
     fetch(url , {method: 'GET', headers:{"X-AUTH-TOKEN": token, "Content-Type": "text/plain"}, timeout: 30000}).then(function (res) { 
      console.log(res.status, index); 
      handleLedResponse2(res, index); 
     }); 
    } 
} 

function handleLedResponse2(res, hostIndx2) { 
    let curSpan = document.getElementById('col_host_' + hostIndx2); 
    console.log("IM HERE" + res.status + "---" + hostIndx2); 
    if (res.status === 200 || res.status === 204) { 
     curSpan.innerHTML = ledTypes.green; 
    } else if (res.status === 500 || res.status === 404) { 
     curSpan.innerHTML = ledTypes.red; 
    } else if (res.status === 300 || res.status === 301 || res.status === 302) { 
     curSpan.innerHTML = ledTypes.yellow; 
    } 
} 

---

P. S. Ich bin ein bisschen verwirrt hier, weil Ihre Frage als node.js markiert ist und es scheint, dass Sie node-fetch verwenden (was eine node.js-Umgebung impliziert), aber dann zeigen Sie document.getElementById(), die Sie nicht in Knoten verwenden können .js - das wäre normalerweise Code, der in einem Browser laufen würde.