diff options
Diffstat (limited to 'files/pt-br/web/api/request/index.html')
| -rw-r--r-- | files/pt-br/web/api/request/index.html | 167 |
1 files changed, 167 insertions, 0 deletions
diff --git a/files/pt-br/web/api/request/index.html b/files/pt-br/web/api/request/index.html new file mode 100644 index 0000000000..3c29999829 --- /dev/null +++ b/files/pt-br/web/api/request/index.html @@ -0,0 +1,167 @@ +--- +title: Request +slug: Web/API/Request +tags: + - API + - Experimental + - Fetch + - Fetch API + - Requisições + - request +translation_of: Web/API/Request +--- +<div>{{APIRef("Fetch")}}</div> + +<p>A interface <strong><code>Request</code></strong> da <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> representa uma requisição de recursos.</p> + +<p>Você pode criar um novo objeto <code>Request</code> usando o construtor {{domxref("Request.Request()")}}, porém é mais provável que você encontre um objeto <code>Request</code> que seja retornado como resultado de outra operação de API, como um service worker {{domxref("FetchEvent.request")}}.</p> + +<h2 id="Construtor">Construtor</h2> + +<dl> + <dt>{{domxref("Request.Request()")}}</dt> + <dd>Cria um novo objeto <code>Request</code>.</dd> +</dl> + +<h2 id="Propriedades">Propriedades</h2> + +<dl> + <dt>{{domxref("Request.method")}} {{readonlyInline}}</dt> + <dd>Contém o método da requisição (<code>GET</code>, <code>POST</code> etc.)</dd> + <dt>{{domxref("Request.url")}} {{readonlyInline}}</dt> + <dd>Contém a URL da requisição.</dd> + <dt>{{domxref("Request.headers")}} {{readonlyInline}}</dt> + <dd>Contém o objeto {{domxref("Headers")}} associado à requisição.</dd> + <dt>{{domxref("Request.context")}} {{readonlyInline}} {{deprecated_inline()}}</dt> + <dd>Contém o contexto da requisição (ex., <code>audio</code>, <code>image</code>, <code>iframe</code> etc.)</dd> + <dt>{{domxref("Request.referrer")}} {{readonlyInline}}</dt> + <dd>Contém a referência da requisição (ex., <code>client</code>).</dd> + <dt>{{domxref("Request.referrerPolicy")}} {{readonlyInline}}</dt> + <dd>Contém a política de referência da requisição (ex., <code>no-referrer</code>).</dd> + <dt>{{domxref("Request.mode")}} {{readonlyInline}}</dt> + <dd>Contém o modo da requisição (ex., <code>cors</code>, <code>no-cors</code>, <code>same-origin</code>, <code>navigate</code>.)</dd> + <dt>{{domxref("Request.credentials")}} {{readonlyInline}}</dt> + <dd>Contém a credencial da requisição (Ex., <code>omit</code>, <code>same-origin</code>, <code>include</code>).</dd> + <dt>{{domxref("Request.redirect")}} {{readonlyinline}}</dt> + <dd>Contém o modo de como os redirecionamentos serão tratados. Pode ser: <code>follow</code>, <code>error</code> ou <code>manual</code>.</dd> + <dt>{{domxref("Request.integrity")}} {{readonlyInline}}</dt> + <dd>Contém o valor da <a href="/en-US/docs/Web/Security/Subresource_Integrity">subresource integrity</a> da requisição (ex., <code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>).</dd> + <dt>{{domxref("Request.cache")}} {{readonlyInline}}</dt> + <dd>Contém o modo de cache da requisição (ex., <code>default</code>, <code>reload</code>, <code>no-cache</code>).</dd> +</dl> + +<p><code>Request</code> implementa {{domxref("Body")}}, então também possui as seguintes propriedades disponíveis:</p> + +<dl> + <dt>{{domxref("Body.body")}} {{readonlyInline}}</dt> + <dd>Um simples "getter" para ler o conteúdo do corpo através da interface {{domxref("ReadableStream")}}.</dd> + <dt>{{domxref("Body.bodyUsed")}} {{readonlyInline}}</dt> + <dd>Armazena um {{domxref("Boolean", "Booleano")}} que declara se o corpo da requisição já foi utilizado em uma resposta.</dd> +</dl> + +<h2 id="Métodos">Métodos</h2> + +<dl> + <dt>{{domxref("Request.clone()")}}</dt> + <dd>Cria uma cópia atual do objeto <code>Request</code>.</dd> +</dl> + +<p><code>Request</code> implementa {{domxref("Body")}}, então também possui os seguintes métodos disponíveis:</p> + +<dl> + <dt>{{domxref("Body.arrayBuffer()")}}</dt> + <dd>Retorna um objeto do tipo promise que resolve um {{domxref("ArrayBuffer")}} com a representação do corpo da requisição.</dd> + <dt>{{domxref("Body.blob()")}}</dt> + <dd>Retorna um objeto do tipo promise que resolve um {{domxref("Blob")}} com a representação do corpo da requisição.</dd> + <dt>{{domxref("Body.formData()")}}</dt> + <dd>Retorna um objeto do tipo promise que resolve um {{domxref("FormData")}} com a representação do corpo da requisição.</dd> + <dt>{{domxref("Body.json()")}}</dt> + <dd>Retorna um objeto do tipo promise que resolve um {{domxref("JSON")}} com a representação do corpo da requisição.</dd> + <dt>{{domxref("Body.text()")}}</dt> + <dd>Retorna um objeto do tipo promise que resolve um {{domxref("USVString")}} (texto) com a representação do corpo da requisição.</dd> +</dl> + +<div class="note"> +<p><strong>Nota</strong>: Os métodos de {{domxref("Body")}} só poderão ser executadas apenas uma vez; As chamadas subsequentes serão resolvidas com strings/ArrayBuffers vazias.</p> +</div> + +<h2 id="Exemplos">Exemplos</h2> + +<p>No exemplo a seguir, nós criamos uma nova requisição utilizando o construtor <code>Request()</code> (para um arquivo de imagem no mesmo diretório do código) e, em seguida, nos retorna alguns valores das propriedades da requisição:</p> + +<pre class="brush: js">const myRequest = new Request('http://localhost/flowers.jpg'); + +const myURL = myRequest.url; // http://localhost/flowers.jpg +const myMethod = myRequest.method; // GET +const myCred = myRequest.credentials; // omit +</pre> + +<p>Você poderá, então, solicitar uma nova requisição passando o objeto <code>Request</code> como parâmetro para a chamada {{domxref("GlobalFetch.fetch()")}}, por exemplo:</p> + +<pre class="brush: js">fetch(myRequest) + .then(response => response.blob()) + .then(blob => { + myImage.src = URL.createObjectURL(blob); + });</pre> + +<p>No exemplo a seguir, nós criamos uma nova requisição utilizando o construtor <code>Request()</code> com alguns valores iniciais e contendo o corpo para APIs que precisam processar essas informações:</p> + +<pre class="brush: js">const myRequest = new Request('http://localhost/api', {method: 'POST', body: '{"foo":"bar"}'}); + +const myURL = myRequest.url; // http://localhost/api +const myMethod = myRequest.method; // POST +const myCred = myRequest.credentials; // omit +const bodyUsed = myRequest.bodyUsed; // true +</pre> + +<div class="note"> +<p><strong>Nota:</strong> O tipo do corpo poderá ser apenas: {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("USVString")}} ou {{domxref("ReadableStream")}}. Para adicionar um objeto JSON ao corpo, é necessário converter esse objeto para string.</p> +</div> + +<p>Você poderá, então, solicitar uma nova requisição passando o objeto <code>Request</code> como parâmetro para a chamada {{domxref("GlobalFetch.fetch()")}}, por exemplo, e poderá capturar a resposta da seguinte forma:</p> + +<pre class="brush: js">fetch(myRequest) + .then(response => { + if (response.status === 200) { + return response.json(); + } else { + throw new Error('Ops! Houve um erro em nosso servidor.'); + } + }) + .then(response => { + console.debug(response); + // ... + }).catch(error => { + console.error(error); + });</pre> + +<h2 id="Especificações">Especificações</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','#request-class','Request')}}</td> + <td>{{Spec2('Fetch')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_entres_navegadores">Compatibilidade entres navegadores</h2> + + + +<p>{{Compat("api.Request")}}</p> + +<h2 id="Veja_também">Veja também</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> |