From ab53702028fd33e0ea3fc9611ad4becf5f9c3469 Mon Sep 17 00:00:00 2001 From: Homero304 Date: Sat, 17 Oct 2020 12:07:51 -0500 Subject: [PATCH 1/5] Fetch: Download progress --- 5-network/03-fetch-progress/article.md | 86 +++++++++---------- .../progress.view/index.html | 4 +- 2 files changed, 45 insertions(+), 45 deletions(-) diff --git a/5-network/03-fetch-progress/article.md b/5-network/03-fetch-progress/article.md index 2d003157d..573065fdf 100644 --- a/5-network/03-fetch-progress/article.md +++ b/5-network/03-fetch-progress/article.md @@ -1,60 +1,60 @@ -# Fetch: Download progress +# Fetch: progreso de la descarga -The `fetch` method allows to track *download* progress. +El método `fetch` permite rastrear el progreso de *descarga*. -Please note: there's currently no way for `fetch` to track *upload* progress. For that purpose, please use [XMLHttpRequest](info:xmlhttprequest), we'll cover it later. +Ten en cuenta: actualmente no hay forma de que `fetch` rastree el progreso de *carga*. Para ese propósito, utiliza [XMLHttpRequest](info:xmlhttprequest), lo cubriremos más adelante. -To track download progress, we can use `response.body` property. It's `ReadableStream` -- a special object that provides body chunk-by-chunk, as it comes. Readable streams are described in the [Streams API](https://streams.spec.whatwg.org/#rs-class) specification. +Para rastrear el progreso de la descarga, podemos usar la propiedad `response.body`. Su `ReadableStream`, un objeto especial que proporciona el cuerpo fragmento a fragmento, tal como viene. Las transmisiones legibles se describen en la especificación de la [API de transmisiones](https://streams.spec.whatwg.org/#rs-class). -Unlike `response.text()`, `response.json()` and other methods, `response.body` gives full control over the reading process, and we can count how much is consumed at any moment. +A diferencia de `response.text()`, `response.json()` y otros métodos, `response.body` da control total sobre el proceso de lectura, y podemos contar cuánto se consume en cualquier momento. -Here's the sketch of code that reads the reponse from `response.body`: +Aquí está el bosquejo del código que lee la respuesta de `response.body`: ```js -// instead of response.json() and other methods +// en lugar de response.json() y otros métodos const reader = response.body.getReader(); -// infinite loop while the body is downloading +// bucle infinito mientras el cuerpo se descarga while(true) { - // done is true for the last chunk - // value is Uint8Array of the chunk bytes + // done es true para el último fragmento + // value es Uint8Array de los bytes del fragmento const {done, value} = await reader.read(); if (done) { break; } - console.log(`Received ${value.length} bytes`) + console.log(`Recibí ${value.length} bytes`) } ``` -The result of `await reader.read()` call is an object with two properties: -- **`done`** -- `true` when the reading is complete, otherwise `false`. -- **`value`** -- a typed array of bytes: `Uint8Array`. +El resultado de la llamada `await reader.read()` es un objeto con dos propiedades: +- **`done`** -- `true` cuando la lectura está completa, de lo contrario `false`. +- **`value`** -- una matriz de tipo bytes: `Uint8Array`. ```smart -Streams API also describes asynchronous iteration over `ReadableStream` with `for await..of` loop, but it's not yet widely supported (see [browser issues](https://github.com/whatwg/streams/issues/778#issuecomment-461341033)), so we use `while` loop. +La API de transmisiones también describe la iteración asincrónica sobre `ReadableStream` con el bucle `for await..of`, pero aún no es ampliamente compatible (consulta [problemas del navegador](https://github.com/whatwg/streams/issues/778#issuecomment-461341033)), por lo que usamos el bucle `while`. ``` -We receive response chunks in the loop, until the loading finishes, that is: until `done` becomes `true`. +Recibimos fragmentos de respuesta en el bucle, hasta que finaliza la carga, es decir: hasta que `done` se convierte en `true`. -To log the progress, we just need for every received fragment `value` to add its length to the counter. +Para registrar el progreso, solo necesitamos que cada `value` de fragmento recibido agregue su longitud al contador. -Here's the full working example that gets the response and logs the progress in console, more explanations to follow: +Aquí está el ejemplo funcional completo que obtiene la respuesta y registra el progreso en la consola, más explicaciones a seguir: ```js run async -// Step 1: start the fetch and obtain a reader -let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits?per_page=100'); +// Paso 1: iniciar la búsqueda y obtener un lector +let response = await fetch('https://api.github.com/repos/javascript-tutorial/es.javascript.info/commits?per_page=100'); const reader = response.body.getReader(); -// Step 2: get total length +// Paso 2: obtener la longitud total const contentLength = +response.headers.get('Content-Length'); -// Step 3: read the data -let receivedLength = 0; // received that many bytes at the moment -let chunks = []; // array of received binary chunks (comprises the body) +// Paso 3: leer los datos +let receivedLength = 0; // cantidad de bytes recibidos en este momento +let chunks = []; // matriz de fragmentos binarios recibidos (comprende el cuerpo) while(true) { const {done, value} = await reader.read(); @@ -65,10 +65,10 @@ while(true) { chunks.push(value); receivedLength += value.length; - console.log(`Received ${receivedLength} of ${contentLength}`) + console.log(`Recibí ${receivedLength} de ${contentLength}`) } -// Step 4: concatenate chunks into single Uint8Array +// Paso 4: concatenar fragmentos en un solo Uint8Array let chunksAll = new Uint8Array(receivedLength); // (4.1) let position = 0; for(let chunk of chunks) { @@ -76,37 +76,37 @@ for(let chunk of chunks) { position += chunk.length; } -// Step 5: decode into a string +// Paso 5: decodificar en un string let result = new TextDecoder("utf-8").decode(chunksAll); -// We're done! +// ¡Hemos terminado! let commits = JSON.parse(result); alert(commits[0].author.login); ``` -Let's explain that step-by-step: +Expliquemos eso paso a paso: -1. We perform `fetch` as usual, but instead of calling `response.json()`, we obtain a stream reader `response.body.getReader()`. +1. Realizamos `fetch` como de costumbre, pero en lugar de llamar a `response.json()`, obtenemos un lector de transmisión `response.body.getReader()`. - Please note, we can't use both these methods to read the same response: either use a reader or a response method to get the result. -2. Prior to reading, we can figure out the full response length from the `Content-Length` header. + Ten en cuenta que no podemos usar ambos métodos para leer la misma respuesta: usa un lector o un método de respuesta para obtener el resultado. +2. Antes de leer, podemos averiguar la longitud completa de la respuesta del encabezado `Content-Length`. - It may be absent for cross-origin requests (see chapter ) and, well, technically a server doesn't have to set it. But usually it's at place. -3. Call `await reader.read()` until it's done. + Puede estar ausente para solicitudes cross-origin (consulta el capítulo ) y, bueno, técnicamente un servidor no tiene que configurarlo. Pero generalmente está en su lugar. +3. Llama a `await reader.read()` hasta que esté listo. - We gather response chunks in the array `chunks`. That's important, because after the response is consumed, we won't be able to "re-read" it using `response.json()` or another way (you can try, there'll be an error). -4. At the end, we have `chunks` -- an array of `Uint8Array` byte chunks. We need to join them into a single result. Unfortunately, there's no single method that concatenates those, so there's some code to do that: - 1. We create `chunksAll = new Uint8Array(receivedLength)` -- a same-typed array with the combined length. - 2. Then use `.set(chunk, position)` method to copy each `chunk` one after another in it. -5. We have the result in `chunksAll`. It's a byte array though, not a string. + Recopilamos fragmentos de respuesta en la matriz `chunks`. Eso es importante, porque después de consumir la respuesta, no podremos "releerla" usando `response.json()` u otra forma (puedes intentarlo, habrá un error). +4. Al final, tenemos `chunks` - una matriz de fragmentos de bytes `Uint8Array`. Necesitamos unirlos en un solo resultado. Desafortunadamente, no hay un método único que los concatene, por lo que hay un código para hacerlo: + 1. Creamos `chunksAll = new Uint8Array(selectedLength)` -- una matriz del mismo tipo con la longitud combinada. + 2. Luego usa el método `.set(chunk, position)` para copiar cada `chunk` uno tras otro en él. +5. Tenemos el resultado en `chunksAll`. Sin embargo, es una matriz de bytes, no un string. - To create a string, we need to interpret these bytes. The built-in [TextDecoder](info:text-decoder) does exactly that. Then we can `JSON.parse` it, if necessary. + Para crear un string, necesitamos interpretar estos bytes. El [TextDecoder](info:text-decoder) nativo hace exactamente eso. Luego podemos usar el resultado en `JSON.parse`, si es necesario. - What if we need binary content instead of a string? That's even simpler. Replace steps 4 and 5 with a single line that creates a `Blob` from all chunks: + ¿Qué pasa si necesitamos contenido binario en lugar de un string? Eso es aún más sencillo. Reemplaza los pasos 4 y 5 con una sola línea que crea un `Blob` de todos los fragmentos: ```js let blob = new Blob(chunks); ``` -At the end we have the result (as a string or a blob, whatever is convenient), and progress-tracking in the process. +Al final tenemos el resultado (como un string o un blob, lo que sea conveniente) y el seguimiento del progreso en el proceso. -Once again, please note, that's not for *upload* progress (no way now with `fetch`), only for *download* progress. +Una vez más, ten en cuenta que eso no es para el progreso de *carga* (de ninguna manera ahora con `fetch`), solo para el progreso de *descarga*. diff --git a/5-network/03-fetch-progress/progress.view/index.html b/5-network/03-fetch-progress/progress.view/index.html index ba7f76065..4ae6e28e5 100644 --- a/5-network/03-fetch-progress/progress.view/index.html +++ b/5-network/03-fetch-progress/progress.view/index.html @@ -12,13 +12,13 @@ const chunk = await reader.read(); if (chunk.done) { - console.log("done!"); + console.log("listo!"); break; } chunks.push(chunk.value); receivedLength += chunk.value.length; - console.log(`${receivedLength}/${contentLength} received`) + console.log(`recibí ${receivedLength}/${contentLength}`) } From b8de4d9bf5ddc4863d54cbe2ff668d6dc9a93f7a Mon Sep 17 00:00:00 2001 From: Homero Enrique Marin Galindo Date: Sat, 17 Oct 2020 18:01:12 -0500 Subject: [PATCH 2/5] Update 5-network/03-fetch-progress/article.md Co-authored-by: joaquinelio --- 5-network/03-fetch-progress/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/5-network/03-fetch-progress/article.md b/5-network/03-fetch-progress/article.md index 573065fdf..fe4d139f2 100644 --- a/5-network/03-fetch-progress/article.md +++ b/5-network/03-fetch-progress/article.md @@ -41,7 +41,7 @@ Recibimos fragmentos de respuesta en el bucle, hasta que finaliza la carga, es d Para registrar el progreso, solo necesitamos que cada `value` de fragmento recibido agregue su longitud al contador. -Aquí está el ejemplo funcional completo que obtiene la respuesta y registra el progreso en la consola, más explicaciones a seguir: +Aquí está el ejemplo funcional completo que obtiene la respuesta y registra el progreso en la consola, seguido de su explicación: ```js run async // Paso 1: iniciar la búsqueda y obtener un lector From 4da7955e0a6d167d6b384799bb8379d3f58206cb Mon Sep 17 00:00:00 2001 From: Homero Enrique Marin Galindo Date: Sat, 17 Oct 2020 18:01:37 -0500 Subject: [PATCH 3/5] Update 5-network/03-fetch-progress/article.md Co-authored-by: joaquinelio --- 5-network/03-fetch-progress/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/5-network/03-fetch-progress/article.md b/5-network/03-fetch-progress/article.md index fe4d139f2..05e41bf54 100644 --- a/5-network/03-fetch-progress/article.md +++ b/5-network/03-fetch-progress/article.md @@ -53,7 +53,7 @@ const reader = response.body.getReader(); const contentLength = +response.headers.get('Content-Length'); // Paso 3: leer los datos -let receivedLength = 0; // cantidad de bytes recibidos en este momento +let receivedLength = 0; // cantidad de bytes recibidos hasta el momento let chunks = []; // matriz de fragmentos binarios recibidos (comprende el cuerpo) while(true) { const {done, value} = await reader.read(); From 57d100552c3c81c0c639144a16f4c262b98b8495 Mon Sep 17 00:00:00 2001 From: Homero Enrique Marin Galindo Date: Sat, 17 Oct 2020 18:01:56 -0500 Subject: [PATCH 4/5] Update 5-network/03-fetch-progress/article.md Co-authored-by: joaquinelio --- 5-network/03-fetch-progress/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/5-network/03-fetch-progress/article.md b/5-network/03-fetch-progress/article.md index 05e41bf54..770c3f666 100644 --- a/5-network/03-fetch-progress/article.md +++ b/5-network/03-fetch-progress/article.md @@ -95,7 +95,7 @@ Expliquemos eso paso a paso: 3. Llama a `await reader.read()` hasta que esté listo. Recopilamos fragmentos de respuesta en la matriz `chunks`. Eso es importante, porque después de consumir la respuesta, no podremos "releerla" usando `response.json()` u otra forma (puedes intentarlo, habrá un error). -4. Al final, tenemos `chunks` - una matriz de fragmentos de bytes `Uint8Array`. Necesitamos unirlos en un solo resultado. Desafortunadamente, no hay un método único que los concatene, por lo que hay un código para hacerlo: +4. Al final, tenemos `chunks` - una matriz de fragmentos de bytes `Uint8Array`. Necesitamos unirlos en un solo resultado. Desafortunadamente, no hay un método simple que los concatene, por lo que hay un código para hacerlo: 1. Creamos `chunksAll = new Uint8Array(selectedLength)` -- una matriz del mismo tipo con la longitud combinada. 2. Luego usa el método `.set(chunk, position)` para copiar cada `chunk` uno tras otro en él. 5. Tenemos el resultado en `chunksAll`. Sin embargo, es una matriz de bytes, no un string. From e208693938eb01ec0ef45cbcb76341d487f241d8 Mon Sep 17 00:00:00 2001 From: Homero Enrique Marin Galindo Date: Sat, 17 Oct 2020 18:02:32 -0500 Subject: [PATCH 5/5] Update 5-network/03-fetch-progress/article.md Co-authored-by: joaquinelio --- 5-network/03-fetch-progress/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/5-network/03-fetch-progress/article.md b/5-network/03-fetch-progress/article.md index 770c3f666..e9f22d86d 100644 --- a/5-network/03-fetch-progress/article.md +++ b/5-network/03-fetch-progress/article.md @@ -109,4 +109,4 @@ Expliquemos eso paso a paso: Al final tenemos el resultado (como un string o un blob, lo que sea conveniente) y el seguimiento del progreso en el proceso. -Una vez más, ten en cuenta que eso no es para el progreso de *carga* (de ninguna manera ahora con `fetch`), solo para el progreso de *descarga*. +Una vez más, ten en cuenta que eso no es para el progreso de *carga* (hasta ahora eso no es posible con `fetch`), solo para el progreso de *descarga*. pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy