tag:forum.selfhtml.org,2005:/self asynchrones JavaScript – SELFHTML-Forum 2017-07-24T11:38:23Z https://forum.selfhtml.org/self/2017/jul/19/asynchrones-javascript/1699515#m1699515 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2017-07-19T14:34:06Z 2017-07-19T14:34:06Z asynchrones JavaScript <p>Folgende Situation: Zwei JSON-Dateien, die geladen werden müssen, und Code, der ausgeführt werden soll, wenn beide geladen sind. Verschachtelt sähe das so aus:</p> <pre><code class="block language-javascript"><span class="token keyword">var</span> aRequest <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Request</span><span class="token punctuation">(</span><span class="token string">'a.json'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> bRequest <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Request</span><span class="token punctuation">(</span><span class="token string">'b.json'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">fetch</span><span class="token punctuation">(</span>aRequest<span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">response</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> response<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">aData</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">fetch</span><span class="token punctuation">(</span>bRequest<span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">response</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> response<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">bData</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// do something with aData and bData</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Ist aber nicht richtig asynchron. Die Dateien sollten unabhängig voneinander parallel geladen werden:</p> <pre><code class="block language-javascript"><span class="token keyword">var</span> aRequest <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Request</span><span class="token punctuation">(</span><span class="token string">'a.json'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> bRequest <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Request</span><span class="token punctuation">(</span><span class="token string">'b.json'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">fetch</span><span class="token punctuation">(</span>aRequest<span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">response</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> response<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">aData</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// …</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">fetch</span><span class="token punctuation">(</span>bRequest<span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">response</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> response<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">bData</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// …</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">doSomething</span><span class="token punctuation">(</span><span class="token parameter">aData<span class="token punctuation">,</span> bData</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// do something with aData and bData</span> <span class="token punctuation">}</span> </code></pre> <p>Aber was müsste dann anstelle von <code class="language-js"><span class="token comment">// …</span></code> stehen, damit <code class="language-js"><span class="token function">doSomething</span><span class="token punctuation">(</span>aData<span class="token punctuation">,</span> bData<span class="token punctuation">)</span></code> aufgerufen wird, sobald beide JSON-Dateien geladen sind?</p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> https://forum.selfhtml.org/self/2017/jul/19/asynchrones-javascript/1699516#m1699516 dedlfix 2017-07-19T14:39:34Z 2017-07-19T14:39:34Z asynchrones JavaScript <p>Tach!</p> <blockquote> <p>Ist aber nicht richtig asynchron. Die Dateien sollten unabhängig voneinander parallel geladen werden:</p> </blockquote> <p>Es sieht mir nicht so aus, als ob das mit fetch() allein gelöst werden kann. Promise.all() wird wohl der Lösungsweg sein.</p> <p>dedlfix.</p> https://forum.selfhtml.org/self/2017/jul/19/asynchrones-javascript/1699517#m1699517 Felix Riesterer http://felix-riesterer.de 2017-07-19T14:43:31Z 2017-07-19T14:43:31Z asynchrones JavaScript <p>Lieber Gunnar,</p> <blockquote> <pre><code class="block language-javascript"><span class="token function">fetch</span><span class="token punctuation">(</span>aRequest<span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">response</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> response<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">aData</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// …</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span> </code></pre> <p>Aber was müsste dann anstelle von <code class="language-js"><span class="token comment">// …</span></code> stehen, damit <code class="language-js"><span class="token function">doSomething</span><span class="token punctuation">(</span>aData<span class="token punctuation">,</span> bData<span class="token punctuation">)</span></code> aufgerufen wird, sobald beide JSON-Dateien geladen sind?</p> </blockquote> <p>so wie ich das Deinem Code entnehme, müsste man jeweils prüfen, ob der andere Code auch schon da ist, um erst dann diese Code-Stelle (<code class="language-js"><span class="token comment">// …</span></code>) auszuführen. Deiner Logik nach werden ja beide JSON-Daten unabhängig voneinander geladen, sodass eine ganz sicher zuletzt geladen wird, welche dann die eigentliche Abarbeitung anstoßen müsste. Und sollte ein Ladevorgang scheitern, dann ist das Ausführen ohnehin hinfällig.</p> <p>Vielleicht etwas in dieser Art?</p> <pre><code class="block language-javascript"><span class="token function">fetch</span><span class="token punctuation">(</span>aRequest<span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">response</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> response<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">aData</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>jsonData <span class="token operator">=</span> aData<span class="token punctuation">;</span> <span class="token comment">// check if other request has already loaded</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>bRequest<span class="token punctuation">.</span>jsonData<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">processRequests</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">fetch</span><span class="token punctuation">(</span>bRequest<span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">response</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> response<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">bData</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>jsonData <span class="token operator">=</span> bData<span class="token punctuation">;</span> <span class="token comment">// check if other request has already loaded</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>aRequest<span class="token punctuation">.</span>jsonData<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">processRequests</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">processData</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// aRequest.jsonData && bRequest.jsonData</span> <span class="token punctuation">}</span> </code></pre> <p>Oder meintest Du etwas völlig anderes?</p> <p>Liebe Grüße,</p> <p>Felix Riesterer.</p> https://forum.selfhtml.org/self/2017/jul/19/asynchrones-javascript/1699518#m1699518 pl http://rolfrost.de/politblog.html 2017-07-19T14:48:34Z 2017-07-19T14:48:34Z asynchrones JavaScript <p>Das Problem ist bereits hier: <code>function doSomething(aData, bData)</code></p> <p>weil du nicht einfach auf zwei Variablen greifen kannst wo du doch noch gar nicht weißt ob die Response angekommen ist. Ich würde mir beide Dateien in einer Response schicken. MfG</p> https://forum.selfhtml.org/self/2017/jul/19/asynchrones-javascript/1699521#m1699521 Tote Locke 2017-07-19T14:57:56Z 2017-07-19T14:57:56Z asynchrones JavaScript <p>Hallo Gunnar,</p> <p>kannst Du das bitte genauer spezifizieren?<br> `Ist aber nicht richtig asynchron. Die Dateien sollten unabhängig voneinander parallel geladen werden:´</p> <p>Sind das zwei eigensständige Threads oder ist die Abarbeitung serialisiert?</p> <p>Grüße Tote Locke</p> https://forum.selfhtml.org/self/2017/jul/19/asynchrones-javascript/1699522#m1699522 JürgenB https://www.j-berkemeier.de 2017-07-19T15:00:30Z 2017-07-19T15:00:30Z asynchrones JavaScript <p>Hallo Gunnar,</p> <blockquote> <p>Aber was müsste dann anstelle von <code class="language-js"><span class="token comment">// …</span></code> stehen, damit <code class="language-js"><span class="token function">doSomething</span><span class="token punctuation">(</span>aData<span class="token punctuation">,</span> bData<span class="token punctuation">)</span></code> aufgerufen wird, sobald beide JSON-Dateien geladen sind?</p> </blockquote> <p>in einem ähnlichen Fall mache ich es so, dass jeder Request ein Flag setzt und dann prüft, ob die anderen auch schon fertig sind.</p> <p>In einem anderen Fall setzt auch jeder Request ein Flag. Die Auswertefunktion fragt dann über ein sinnvoll getaktetes <code>setInterval</code> die Flags ab.</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2017/jul/19/asynchrones-javascript/1699524#m1699524 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2017-07-19T15:08:32Z 2017-07-19T15:08:32Z asynchrones JavaScript <p>@@dedlfix</p> <blockquote> <p>Es sieht mir nicht so aus, als ob das mit fetch() allein gelöst werden kann. Promise.all() wird wohl der Lösungsweg sein.</p> </blockquote> <p>Danke, funzt:</p> <pre><code class="block language-javascript"><span class="token keyword">var</span> aRequest <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Request</span><span class="token punctuation">(</span><span class="token string">'a.json'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> bRequest <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Request</span><span class="token punctuation">(</span><span class="token string">'b.json'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> aPromise <span class="token operator">=</span> <span class="token function">fetch</span><span class="token punctuation">(</span>aRequest<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">response</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> response<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token keyword">var</span> bPromise <span class="token operator">=</span> <span class="token function">fetch</span><span class="token punctuation">(</span>bRequest<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">response</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> response<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> Promise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token punctuation">[</span>aPromise<span class="token punctuation">,</span> bPromise<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">values</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> aData <span class="token operator">=</span> values<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">var</span> bData <span class="token operator">=</span> values<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// do something with aData and bData</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> https://forum.selfhtml.org/self/2017/jul/19/asynchrones-javascript/1699520#m1699520 dedlfix 2017-07-19T14:57:03Z 2017-07-19T14:57:03Z asynchrones JavaScript <p>Tach!</p> <blockquote> <p>Das Problem ist bereits hier: <code>function doSomething(aData, bData)</code></p> <p>weil du nicht einfach auf zwei Variablen greifen kannst wo du doch noch gar nicht weißt ob die Response angekommen ist.</p> </blockquote> <p>Das ist kein Problem, das ist die zu lösende Aufgabe. Der Aufruf soll ja erst erfolgen, <em>nachdem</em> die Daten in den beiden Variablen vorliegen, also wenn die Promises der beiden fetch()-Aufrufe erfüllt sind. Da greift niemand vorzeitig auf Variablen, ohne dass die Response da ist.</p> <blockquote> <p>Ich würde mir beide Dateien in einer Response schicken.</p> </blockquote> <p>Ohne zu wissen, warum das zwei Aufrufe und nicht bereits von vorn herein nur einer ist, würde ich nicht pauschal zu einem Zusammenlegen raten. Zudem gibt es mit Promise.all() eine einfache Lösung für das Problem, ohne dass serverseitig etwas umgebaut werden muss.</p> <p>dedlfix.</p> https://forum.selfhtml.org/self/2017/jul/19/asynchrones-javascript/1699530#m1699530 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2017-07-19T16:24:51Z 2017-07-19T16:24:51Z asynchrones JavaScript <p>@@dedlfix</p> <blockquote> <blockquote> <p>Ich würde mir beide Dateien in einer Response schicken.</p> </blockquote> <p>Ohne zu wissen, warum das zwei Aufrufe und nicht bereits von vorn herein nur einer ist, würde ich nicht pauschal zu einem Zusammenlegen raten.</p> </blockquote> <p>Das eine ist Bibliothek, in dem Fall Sprachennamen:</p> <pre><code class="block language-json"><span class="token punctuation">{</span> <span class="token property">"art-x-navi"</span><span class="token operator">:</span> <span class="token string">"Na’vi"</span><span class="token punctuation">,</span> <span class="token property">"qya"</span><span class="token operator">:</span> <span class="token string">"Quenya"</span><span class="token punctuation">,</span> <span class="token property">"tlh"</span><span class="token operator">:</span> <span class="token string">"tlhIngan Hol"</span> <span class="token punctuation">}</span> </code></pre> <p>Das andere ist Konfiguration, in dem Fall die bei der Anwendung verfügbaren Sprachen:</p> <pre><code class="block language-json"><span class="token punctuation">[</span><span class="token string">"art-x-navi"</span><span class="token punctuation">,</span> <span class="token string">"tlh"</span><span class="token punctuation">]</span> </code></pre> <p>(Sorry, Mittelerde, nicht deine Zeit.)</p> <blockquote> <p>Zudem gibt es mit Promise.all() eine einfache Lösung für das Problem, ohne dass serverseitig etwas umgebaut werden muss.</p> </blockquote> <p>Zumal die Ressourcen ja gar nicht vom selben Server kommen müssen. Das können verschiedene eigene Webservices sein; die Bibliothek könnte aber auch von einem Fremdanbieter kommen.</p> <hr> <p><strong>Q.</strong> Und warum überhaupt JavaScript fürs Sprachmenü?<br> <strong>A.</strong> Weil sich’s um eine Demo (kein Prototyp) handelt.</p> <p><strong>Q.</strong> Und warum nicht die Lösung mit der Verschachtelung? Sollte doch für eine Demo gut genug sein?<br> <strong>A.</strong> Weil ich wissen wollte, wie man’s richtig macht. Für später.</p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> https://forum.selfhtml.org/self/2017/jul/19/asynchrones-javascript/1699523#m1699523 Mut Ex Wait 2017-07-19T15:04:50Z 2017-07-19T15:04:50Z asynchrones JavaScript <p>Hallo JürgenB,</p> <p>da fehlt JS einfach die Möglichkeit, einen Eventlistener für Variablen anzulegen. Dann wäre die Aufgabe elegant lösbar.</p> <p>Nur Mut, Ex & wait...</p> https://forum.selfhtml.org/self/2017/jul/19/asynchrones-javascript/1699526#m1699526 dedlfix 2017-07-19T15:23:38Z 2017-07-19T15:23:38Z asynchrones JavaScript <p>Tach!</p> <blockquote> <p>da fehlt JS einfach die Möglichkeit, einen Eventlistener für Variablen anzulegen. Dann wäre die Aufgabe elegant lösbar.</p> </blockquote> <p>Ist mittlerweile eingebaut, nennt sich <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise" rel="nofollow noopener noreferrer">Promise</a>.</p> <p>dedlfix.</p> https://forum.selfhtml.org/self/2017/jul/19/asynchrones-javascript/1699525#m1699525 dedlfix 2017-07-19T15:21:48Z 2017-07-19T15:21:48Z asynchrones JavaScript <p>Tach!</p> <blockquote> <pre><code class="block language-javascript"><span class="token keyword">var</span> aRequest <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Request</span><span class="token punctuation">(</span><span class="token string">'a.json'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> bRequest <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Request</span><span class="token punctuation">(</span><span class="token string">'b.json'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> aPromise <span class="token operator">=</span> <span class="token function">fetch</span><span class="token punctuation">(</span>aRequest<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">response</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> response<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token keyword">var</span> bPromise <span class="token operator">=</span> <span class="token function">fetch</span><span class="token punctuation">(</span>bRequest<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">response</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> response<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> Promise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token punctuation">[</span>aPromise<span class="token punctuation">,</span> bPromise<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">values</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> aData <span class="token operator">=</span> values<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">var</span> bData <span class="token operator">=</span> values<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// do something with aData and bData</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> </blockquote> <p>Du kannst auch noch die beiden ersten then()s einsparen. DRY statt WET. response.json() ist kein asynchroner Prozess. Das kann auch im then() vom Promise.all() ausgeführt werden.</p> <pre><code class="block language-javascript">Promise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token punctuation">[</span>aPromise<span class="token punctuation">,</span> bPromise<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">responses</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> aData <span class="token operator">=</span> responses<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> bData <span class="token operator">=</span> responses<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// do something with aData and bData</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>oder wenn es separat sein soll</p> <pre><code class="block language-javascript">Promise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token punctuation">[</span>aPromise<span class="token punctuation">,</span> bPromise<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">responses</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> values <span class="token operator">=</span> responses<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">response</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> response<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// modern: const values = responses.map(response => response.json());</span> <span class="token comment">// oder: const [aValue, bValue] = responses.map(response => response.json());</span> <span class="token keyword">var</span> aData <span class="token operator">=</span> values<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">var</span> bData <span class="token operator">=</span> values<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// do something with aData and bData</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>dedlfix.</p> https://forum.selfhtml.org/self/2017/jul/19/asynchrones-javascript/1699529#m1699529 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2017-07-19T16:09:54Z 2017-07-19T16:09:54Z asynchrones JavaScript <p>@@dedlfix</p> <blockquote> <p>Du kannst auch noch die beiden ersten then()s einsparen.</p> </blockquote> <p>Eher nach woanders verlagern.</p> <blockquote> <p>response.json() ist kein asynchroner Prozess.</p> </blockquote> <p>Hm, das heißt, das Parsen der JSON-Ressourcen kann nicht parallel erfolgen?</p> <p>Mein Gedankengang war: Angenommen, das Laden von a.json dauert 5 Sekunden, das Parsen 0.1 Sekunden. Das Laden von b.json dauert 0.1 Sekunden, das Parsen 5 Sekunden<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup>. Dann wären beide Promises gleichzeitig erfüllt und der Nutzer bekommt schnellstmöglich das Ergebnis zu sehen.</p> <blockquote> <p>Das kann auch im then() vom Promise.all() ausgeführt werden.</p> </blockquote> <p>Dann würde das Parsen von b.json erst nach dem Laden von a.json beginnen; der Nutzer müsste 4.9 Sekunden länger warten. Wenn mein Gedankengang denn stimmt.</p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>Das ist natürlich völlig aus der Luft gegriffen. Aber es soll ums Prinzip gehen. <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section> https://forum.selfhtml.org/self/2017/jul/19/asynchrones-javascript/1699527#m1699527 JürgenB https://www.j-berkemeier.de 2017-07-19T15:33:23Z 2017-07-19T15:36:35Z asynchrones JavaScript <p>Hallo,</p> <blockquote> <p>Ist mittlerweile eingebaut, nennt sich <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise" rel="nofollow noopener noreferrer">Promise</a>.</p> </blockquote> <p>leider bleibt der IE da draußen vor, bzw. braucht etwas Nachhilfe.</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2017/jul/19/asynchrones-javascript/1699528#m1699528 Rolf b 2017-07-19T15:38:27Z 2017-07-19T15:38:27Z asynchrones JavaScript <p>Hallo JürgenB,</p> <p>bei fetch auch. Polyfills to the rescue :)</p> <p><em>Rolf</em></p> <div class="signature">-- <br> Dosen sind silbern </div> https://forum.selfhtml.org/self/2017/jul/19/asynchrones-javascript/1699531#m1699531 TS ts-self@online.de https://bitworks.de 2017-07-19T16:25:12Z 2017-07-19T16:25:12Z asynchrones JavaScript <p>Hello,</p> <blockquote> <p>Hm, das heißt, das Parsen der JSON-Ressourcen kann nicht parallel erfolgen?</p> </blockquote> <p>siehe hierzu auch <a href="http://t3n.de/news/web-worker-javascript-556677/" rel="nofollow noopener noreferrer">Artikel über Webworker</a></p> <p>Liebe Grüße<br> Tom S.</p> <div class="signature">-- <br> Es gibt nichts Gutes, außer man tut es<br> Andersdenkende waren noch nie beliebt, aber meistens diejenigen, die die Freiheit vorangebracht haben.<br> </div> https://forum.selfhtml.org/self/2017/jul/19/asynchrones-javascript/1699532#m1699532 dedlfix 2017-07-19T16:54:29Z 2017-07-19T16:54:29Z asynchrones JavaScript <p>Tach!</p> <blockquote> <blockquote> <p>Du kannst auch noch die beiden ersten then()s einsparen.</p> </blockquote> <p>Eher nach woanders verlagern.</p> <blockquote> <p>response.json() ist kein asynchroner Prozess.</p> </blockquote> <p>Hm, das heißt, das Parsen der JSON-Ressourcen kann nicht parallel erfolgen?</p> </blockquote> <p>Parallel geht sowieso nichts im Single-Thread-Javascript.</p> <blockquote> <p>Mein Gedankengang war: Angenommen, das Laden von a.json dauert 5 Sekunden, das Parsen 0.1 Sekunden. Das Laden von b.json dauert 0.1 Sekunden, das Parsen 5 Sekunden[^1]. Dann wären beide Promises gleichzeitig erfüllt und der Nutzer bekommt schnellstmöglich das Ergebnis zu sehen.</p> </blockquote> <p>b wäre in dem Fall zuerst erfüllt, dessen Callback aufgerufen und das Parsen startet. Erst wenn das fertig ist, kann der Callback von a bearbeitet werden, dem dann sein Parsen folgt.</p> <p>Eigentlich solltest du das Parsen aber nicht bemerken. So groß werden die Daten nicht sein, dass das ins Gewicht fällt. Und dann wäre der Übertragungsprozess auch noch ein viel größerer Flaschenhals.</p> <blockquote> <blockquote> <p>Das kann auch im then() vom Promise.all() ausgeführt werden.</p> </blockquote> <p>Dann würde das Parsen von b.json erst nach dem Laden von a.json beginnen; der Nutzer müsste 4.9 Sekunden länger warten. Wenn mein Gedankengang denn stimmt.</p> </blockquote> <p>Ja. Die Idee ist gut, aber ich würde das zunächst in die Microoptimierungsschublade einsortieren, bis da was merkbares hochkommt.</p> <p>Du kannst jedoch die zwei fetch() mit then() in ein requests.map() stecken, dann sparst du dir den doppelten Code <em>und</em> hast den zeitlichen Vorteil.</p> <p>dedlfix.</p> https://forum.selfhtml.org/self/2017/jul/19/asynchrones-javascript/1699792#m1699792 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2017-07-23T15:33:13Z 2017-07-23T15:46:52Z asynchrones JavaScript <p>@@Gunnar Bittersmann</p> <p>Sieht jetzt so aus:</p> <p>lib/language-names.json:</p> <pre><code class="block language-json"><span class="token punctuation">{</span> <span class="token property">"de"</span><span class="token operator">:</span> <span class="token string">"deutsch"</span><span class="token punctuation">,</span> <span class="token property">"en"</span><span class="token operator">:</span> <span class="token string">"English"</span><span class="token punctuation">,</span> <span class="token property">"es"</span><span class="token operator">:</span> <span class="token string">"español"</span><span class="token punctuation">,</span> <span class="token property">"tlh"</span><span class="token operator">:</span> <span class="token string">"tlhIngan Hol"</span> <span class="token punctuation">}</span> </code></pre> <p>lib/language-names.de.json:</p> <pre><code class="block language-json"><span class="token punctuation">{</span> <span class="token property">"de"</span><span class="token operator">:</span> <span class="token string">"deutsch"</span><span class="token punctuation">,</span> <span class="token property">"en"</span><span class="token operator">:</span> <span class="token string">"englisch"</span><span class="token punctuation">,</span> <span class="token property">"es"</span><span class="token operator">:</span> <span class="token string">"spanisch"</span><span class="token punctuation">,</span> <span class="token property">"tlh"</span><span class="token operator">:</span> <span class="token string">"klingonisch"</span> <span class="token punctuation">}</span> </code></pre> <p>config/available-languages:</p> <pre><code class="block language-json"><span class="token punctuation">[</span><span class="token string">"de"</span><span class="token punctuation">,</span> <span class="token string">"es"</span><span class="token punctuation">,</span> <span class="token string">"en"</span><span class="token punctuation">]</span> </code></pre> <p>Markup (HTML):</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lang-menu<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lang-menu-item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lang-menu.js<span class="token punctuation">"</span></span> <span class="token attr-name">async</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> </code></pre> <p>lang-menu.js:</p> <pre><code class="block language-javascript"><span class="token keyword">var</span> currentLanguage <span class="token operator">=</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>lang<span class="token punctuation">;</span> <span class="token keyword">var</span> urls <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token string">'config/available-languages.json'</span><span class="token punctuation">,</span> <span class="token string">'lib/language-names.json'</span><span class="token punctuation">,</span> <span class="token string">'lib/language-names.'</span> <span class="token operator">+</span> currentLanguage <span class="token operator">+</span> <span class="token string">'.json'</span> <span class="token punctuation">]</span><span class="token punctuation">;</span> Promise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span> urls<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span> <span class="token parameter">url</span> <span class="token operator">=></span> <span class="token function">fetch</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token operator">=></span> response<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">values</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">var</span> <span class="token punctuation">[</span>availableLanguages<span class="token punctuation">,</span> languageNames<span class="token punctuation">,</span> localLanguageNames<span class="token punctuation">]</span> <span class="token operator">=</span> values<span class="token punctuation">;</span> <span class="token keyword">var</span> template <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#lang-menu-item'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> availableLanguages<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">lang</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>lang <span class="token operator">!=</span> currentLanguage<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> clone <span class="token operator">=</span> template<span class="token punctuation">.</span>content<span class="token punctuation">.</span><span class="token function">cloneNode</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> liElement <span class="token operator">=</span> clone<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'li'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> aElement <span class="token operator">=</span> liElement<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> aElement<span class="token punctuation">.</span>href <span class="token operator">=</span> <span class="token string">'?lang='</span> <span class="token operator">+</span> lang<span class="token punctuation">;</span> aElement<span class="token punctuation">.</span>hreflang <span class="token operator">=</span> lang<span class="token punctuation">;</span> aElement<span class="token punctuation">.</span>lang <span class="token operator">=</span> lang<span class="token punctuation">;</span> aElement<span class="token punctuation">.</span>textContent <span class="token operator">=</span> languageNames<span class="token punctuation">[</span>lang<span class="token punctuation">]</span> <span class="token operator">||</span> lang<span class="token punctuation">;</span> liElement<span class="token punctuation">.</span>title <span class="token operator">=</span> localLanguageNames<span class="token punctuation">[</span>lang<span class="token punctuation">]</span> <span class="token operator">||</span> <span class="token string">''</span><span class="token punctuation">;</span> template<span class="token punctuation">.</span>parentNode<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>clone<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Daraus generiertes Markup (DOM), wenn wir uns auf der deutschsprachigen Seite befinden (<code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>de<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code>:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lang-menu<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lang-menu-item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lang-menu.js<span class="token punctuation">"</span></span> <span class="token attr-name">async</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>englisch<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>?lang=en<span class="token punctuation">"</span></span> <span class="token attr-name">hreflang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>English<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>spanisch<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>?lang=es<span class="token punctuation">"</span></span> <span class="token attr-name">hreflang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>es<span class="token punctuation">"</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>es<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>español<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> </code></pre> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> https://forum.selfhtml.org/self/2017/jul/19/asynchrones-javascript/1699552#m1699552 Ludger 2017-07-19T18:29:08Z 2017-07-19T18:29:08Z asynchrones JavaScript <p>Hallo!</p> <blockquote> <blockquote> <blockquote> <p>response.json() ist kein asynchroner Prozess.</p> </blockquote> </blockquote> </blockquote> <p>Doch, schließlich gibt die Methode <a href="https://developer.mozilla.org/en-US/docs/Web/API/Body/json" rel="nofollow noopener noreferrer">wieder einen Promise zurück</a>.</p> <blockquote> <blockquote> <p>Hm, das heißt, das Parsen der JSON-Ressourcen kann nicht parallel erfolgen?</p> </blockquote> </blockquote> <blockquote> <p>Parallel geht sowieso nichts im Single-Thread-Javascript.</p> </blockquote> <p>Der Browser parst JSON auch nicht im JavaScript-Thread. Das kann in einem anderen Thread erfolgen. Währenddessen kann anderes JavaScript ausgeführt werden, anderes Parsing erfolgen usw. Natürlich muss Code, der auf den Promise wartet, auf das Parsingergebnis warten.</p> <p>Daher halte ich Gunnar's Lösung für angemessen.</p> <blockquote> <p>Du kannst jedoch die zwei fetch() mit then() in ein requests.map() stecken, dann sparst du dir den doppelten Code und hast den zeitlichen Vorteil.</p> </blockquote> <p>Das stimmt.</p> <p>Ludger</p> https://forum.selfhtml.org/self/2017/jul/19/asynchrones-javascript/1699578#m1699578 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2017-07-20T09:08:35Z 2017-07-20T09:08:35Z asynchrones JavaScript <p>@@dedlfix</p> <blockquote> <p>Du kannst jedoch die zwei fetch() mit then() in ein requests.map() stecken, dann sparst du dir den doppelten Code <em>und</em> hast den zeitlichen Vorteil.</p> </blockquote> <p>Wo finde ich was dazu?</p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> https://forum.selfhtml.org/self/2017/jul/19/asynchrones-javascript/1699555#m1699555 dedlfix 2017-07-19T19:13:03Z 2017-07-19T19:13:03Z asynchrones JavaScript <p>Tach!</p> <blockquote> <blockquote> <blockquote> <blockquote> <p>response.json() ist kein asynchroner Prozess.</p> </blockquote> </blockquote> </blockquote> <p>Doch, schließlich gibt die Methode <a href="https://developer.mozilla.org/en-US/docs/Web/API/Body/json" rel="nofollow noopener noreferrer">wieder einen Promise zurück</a>.</p> </blockquote> <p>Ok, da lag ich falsch, JSON.parse() wäre synchron. Aber so richtig asynchron wird Response.json() nicht sein.</p> <blockquote> <blockquote> <blockquote> <p>Hm, das heißt, das Parsen der JSON-Ressourcen kann nicht parallel erfolgen?</p> </blockquote> </blockquote> <blockquote> <p>Parallel geht sowieso nichts im Single-Thread-Javascript.</p> </blockquote> <p>Der Browser parst JSON auch nicht im JavaScript-Thread. Das kann in einem anderen Thread erfolgen. Währenddessen kann anderes JavaScript ausgeführt werden, anderes Parsing erfolgen usw. Natürlich muss Code, der auf den Promise wartet, auf das Parsingergebnis warten.</p> </blockquote> <p>Das glaube ich jedoch nicht, dass extra für das Parsen ein Thread aufgemacht wird. Das wäre bei kleinen Mengen zu parsendem Code viel zu aufwendig. Und dann müsste dieses Handling eine andere Implementation haben als JSON.parse().</p> <blockquote> <p>Daher halte ich Gunnar's Lösung für angemessen.</p> <blockquote> <p>Du kannst jedoch die zwei fetch() mit then() in ein requests.map() stecken, dann sparst du dir den doppelten Code und hast den zeitlichen Vorteil.</p> </blockquote> <p>Das stimmt.</p> </blockquote> <p>An der Stelle meinte ich das übrigens so: Das Parsen findet vermutlicherweise direkt im Anschluss an den Callback statt und falls in der Zeit der zweite Request fertig wird, muss dessen Callback sich in der Event-Loop anstellen. Den zeitlichen Vorteil hat man nur zu dem Teil, der vor dem Eintreffen der Response fertig ist.</p> <p>Das ist meine Mutmaßung, und wahrscheinlich wird das sowieso nicht relevant werden, weil alles wegen zu geringer Datenmengen im Grundrauschen untergeht. Deshalb halte ich auch Aufwand für vertane Zeit, das genauer zu untersuchen zu wollen.</p> <p>dedlfix.</p> https://forum.selfhtml.org/self/2017/jul/19/asynchrones-javascript/1699559#m1699559 TS ts-self@online.de https://bitworks.de 2017-07-19T20:07:52Z 2017-07-19T20:10:23Z asynchrones JavaScript <p>Hello,</p> <p>ich finde, dass wir das doch noch weiter verfolgen sollten. Wenn das tatsächlich alles <a href="https://www.golem.de/news/parallel-js-javascript-wird-multithreaded-1303-98311.html" rel="nofollow noopener noreferrer">ohne Zutun des Programmierers</a> stattfindet, sollte manzumindest wissen, wo man Semaphore o. ä. vorsehen muss und wie man die atomrisiert anlegen kann.</p> <p>Witzigerweise nennt sich das dann <a href="http://smallcultfollowing.com/babysteps/blog/2012/12/05/self-hosted-parallel-js/" rel="nofollow noopener noreferrer">Self-Hosted</a></p> <p>Liebe Grüße<br> Tom S.</p> <div class="signature">-- <br> Es gibt nichts Gutes, außer man tut es<br> Andersdenkende waren noch nie beliebt, aber meistens diejenigen, die die Freiheit vorangebracht haben.<br> </div> https://forum.selfhtml.org/self/2017/jul/19/asynchrones-javascript/1699560#m1699560 1unitedpower 2017-07-19T20:16:50Z 2017-07-19T20:16:50Z asynchrones JavaScript <blockquote> <blockquote> <p>Doch, schließlich gibt die Methode <a href="https://developer.mozilla.org/en-US/docs/Web/API/Body/json" rel="nofollow noopener noreferrer">wieder einen Promise zurück</a>.</p> </blockquote> <p>Ok, da lag ich falsch, JSON.parse() wäre synchron. Aber so richtig asynchron wird Response.json() nicht sein.</p> </blockquote> <p>Die Erklärung stimmt auch nur halb. Promises können synchron oder asynchron resolved werden, zum Beispiel kann man auch das synchrone JSON.parse() in eine Promise-API wrappen:</p> <pre><code class="block language-js"><span class="token keyword">function</span> <span class="token function">json</span> <span class="token punctuation">(</span><span class="token parameter">jsonString</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">try</span> <span class="token punctuation">{</span> <span class="token keyword">debugger</span><span class="token punctuation">;</span> <span class="token keyword">const</span> jsonObject <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>jsonString<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">resolve</span><span class="token punctuation">(</span>jsonObject<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">catch</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">reject</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> </code></pre> <p>Ein Aufruf <code>json('42')</code> würde den String '42' synchron/blockierend parsen und sofort ein Promise zurück geben, das den Status <code>resolved</code> hat. An dem Breakpoint liegt der <code>json</code>-Aufruf also auf dem Callstack. Erst wenn man das Ergebnis mit <code>then</code> weiter vearbeitet, wird ein neuer Task in die Event-Queue gepusht.</p> <p>Es gibt also bei Promise-APIs zwei Stellen an denen Asynchronität eine Rolle spielt:</p> <ol> <li>Der Übergang <code>pending -> resolved</code> (oder <code>pending -> rejected</code>) kann asynchron oder synchron sein.</li> <li>Die Ergebnisverwertung mit <code>then</code> ist immer asynchron.</li> </ol> <p>Das kann man sich vermutlich am einfachsten vor Augen führen, indem man sich mit den DevTools die Callstacks zu kritischen Zeitpunkten ansieht. Hab' da mal was gebastelt: <a href="https://jsfiddle.net/6mxbz9Lh/2/" rel="noopener noreferrer">https://jsfiddle.net/6mxbz9Lh/2/</a>.</p> https://forum.selfhtml.org/self/2017/jul/19/asynchrones-javascript/1699561#m1699561 1unitedpower 2017-07-19T20:47:12Z 2017-07-19T20:47:12Z asynchrones JavaScript <blockquote> <p>Wenn das tatsächlich alles <a href="https://www.golem.de/news/parallel-js-javascript-wird-multithreaded-1303-98311.html" rel="nofollow noopener noreferrer">ohne Zutun des Programmierers</a> stattfindet, sollte manzumindest wissen, wo man Semaphore o. ä. vorsehen muss und wie man die atomrisiert anlegen kann.</p> </blockquote> <p>Das Rechenmodell von Parallel.js ist darauf ausgelegt, dass du mit unveränderlichen Zuständen und ohne Nebenwirkungen programmierst. Das heißt, du vermeidest Race-Conditions grundsätzlich und begibst dich erst gar nicht in die missliche Lage ein Problem wechselseitigen Ausschlusses lösen zu müssen. Das spart viel Code, der mit dem eigentlichen Programmierproblem nichts zu tun gehabt hätte, der also nur der Buchhaltung gedient hätte. Man vermeidet außerdem Folgeprobleme, wie Deadlocks oder Fairness-Bedingungen. Der beste Code ist der, den man nie schreiben muss.</p> <blockquote> <p>Witzigerweise nennt sich das dann <a href="http://smallcultfollowing.com/babysteps/blog/2012/12/05/self-hosted-parallel-js/" rel="nofollow noopener noreferrer">Self-Hosted</a></p> </blockquote> <p>Self-hosted benutzt man ganz allgemein für Programmiersprachen-Interpreter, (JIT-)Compiler und Ausführungsumgebungen, die teilweise in der Programmiersprache selbst geschrieben sind. Der C++-Compiler wird zum Beispiel auch in C++ geschrieben, eine neue Compiler-Version wird also von einer älteren Compiler-Version übersetzt.</p> https://forum.selfhtml.org/self/2017/jul/19/asynchrones-javascript/1699588#m1699588 TS ts-self@online.de https://bitworks.de 2017-07-20T10:23:22Z 2017-07-20T10:23:22Z asynchrones JavaScript <p>Hello,</p> <blockquote> <blockquote> <p>Witzigerweise nennt sich das dann <a href="http://smallcultfollowing.com/babysteps/blog/2012/12/05/self-hosted-parallel-js/" rel="nofollow noopener noreferrer">Self-Hosted</a></p> </blockquote> </blockquote> <blockquote> <p>Self-hosted benutzt man ganz allgemein für Programmiersprachen-Interpreter, (JIT-)Compiler und Ausführungsumgebungen, die teilweise in der Programmiersprache selbst geschrieben sind. Der C++-Compiler wird zum Beispiel auch in C++ geschrieben, eine neue Compiler-Version wird also von einer älteren Compiler-Version übersetzt.</p> </blockquote> <p>Das war mir schon irgendwie klar. Ich fand nur den Namen so vertraut :-)<br> Gewundert habe ich mich allerdings, dass das Verfahren bei JavaScript auch sinnvoll sein soll. Ich hatte immer angenommen, dass das dann zu langsam ist, genauso, wenn man neue PHP-Funktionen in PHP entwickelt...</p> <p>Oder ist hier gemeint, dass doch Object-Code erzeugt wird, der dann noch bereinigt wird, bevor er durch den Linker (oder was sonst anschließend kommt) geschickt wird?</p> <p>Liebe Grüße<br> Tom S.</p> <div class="signature">-- <br> Es gibt nichts Gutes, außer man tut es<br> Andersdenkende waren noch nie beliebt, aber meistens diejenigen, die die Freiheit vorangebracht haben.<br> </div> https://forum.selfhtml.org/self/2017/jul/19/asynchrones-javascript/1699581#m1699581 dedlfix 2017-07-20T09:17:50Z 2017-07-20T09:17:50Z asynchrones JavaScript <p>Tach!</p> <blockquote> <blockquote> <p>Du kannst jedoch die zwei fetch() mit then() in ein requests.map() stecken, dann sparst du dir den doppelten Code <em>und</em> hast den zeitlichen Vorteil.</p> </blockquote> <p>Wo finde ich was dazu?</p> </blockquote> <p>Mehrere Vorschläge dazu fand ich bei stackoverflow, gesucht nach <a href="https://stackoverflow.com/questions/31710768/how-can-i-fetch-an-array-of-urls-with-promise-all" rel="noopener noreferrer">javascript fetch promise.all</a>.</p> <p>Konkret meinte ich diesen Vorschlag von dort:</p> <pre><code class="block language-javascript">Promise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span>urls<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">url</span> <span class="token operator">=></span> <span class="token function">fetch</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">resp</span> <span class="token operator">=></span> resp<span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">texts</span> <span class="token operator">=></span> <span class="token punctuation">{</span> … <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre> <p>Der macht das mit URLs statt Requests, aber das ist ja das gleiche Prinzip.</p> <p>dedlfix.</p> https://forum.selfhtml.org/self/2017/jul/19/asynchrones-javascript/1699772#m1699772 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2017-07-23T11:47:01Z 2017-07-23T12:05:03Z asynchrones JavaScript <p>@@dedlfix</p> <blockquote> <blockquote> <blockquote> <p>Du kannst jedoch die zwei fetch() mit then() in ein requests.map() stecken, dann sparst du dir den doppelten Code <em>und</em> hast den zeitlichen Vorteil.</p> </blockquote> <p>Wo finde ich was dazu?</p> </blockquote> <p>Mehrere Vorschläge dazu fand ich bei stackoverflow, gesucht nach <a href="https://stackoverflow.com/questions/31710768/how-can-i-fetch-an-array-of-urls-with-promise-all" rel="noopener noreferrer">javascript fetch promise.all</a>.</p> <p>Konkret meinte ich diesen Vorschlag von dort:</p> <pre><code class="block language-javascript">Promise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span>urls<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">url</span> <span class="token operator">=></span> <span class="token function">fetch</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">resp</span> <span class="token operator">=></span> resp<span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">texts</span> <span class="token operator">=></span> <span class="token punctuation">{</span> … <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre> <p>Der macht das mit URLs statt Requests, aber das ist ja das gleiche Prinzip.</p> </blockquote> <p>Meintest du das so?</p> <pre><code class="block language-javascript"><span class="token keyword">var</span> aRequest <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Request</span><span class="token punctuation">(</span><span class="token string">'a.json'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> bRequest <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Request</span><span class="token punctuation">(</span><span class="token string">'b.json'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> Promise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span> <span class="token punctuation">[</span>aRequest<span class="token punctuation">,</span> bRequest<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span> <span class="token parameter">request</span> <span class="token operator">=></span> <span class="token function">fetch</span><span class="token punctuation">(</span>request<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token operator">=></span> response<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">values</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">var</span> aData <span class="token operator">=</span> values<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">var</span> bData <span class="token operator">=</span> values<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// do something with aData and bData</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Ja, das läuft. Irgendwie kann ich mich mit den Pfeilen <code>=></code> noch nicht anfreunden.</p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> https://forum.selfhtml.org/self/2017/jul/19/asynchrones-javascript/1699589#m1699589 1unitedpower 2017-07-20T11:00:37Z 2017-07-20T11:00:37Z asynchrones JavaScript <blockquote> <p>Ich hatte immer angenommen, dass das dann zu langsam ist, genauso, wenn man neue PHP-Funktionen in PHP entwickelt...</p> </blockquote> <p>JavaScript ist um Größenordnungen schneller als PHP, das liegt unter anderem am Sprachdesign (zum Beispiel asynchronous IO) und daran, dass Microsoft, Google, Apple und Firefox in einem ständigen Wettbewerb um die schnellste JavaScript-Engine ringen.</p> <p>Das Interesse an PHP unter Wirtschaftsriesen ist mit der Ausnahme von Facebook dagegen verschwindend gering, und selbst Facebook investiert lieber in den hauseigenen Dialekt „Hack“. Wieviel von dem Know-How zurück in PHP fließt, kann ich nicht einschätzen, aber offenbar nicht zu viel.</p> <blockquote> <p>Oder ist hier gemeint, dass doch Object-Code erzeugt wird, der dann noch bereinigt wird, bevor er durch den Linker (oder was sonst anschließend kommt) geschickt wird?</p> </blockquote> <p>Die meisten heutigen JS-Engines sind Just-In-Time-Compiler, also richtig da wird Object-Code erzeugt.</p> https://forum.selfhtml.org/self/2017/jul/19/asynchrones-javascript/1699780#m1699780 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2017-07-23T12:58:58Z 2017-07-23T12:58:58Z asynchrones JavaScript <p>@@Gunnar Bittersmann</p> <blockquote> <blockquote> <p>Der macht das mit URLs statt Requests, aber das ist ja das gleiche Prinzip.</p> </blockquote> </blockquote> <p>Was ist überhaupt der Unterschied zwieschen <code>fetch(url)</code> und <code>fetch(new Request(url))</code>?</p> <p>Mit Array der benötigten Ressourcen sieht’s so aus:</p> <pre><code class="block language-javascript"><span class="token keyword">var</span> urls <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token string">'a.json'</span><span class="token punctuation">,</span> <span class="token string">'b.json'</span> <span class="token punctuation">]</span><span class="token punctuation">;</span> Promise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span> urls<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span> <span class="token parameter">url</span> <span class="token operator">=></span> <span class="token function">fetch</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token operator">=></span> response<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">values</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">var</span> aData <span class="token operator">=</span> values<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">var</span> bData <span class="token operator">=</span> values<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// do something with aData and bData</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Unschön daran ist noch, dass man später beim Auslesen von <code>values</code> sich genau an die Reihenfolge halten muss wie man sie im Array <code>urls</code> festgelegt hatte – ohne dass dies im Code ersichtlich wäre.</p> <p>Wie kommt man aus der Nummer raus? <code>urls</code> als Array von Objekten?</p> <pre><code class="block language-javascript"><span class="token keyword">var</span> urls <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'aData'</span><span class="token punctuation">,</span> <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'a.json'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'bData'</span><span class="token punctuation">,</span> <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'b.json'</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span><span class="token punctuation">;</span> </code></pre> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> https://forum.selfhtml.org/self/2017/jul/19/asynchrones-javascript/1699781#m1699781 dedlfix 2017-07-23T13:16:57Z 2017-07-23T13:16:57Z asynchrones JavaScript <p>Tach!</p> <blockquote> <p>Was ist überhaupt der Unterschied zwieschen <code>fetch(url)</code> und <code>fetch(new Request(url))</code>?</p> </blockquote> <p>Sieht aus wie: nichts. Vermutlich kann man mit dem Request-Objekt noch eine Menge mehr Dinge anstellen. Andererseits kann man dem fetch() (genau wie dem Request-Konstruktor) auch einen zweiten Parameter mit Optionen übergeben.</p> <blockquote> <p>Unschön daran ist noch, dass man später beim Auslesen von <code>values</code> sich genau an die Reihenfolge halten muss wie man sie im Array <code>urls</code> festgelegt hatte – ohne dass dies im Code ersichtlich wäre.</p> </blockquote> <p>Zumindest kann man mit Array-Dekonstruktion den Zugriff über Nummern einsparen</p> <pre><code class="block language-javascript"> <span class="token comment">// var aData = values[0];</span> <span class="token comment">// var bData = values[1];</span> <span class="token keyword">var</span> <span class="token punctuation">[</span>aData<span class="token punctuation">,</span> bData<span class="token punctuation">]</span> <span class="token operator">=</span> values<span class="token punctuation">;</span> </code></pre> <blockquote> <p>Wie kommt man aus der Nummer raus?</p> </blockquote> <p>Wohl eher nicht, weil das Promise.all() nur mit Iterables arbeitet und da nur eine reihenfolgenbasierte Zugriffgeschichte geht.</p> <p>dedlfix.</p> https://forum.selfhtml.org/self/2017/jul/19/asynchrones-javascript/1699795#m1699795 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2017-07-23T16:13:17Z 2017-07-23T16:13:17Z asynchrones JavaScript <p>@@Gunnar Bittersmann</p> <p>Ich mach mal den Columbo: Eine Frage hätte ich dann doch noch.</p> <p>Im Script kann man jedes <code>var</code> durch <code>let</code> ersetzen. Aber was wäre wirklich stilvoll? Wo wäre <code>var</code> angebracht, wo <code>let</code>?</p> <blockquote> <pre><code class="block language-javascript"><span class="token keyword">var</span> currentLanguage <span class="token operator">=</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>lang<span class="token punctuation">;</span> <span class="token keyword">var</span> urls <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token string">'config/available-languages.json'</span><span class="token punctuation">,</span> <span class="token string">'lib/language-names.json'</span><span class="token punctuation">,</span> <span class="token string">'lib/language-names.'</span> <span class="token operator">+</span> currentLanguage <span class="token operator">+</span> <span class="token string">'.json'</span> <span class="token punctuation">]</span><span class="token punctuation">;</span> Promise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span> urls<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span> <span class="token parameter">url</span> <span class="token operator">=></span> <span class="token function">fetch</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token operator">=></span> response<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">values</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">var</span> <span class="token punctuation">[</span>availableLanguages<span class="token punctuation">,</span> languageNames<span class="token punctuation">,</span> localLanguageNames<span class="token punctuation">]</span> <span class="token operator">=</span> values<span class="token punctuation">;</span> <span class="token keyword">var</span> template <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#lang-menu-item'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> availableLanguages<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">lang</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>lang <span class="token operator">!=</span> currentLanguage<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> clone <span class="token operator">=</span> template<span class="token punctuation">.</span>content<span class="token punctuation">.</span><span class="token function">cloneNode</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> liElement <span class="token operator">=</span> clone<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'li'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> aElement <span class="token operator">=</span> liElement<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> aElement<span class="token punctuation">.</span>href <span class="token operator">=</span> <span class="token string">'?lang='</span> <span class="token operator">+</span> lang<span class="token punctuation">;</span> aElement<span class="token punctuation">.</span>hreflang <span class="token operator">=</span> lang<span class="token punctuation">;</span> aElement<span class="token punctuation">.</span>lang <span class="token operator">=</span> lang<span class="token punctuation">;</span> aElement<span class="token punctuation">.</span>textContent <span class="token operator">=</span> languageNames<span class="token punctuation">[</span>lang<span class="token punctuation">]</span> <span class="token operator">||</span> lang<span class="token punctuation">;</span> liElement<span class="token punctuation">.</span>title <span class="token operator">=</span> localLanguageNames<span class="token punctuation">[</span>lang<span class="token punctuation">]</span> <span class="token operator">||</span> <span class="token string">''</span><span class="token punctuation">;</span> template<span class="token punctuation">.</span>parentNode<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>clone<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> </blockquote> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> https://forum.selfhtml.org/self/2017/jul/19/asynchrones-javascript/1699798#m1699798 TS ts-self@online.de https://bitworks.de 2017-07-23T16:41:52Z 2017-07-23T16:41:52Z asynchrones JavaScript <p>Hello,</p> <blockquote> <p>Ich mach mal den Columbo: Eine Frage hätte ich dann doch noch.</p> <p>Im Script kann man jedes <code>var</code> durch <code>let</code> ersetzen. Aber was wäre wirklich stilvoll? Wo wäre <code>var</code> angebracht, wo <code>let</code>?</p> </blockquote> <p>Dumm zurückgefragt:<br> Beschreiben die beiden nicht unterschiedliche Scopes?</p> <p>Liebe Grüße<br> Tom S.</p> <div class="signature">-- <br> Es gibt nichts Gutes, außer man tut es<br> Andersdenkende waren noch nie beliebt, aber meistens diejenigen, die die Freiheit vorangebracht haben.<br> </div> https://forum.selfhtml.org/self/2017/jul/19/asynchrones-javascript/1699800#m1699800 Matthias Apsel matthias.apsel@selfhtml.org http://brückentage.info 2017-07-23T16:44:58Z 2017-07-23T16:44:58Z asynchrones JavaScript <p>Hallo Gunnar Bittersmann,</p> <blockquote> <p>Im Script kann man jedes <code>var</code> durch <code>let</code> ersetzen. Aber was wäre wirklich stilvoll? Wo wäre <code>var</code> angebracht, wo <code>let</code>?</p> </blockquote> <p><a href="http://caniuse.com/#feat=let" rel="noopener noreferrer">Vorsicht rot</a>. <a href="http://gs.statcounter.com/browser-market-share" rel="nofollow noopener noreferrer">Tendenz steigend</a>?</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Rosen sind rot. </div> https://forum.selfhtml.org/self/2017/jul/19/asynchrones-javascript/1699803#m1699803 Orlok 2017-07-23T16:50:36Z 2017-07-23T18:13:24Z asynchrones JavaScript <p>Hallo Gunnar</p> <blockquote> <p>Im Script kann man jedes <code>var</code> durch <code>let</code> ersetzen. Aber was wäre wirklich stilvoll? Wo wäre <code>var</code> angebracht, wo <code>let</code>?</p> </blockquote> <p>Vielleicht hilft dir die Lektüre <a href="https://forum.selfhtml.org/self/2016/apr/13/regel-in-css-klasse-aendern/1665503#m1665503" rel="noopener noreferrer">dieses</a> und <a href="https://forum.selfhtml.org/self/2016/apr/13/regel-in-css-klasse-aendern/1665504#m1665504" rel="noopener noreferrer">dieses</a> Beitrags von mir bei der Entscheidungsfindung.</p> <p>Edit: Und <a href="https://forum.selfhtml.org/self/2016/apr/13/regel-in-css-klasse-aendern/1665616#m1665616" rel="noopener noreferrer">dieser</a> Beitrag im selben Thread befasst sich ebenfalls mit dem Thema.</p> <p>Gruß,</p> <p>Orlok</p> https://forum.selfhtml.org/self/2017/jul/19/asynchrones-javascript/1699809#m1699809 1unitedpower 2017-07-23T18:51:29Z 2017-07-23T18:51:29Z asynchrones JavaScript <blockquote> <p>Im Script kann man jedes <code>var</code> durch <code>let</code> ersetzen. Aber was wäre wirklich stilvoll? Wo wäre <code>var</code> angebracht, wo <code>let</code>?</p> </blockquote> <p>Du kannst sogar alle Vorkommen von <code>var</code> durch <code>const</code> ersetzen und das würde ich auch tun. Es signalisiert den Leser(innen), dass die Variablen während ihrer gesamten Lebensdauer nicht mehr überschrieben werden und erspart ihnen dadurch viel Gehirnschmalz.</p> https://forum.selfhtml.org/self/2017/jul/19/asynchrones-javascript/1699801#m1699801 Matthias Apsel matthias.apsel@selfhtml.org http://brückentage.info 2017-07-23T16:47:09Z 2017-07-23T16:47:09Z asynchrones JavaScript <p>Hallo TS,</p> <blockquote> <p>Beschreiben die beiden nicht unterschiedliche Scopes?</p> </blockquote> <p>Ja.</p> <p><a href="https://mkleine.de/blog/2014/12/11/javascript-var-vs-let/" rel="nofollow noopener noreferrer">Matthias Kleine</a>, <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/let" rel="nofollow noopener noreferrer">MDN</a></p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Rosen sind rot. </div> https://forum.selfhtml.org/self/2017/jul/19/asynchrones-javascript/1699804#m1699804 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2017-07-23T17:05:33Z 2017-07-23T17:05:33Z asynchrones JavaScript <p>@@Matthias Apsel</p> <blockquote> <p><a href="http://caniuse.com/#feat=let" rel="noopener noreferrer">Vorsicht rot</a>.</p> </blockquote> <p>?? Grün, soweit das Auge reicht.</p> <p>Und Browser, die <code class="language-js"><span class="token keyword">let</span></code> nicht verstehen, sind hier sowieso aus dem Rennen, da sie auch <code class="language-js"><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code> nicht verstehen.</p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> https://forum.selfhtml.org/self/2017/jul/19/asynchrones-javascript/1699808#m1699808 1unitedpower 2017-07-23T18:43:29Z 2017-07-23T18:43:29Z asynchrones JavaScript <blockquote> <p><a href="http://caniuse.com/#feat=let" rel="noopener noreferrer">Vorsicht rot</a>. <a href="http://gs.statcounter.com/browser-market-share" rel="nofollow noopener noreferrer">Tendenz steigend</a>?</p> </blockquote> <p>Das sollte niemanden mehr aufhalten, es gibt Pre-Compiler die sorgen schon dafür, dass moderner JavaScript-Code auch in älteren Browsergenerationen funktioniert. Babel und TypeScript, nur um mal die zwei Größten zu nennen.</p> https://forum.selfhtml.org/self/2017/jul/19/asynchrones-javascript/1699812#m1699812 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2017-07-23T21:43:09Z 2017-07-23T21:43:09Z asynchrones JavaScript <p>@@Orlok</p> <blockquote> <p>Vielleicht hilft dir die Lektüre <a href="https://forum.selfhtml.org/self/2016/apr/13/regel-in-css-klasse-aendern/1665503#m1665503" rel="noopener noreferrer">dieses</a> und <a href="https://forum.selfhtml.org/self/2016/apr/13/regel-in-css-klasse-aendern/1665504#m1665504" rel="noopener noreferrer">dieses</a> Beitrags von mir bei der Entscheidungsfindung.</p> </blockquote> <p>Weil „Variablen prinzipiell so lokal wie möglich angelegt werden sollten“ also nirgends <code class="laguage-js">var</code>. Und da sämtliche Variablen ihren einmal zugewiesenen Wert behalten, überall <code class="laguage-js">const</code>. So also?</p> <pre><code class="block language-javascript"> <span class="token keyword">const</span> currentLanguage <span class="token operator">=</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>lang<span class="token punctuation">;</span> <span class="token keyword">const</span> urls <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token string">'config/available-languages.json'</span><span class="token punctuation">,</span> <span class="token string">'lib/language-names.json'</span><span class="token punctuation">,</span> <span class="token string">'lib/language-names.'</span> <span class="token operator">+</span> currentLanguage <span class="token operator">+</span> <span class="token string">'.json'</span> <span class="token punctuation">]</span><span class="token punctuation">;</span> Promise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span> urls<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span> <span class="token parameter">url</span> <span class="token operator">=></span> <span class="token function">fetch</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token operator">=></span> response<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">values</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">[</span>availableLanguages<span class="token punctuation">,</span> languageNames<span class="token punctuation">,</span> localLanguageNames<span class="token punctuation">]</span> <span class="token operator">=</span> values<span class="token punctuation">;</span> <span class="token keyword">const</span> template <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#lang-menu-item'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> availableLanguages<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">lang</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>lang <span class="token operator">!=</span> currentLanguage<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> clone <span class="token operator">=</span> template<span class="token punctuation">.</span>content<span class="token punctuation">.</span><span class="token function">cloneNode</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> liElement <span class="token operator">=</span> clone<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'li'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> aElement <span class="token operator">=</span> liElement<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> aElement<span class="token punctuation">.</span>href <span class="token operator">=</span> <span class="token string">'?lang='</span> <span class="token operator">+</span> lang<span class="token punctuation">;</span> aElement<span class="token punctuation">.</span>hreflang <span class="token operator">=</span> lang<span class="token punctuation">;</span> aElement<span class="token punctuation">.</span>lang <span class="token operator">=</span> lang<span class="token punctuation">;</span> aElement<span class="token punctuation">.</span>textContent <span class="token operator">=</span> languageNames<span class="token punctuation">[</span>lang<span class="token punctuation">]</span> <span class="token operator">||</span> lang<span class="token punctuation">;</span> liElement<span class="token punctuation">.</span>title <span class="token operator">=</span> localLanguageNames<span class="token punctuation">[</span>lang<span class="token punctuation">]</span> <span class="token operator">||</span> <span class="token string">''</span><span class="token punctuation">;</span> template<span class="token punctuation">.</span>parentNode<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>clone<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> https://forum.selfhtml.org/self/2017/jul/19/asynchrones-javascript/1699806#m1699806 Matthias Apsel matthias.apsel@selfhtml.org http://brückentage.info 2017-07-23T18:19:26Z 2017-07-23T18:19:26Z asynchrones JavaScript <p>Hallo Gunnar Bittersmann,</p> <blockquote> <blockquote> <p><a href="http://caniuse.com/#feat=let" rel="noopener noreferrer">Vorsicht rot</a>.</p> </blockquote> <p>?? Grün, soweit das Auge reicht.</p> </blockquote> <p>Man muss "show all" wählen, dann bekommt man den auch UC-Browser angezeigt, der in Europa zugegebenermaßen keine Rolle spielt.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Rosen sind rot. </div> https://forum.selfhtml.org/self/2017/jul/19/asynchrones-javascript/1699813#m1699813 Orlok 2017-07-23T22:54:10Z 2017-07-24T00:08:52Z asynchrones JavaScript <p>Hallo Gunnar</p> <blockquote> <blockquote> <p>Vielleicht hilft dir die Lektüre <a href="https://forum.selfhtml.org/self/2016/apr/13/regel-in-css-klasse-aendern/1665503#m1665503" rel="noopener noreferrer">dieses</a> und <a href="https://forum.selfhtml.org/self/2016/apr/13/regel-in-css-klasse-aendern/1665504#m1665504" rel="noopener noreferrer">dieses</a> Beitrags von mir bei der Entscheidungsfindung.</p> </blockquote> <p>Weil „Variablen prinzipiell so lokal wie möglich angelegt werden sollten“ also nirgends <code class="laguage-js">var</code>. Und da sämtliche Variablen ihren einmal zugewiesenen Wert behalten, überall <code class="laguage-js">const</code>. So also?</p> </blockquote> <p>Im Prinzip ja.</p> <blockquote> <pre><code class="block language-javascript"><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">values</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">[</span>availableLanguages<span class="token punctuation">,</span> languageNames<span class="token punctuation">,</span> localLanguageNames<span class="token punctuation">]</span> <span class="token operator">=</span> values<span class="token punctuation">;</span> </code></pre> </blockquote> <p>Diese Zeile ist aber eigentlich überflüssig.</p> <pre><code class="block language-javascript"><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">[</span>availableLanguages<span class="token punctuation">,</span> languageNames<span class="token punctuation">,</span> localLanguageNames<span class="token punctuation">]</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> </code></pre> <p>Du kannst das Array mit dem der Parameter <code>values</code> initialisiert wird auch direkt in der Parameterliste destrukturieren. Dabei müssen allerdings wie in dem Beispiel oben Klammern gesetzt werden, sonst gibt das einen Syntaxfehler.</p> <blockquote> <pre><code class="block language-javascript"> <span class="token keyword">const</span> clone <span class="token operator">=</span> template<span class="token punctuation">.</span>content<span class="token punctuation">.</span><span class="token function">cloneNode</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> liElement <span class="token operator">=</span> clone<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'li'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> aElement <span class="token operator">=</span> liElement<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> </blockquote> <p>Hier könnte man darüber nachdenken, ob es wirklich alle drei <code>const</code> braucht.</p> <blockquote> <pre><code class="block language-javascript"> aElement<span class="token punctuation">.</span>href <span class="token operator">=</span> <span class="token string">'?lang='</span> <span class="token operator">+</span> lang<span class="token punctuation">;</span> aElement<span class="token punctuation">.</span>hreflang <span class="token operator">=</span> lang<span class="token punctuation">;</span> aElement<span class="token punctuation">.</span>lang <span class="token operator">=</span> lang<span class="token punctuation">;</span> aElement<span class="token punctuation">.</span>textContent <span class="token operator">=</span> languageNames<span class="token punctuation">[</span>lang<span class="token punctuation">]</span> <span class="token operator">||</span> lang<span class="token punctuation">;</span> </code></pre> </blockquote> <p>Wenn mehreren Eigenschaften eines Objektes Werte zugewiesen werden sollen, dann mache ich das ganz gern mit <code>Object.assign</code>. Da ein Zuweisungsausdruck grundsätzlich zu dem zugewiesenen Wert aufgelöst wird, lässt es sich in solchen Fällen leider nicht vermeiden, das Objekt, welches das Ziel der Zuweisung ist, jedes mal aufs neue zu referenzieren. Das kann man sich mit <code>assign</code> sparen.</p> <pre><code class="block language-javascript">Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span>liElement<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">href</span><span class="token operator">:</span> <span class="token string">'?lang='</span> <span class="token operator">+</span> lang<span class="token punctuation">,</span> <span class="token literal-property property">hreflang</span><span class="token operator">:</span> lang<span class="token punctuation">,</span> <span class="token literal-property property">lang</span><span class="token operator">:</span> lang<span class="token punctuation">,</span> <span class="token literal-property property">textContent</span><span class="token operator">:</span> languageNames<span class="token punctuation">[</span>lang<span class="token punctuation">]</span> <span class="token operator">||</span> lang <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Zurückgegeben wird von <code>assign</code> das Zielobjekt, welches als ersts Argument übergeben wird, aber da die Referenz hier nicht benötigt wird, kann man auf die Deklaration einer Konstante für das Element verzichten. Ich finde, dass schaut ein wenig eleganter aus. Aber das ist nur eine Idee. ;-)</p> <pre><code class="block language-javascript"><span class="token punctuation">{</span> <span class="token literal-property property">lang</span><span class="token operator">:</span> lang <span class="token punctuation">}</span> </code></pre> <p>Das könnte man dann wenn man wollte auch noch abkürzen und einfach <code>lang,</code> schreiben. Dann wird der Parameter referenziert, sein Bezeichner als Eigenschaftsname verwendet und sein Wert zugewiesen.</p> <p>Edit:</p> <p>Ich habe gerade beim Überfliegen des Threads gesehen, dass dein Markup so aussieht:</p> <blockquote> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lang-menu<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lang-menu-item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lang-menu.js<span class="token punctuation">"</span></span> <span class="token attr-name">async</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>Das sieht nicht so aus, als würde sich da regelmäßig was ändern, also würde ich an dieser Stelle vermutlich auf die Methode <code>querySelector()</code> verzichten und die beiden Elemente statt dessen über die Eigenschaft <code>firstElementChild</code> referenzieren.</p> <p>Viele Grüße,</p> <p>Orlok</p> https://forum.selfhtml.org/self/2017/jul/19/asynchrones-javascript/1699862#m1699862 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2017-07-24T11:38:23Z 2017-07-24T12:02:03Z asynchrones JavaScript <p>@@Orlok</p> <p>Vielen Dank für deine Erläuterungen. Einiges davon würde ich aber wegen „kürzerer Code ist nicht unbedingt besser lesbar“ verwerfen. Aber gut zu wissen, was alles möglich ist.</p> <blockquote> <p>Wenn mehreren Eigenschaften eines Objektes Werte zugewiesen werden sollen, dann mache ich das ganz gern mit <code>Object.assign</code>.</p> </blockquote> <p><code>Object.assign</code> ist das neue <code>with</code>? </p> <blockquote> <blockquote> <pre><code class="block language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lang-menu-item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>Das sieht nicht so aus, als würde sich da regelmäßig was ändern</p> </blockquote> <p>Da bin ich mir nicht so sicher. Ich bin mir nicht sicher, ob <code>li</code> das geeignete Element für das <code>title</code>-Attribut ist. Vielleicht gehört das ja ans <code>a</code>-Element; dann bräuchte dieses noch ein inneres <code>span</code>:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>?lang=es<span class="token punctuation">"</span></span> <span class="token attr-name">hreflang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>es<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>spanisch<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>es<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>español<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> </code></pre> <blockquote> <p>also würde ich an dieser Stelle vermutlich auf die Methode <code>querySelector()</code> verzichten und die beiden Elemente statt dessen über die Eigenschaft <code>firstElementChild</code> referenzieren.</p> </blockquote> <p>Ich würde das JavaScript so robust halten, dass es auch bei kleineren Markup-Änderungen noch funktioniert.</p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div>