diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:45 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:45 -0500 |
| commit | 1109132f09d75da9a28b649c7677bb6ce07c40c0 (patch) | |
| tree | 0dd8b084480983cf9f9680e8aedb92782a921b13 /files/es/web/api/response | |
| parent | 4b1a9203c547c019fc5398082ae19a3f3d4c3efe (diff) | |
| download | translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.gz translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.bz2 translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.zip | |
initial commit
Diffstat (limited to 'files/es/web/api/response')
| -rw-r--r-- | files/es/web/api/response/index.html | 128 | ||||
| -rw-r--r-- | files/es/web/api/response/ok/index.html | 66 | ||||
| -rw-r--r-- | files/es/web/api/response/response/index.html | 75 | ||||
| -rw-r--r-- | files/es/web/api/response/status/index.html | 73 |
4 files changed, 342 insertions, 0 deletions
diff --git a/files/es/web/api/response/index.html b/files/es/web/api/response/index.html new file mode 100644 index 0000000000..11e18a501c --- /dev/null +++ b/files/es/web/api/response/index.html @@ -0,0 +1,128 @@ +--- +title: Response +slug: Web/API/Response +tags: + - API + - Experimental + - Fetch + - Interface + - Referencia + - Respuesta +translation_of: Web/API/Response +--- +<div>{{APIRef("Fetch API")}}</div> + +<p>La interfaz <strong><code>Response</code></strong> de la <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> representa la respuesta a una petición.</p> + +<p>Tú puedes crear un nuevo objeto <code>Response</code> usando el constructor{{domxref("Response.Response()")}}, pero es más probable encontrar un objeto Response siendo devuelto como resultado de la operación de otra API, por ejemplo un service worker {{domxref("Fetchevent.respondWith")}}, o un simple {{domxref("GlobalFetch.fetch()")}}.</p> + +<h2 id="Constructor">Constructor</h2> + +<dl> + <dt>{{domxref("Response.Response","Response()")}}</dt> + <dd>Crea un nuevo objeto <code>Response</code>.</dd> +</dl> + +<h2 id="Propiedades">Propiedades</h2> + +<dl> + <dt>{{domxref("Response.headers")}} {{readonlyinline}}</dt> + <dd>Contiene el objeto {{domxref("Headers")}} asociado con la respuesta.</dd> + <dt>{{domxref("Response.ok")}} {{readonlyinline}}</dt> + <dd>Contiene un estado indicando si la respuesta fue exitosa (estado en el rango 200-299) o no.</dd> + <dt>{{domxref("Response.redirected")}} {{ReadOnlyInline}}</dt> + <dd>Indica si la respuesta es o no el resultado de una redirección; eso es, su lista de URL tiene más de una entrada.</dd> + <dt>{{domxref("Response.status")}} {{readonlyinline}}</dt> + <dd>Contiene el código de estado de la respuesta (e.g., <code>200</code> si fue exitosa).</dd> + <dt>{{domxref("Response.statusText")}} {{readonlyinline}}</dt> + <dd>Contiene el mensaje de estado correspondiente al código de estado (e.g., <code>OK</code> para el Código <code>200</code>).</dd> + <dt>{{domxref("Response.type")}} {{readonlyinline}}</dt> + <dd>Contiene el tipo de respuesta (e.g., <code>basic</code>, <code>cors</code>).</dd> + <dt>{{domxref("Response.url")}} {{readonlyinline}}</dt> + <dd>Contiene la URL de respuesta.</dd> + <dt>{{domxref("Response.useFinalURL")}}</dt> + <dd>Contiene un valor booleano indicando si ésta es la URL final de respuesta.</dd> +</dl> + +<p><code>Response</code> implementa {{domxref("Body")}}, de modo que además contiene las propiedades que se detallan a continuación:</p> + +<dl> + <dt>{{domxref("Body.body")}} {{readonlyInline}}</dt> + <dd>Un simple método get que expone un {{domxref("ReadableStream")}} de los contenidos del body.</dd> + <dt>{{domxref("Body.bodyUsed")}} {{readonlyInline}}</dt> + <dd>Almacena un {{domxref("Boolean")}} en el cuál declara si el body ya fue enviado como respuesta anteriormente.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{domxref("Response.clone()")}}</dt> + <dd>Clona un Objeto Respuesta.</dd> + <dt>{{domxref("Response.error()")}}</dt> + <dd>Devuelve un nuevo objeto Respuesta asociado a un error de red.</dd> + <dt>{{domxref("Response.redirect()")}}</dt> + <dd>Crea una nueva respuesta con un URL distinto.</dd> + <dd><code>Response</code> iimplementa {{domxref("Body")}}, de modo que además contiene los métodos que se detallan a continuación:</dd> +</dl> + +<dl> + <dt>{{domxref("Body.arrayBuffer()")}}</dt> + <dd>Toma un flujo {{domxref("Response")}} y lo lee hasta completarlo. Devuelve una promesa que resuelve con un {{domxref("ArrayBuffer")}}.</dd> + <dt>{{domxref("Body.blob()")}}</dt> + <dd>Toma un flujo {{domxref("Response")}} y lo lee hasta completarlo. Devuelve una promesa que resuelve con un {{domxref("Blob")}}.</dd> + <dt>{{domxref("Body.formData()")}}</dt> + <dd>Toma un flujo {{domxref("Response")}} y lo lee hasta completarlo. Devuelve una promesa que resuelve con un objeto {{domxref("FormData")}}.</dd> + <dt>{{domxref("Body.json()")}}</dt> + <dd>Recibe un flujo {{domxref("Response")}} y lo lee hasta completarlo. Devuelve una promesa que resuelve como {{jsxref("JSON")}} el texto del Body enviado.</dd> + <dt>{{domxref("Body.text()")}}</dt> + <dd>Recibe un flujo {{domxref("Response")}} y lo lee hasta completarlo. Devuelve una promesa que resuelve con un {{domxref("USVString")}} (texto).</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<p>En nuestro <a href="https://github.com/mdn/fetch-examples/tree/gh-pages/basic-fetch">ejemplo básico de ferch</a> (<a href="http://mdn.github.io/fetch-examples/basic-fetch/">ejecutar el ejemplo</a>) usamos una llamada <code>fetch()</code> para descargar una imagen y mostrarla en una etiqueta {{htmlelement("img")}} . La llamda a <code>fetch()</code> call devuelve una promesa, la cual resuelve a un objeto<code>Response</code> asociado a la operación fetch.</p> + +<p>Observa como ya que lo que estamos solicitando es una imagen, necesitamos ejecutar {{domxref("Body.blob")}} ({{domxref("Response")}} implements body) para darle a la respuesta su tipo MIME correcto.</p> + +<pre class="brush: js notranslate">var myImage = document.querySelector('.my-image'); +fetch('flowers.jpg').then(function(response) { + return response.blob(); +}).then(function(blob) { + var objectURL = URL.createObjectURL(blob); + myImage.src = objectURL; +});</pre> + +<p>También puedes usar el constructor {{domxref("Response.Response()")}} para crear tus objetos <code>Response</code> personalizados:</p> + +<pre class="brush: js notranslate">var myResponse = new Response();</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Fetch','#response-class','Response')}}</td> + <td>{{Spec2('Fetch')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2> + + + +<p>{{Compat("api.Response")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> + <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> + <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> +</ul> diff --git a/files/es/web/api/response/ok/index.html b/files/es/web/api/response/ok/index.html new file mode 100644 index 0000000000..1bff7fe5db --- /dev/null +++ b/files/es/web/api/response/ok/index.html @@ -0,0 +1,66 @@ +--- +title: Response.ok +slug: Web/API/Response/ok +translation_of: Web/API/Response/ok +--- +<div>{{APIRef("Fetch")}}<br> +La propiedad de solo lectura <code><strong>ok</strong></code> de la interfaz {{domxref("Response")}} contiene un Booleano que indica si la respuesta fue exitosa (estado en un rango de 200 a 299) o no.</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">var <var>miOK</var> = <var>respuesta</var>.ok;</pre> + +<h3 id="Valor">Valor</h3> + +<p>Un {{domxref("Boolean")}}.</p> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>En nuestro <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-response">ejemplo de Fetch Response</a> (véase <a href="http://mdn.github.io/fetch-examples/fetch-response/">Fetch Response en vivo</a>) creamos un nuevo {{domxref("Request")}} usando el constructor {{domxref("Request.Request","Request()")}}, pasando una ruta a un JPG. Luego traemos esta petición usando {{domxref("GlobalFetch.fetch","fetch()")}}, extraemos un blob de la respuesta usando {{domxref("Body.blob")}}, creamos un objeto URL usando {{domxref("URL.createObjectURL")}}, y mostrar esto en un {{htmlelement("img")}}.</p> + +<div class="note"> +<p><strong>Nota:</strong> en la parte superior del bloque de <code>fetch()</code> imprimimos el valor de <code>ok</code> en la consola.</p> +</div> + +<pre class="brush: js">var imagen = document.querySelector('img'); + +var peticion = new Request('flowers.jpg'); + +fetch(peticion).then(function(respuesta) { + console.log(respuesta.ok); //retorna true si la respuesta fue exitosa + respuesta.blob().then(function(miBlob) { + var objectoURL = URL.createObjectURL(miBlob); + imagen.src = objectURL; + }); +});</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{Spec2('Fetch')}}</td> + <td>{{Spec2('Fetch')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + + + +<p>{{Compat("api.Response.ok")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> + <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> + <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> +</ul> diff --git a/files/es/web/api/response/response/index.html b/files/es/web/api/response/response/index.html new file mode 100644 index 0000000000..f967d677f2 --- /dev/null +++ b/files/es/web/api/response/response/index.html @@ -0,0 +1,75 @@ +--- +title: Response() +slug: Web/API/Response/Response +translation_of: Web/API/Response/Response +--- +<div>{{APIRef("Fetch")}}</div> + +<p>El constructor <code><strong>Response()</strong></code> crea un nuevo objeto {{domxref("Response")}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">var <var>miRespuesta</var> = new Response(<var>cuerpo</var>,<em>opciones</em>);</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><em>cuerpo</em> {{optional_inline}}</dt> + <dd>Un objeto que define el cuerpo de la respuesta. Puede ser <code>null</code>, o uno de los siguientes elementos: + <ul> + <li>{{domxref("Blob")}}</li> + <li>{{domxref("BufferSource")}}</li> + <li>{{domxref("FormData")}}</li> + <li>{{domxref("ReadableStream")}}</li> + <li>{{domxref("URLSearchParams")}}</li> + <li>{{domxref("USVString")}}</li> + </ul> + </dd> + <dt><em>opciones</em> {{optional_inline}}</dt> + <dd>Un objeto que contiene las opciones de personalización para la respuesta HTTP. Las opciones posibles son: + <ul> + <li><code>status</code>: El código de estado HTTP, p.e.: <code>200</code>.</li> + <li><code>statusText</code>: El mensaje de estado asociado con el código de estado HTTP, p.e.: <code>OK</code>.</li> + <li><code>headers</code>: Cualquier cabecera que quieras añadir a la respuesta. Puede ser un objeto {{domxref("Headers")}} o un objeto literal de {{domxref("ByteString")}} pares claves/valor (ver <a href="/en-US/docs/Web/HTTP/Headers">Cabeceras HTTP</a> para más información).</li> + </ul> + </dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>En nuestro <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-response">ejemplo Fetch Response</a> (ver <a href="http://mdn.github.io/fetch-examples/fetch-response/">Fetch Response live</a>) creamos un nuevo objeto <code>Response</code> usando el constructor, pasándole un nuevo objeto {{domxref("Blob")}} como cuerpo, y un objeto con <code>status</code> y<code>statusText</code> como opciones:</p> + +<pre class="brush: js">var miBlob = new Blob(); +var opciones = { "status" : 200 , "statusText" : "Flipante!" }; +var miRespuesta = new Response(miBlob,opciones);</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + <tr> + <td>{{SpecName('Fetch','#dom-response','Response()')}}</td> + <td>{{Spec2('Fetch')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<div class="hidden">La tabla de compatibilidad de esta página está generada a partir de datos estructurados. Si deseas contribuir a los datos, por favor échale un vistazo a <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos un pull request.</div> + +<p>{{Compat("api.Response.Response")}}</p> + +<h2 id="Relacionado">Relacionado</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> + <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> + <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> +</ul> diff --git a/files/es/web/api/response/status/index.html b/files/es/web/api/response/status/index.html new file mode 100644 index 0000000000..eecaf02967 --- /dev/null +++ b/files/es/web/api/response/status/index.html @@ -0,0 +1,73 @@ +--- +title: Response.status +slug: Web/API/Response/status +tags: + - API + - Experimental + - Fetch + - Property + - Reference + - Response + - status +translation_of: Web/API/Response/status +--- +<div>{{APIRef("Fetch")}}</div> + +<p>La propiedad de solo lectura <strong><code>status</code></strong> de la interfaz {{domxref("Response")}} contiene el código de estado de la respuesta (ejm., <code>200</code> para un éxito).</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">var <var>myStatus</var> = <var>response</var>.status;</pre> + +<h3 id="Valor">Valor</h3> + +<p>Un número (para ser preciso, uno corto sin signo).</p> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>En nuestro <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-response">ejemplo Fetch Response</a> (ver <a href="http://mdn.github.io/fetch-examples/fetch-response/">Fetch Response en vivo</a>) nosotros creamos un nuevo objeto {{domxref("Request")}} usando el constructor {{domxref("Request.Request","Request()")}}, pasándole una ruta JPG. Luego buscamos esta solicitud usando {{domxref("GlobalFetch.fetch","fetch()")}}, extraemos un blob de la respuesta usando {{domxref("Body.blob")}}, creamos un objeto URL fuera de ella usando {{domxref("URL.createObjectURL")}}, y mostramos esto en un {{htmlelement("img")}}.</p> + +<p>Tenga en cuenta que en la parte superior del bloque <code>fetch()</code> registramos el valor de la respuesta <code>status</code> en la consola.</p> + +<pre class="brush: js">var myImage = document.querySelector('img'); + +var myRequest = new Request('flowers.jpg'); + +fetch(myRequest).then(function(response) { + console.log(response.status); // returns 200 + response.blob().then(function(myBlob) { + var objectURL = URL.createObjectURL(myBlob); + myImage.src = objectURL; + }); +});</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('Fetch','#dom-response-status','status')}}</td> + <td>{{Spec2('Fetch')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<div class="hidden">La tabla de compatibilidad en esta página se genera a partir de datos estructurados. Si desea contribuir a los datos, consulte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos una solicitud de extracción.</div> + +<p>{{Compat("api.Response.status")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/ServiceWorker_API">API de Servicio Worker</a></li> + <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">Control de acceso HTTP (CORS)</a></li> + <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> +</ul> |
