1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
---
title: Response
slug: Web/API/Response
tags:
- API
- Experimental
- Fetch
- Fetch API
- Interface
- Reference
- Referencia
- Response
- Resposta
translation_of: Web/API/Response
---
<div>{{APIRef("Fetch API")}}</div>
<p>A interface <strong><code>Response</code></strong> da <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> representa a resposta para uma requisição.</p>
<p>Você pode criar um novo objeto <code>Response</code> usando o construtor {{domxref("Response.Response()")}}, porém é mais provável você encontrar um objeto Response sendo retornado como o resultado de uma outra operação da API, por exemplo um service worker {{domxref("Fetchevent.respondWith")}}, ou um simples {{domxref("GlobalFetch.fetch()")}}.</p>
<h2 id="Construtor">Construtor</h2>
<dl>
<dt>{{domxref("Response.Response","Response()")}}</dt>
<dd>Cria um novo objeto <code>Response</code>.</dd>
</dl>
<h2 id="Propriedades">Propriedades</h2>
<dl>
<dt>{{domxref("Response.headers")}} {{readonlyinline}}</dt>
<dd>Contém o objeto {{domxref("Headers")}} associado à resposta.</dd>
<dt>{{domxref("Response.ok")}} {{readonlyinline}}</dt>
<dd>Contém um valor booleano indicando se a resposta foi bem sucedida ("status" no intervalo 200-299) ou não.</dd>
<dt>{{domxref("Response.redirected")}} {{ReadOnlyInline}}</dt>
<dd>Indica se a resposta é ou não o resultado de um redirecionamento; isto é, sua lista de URL tem mais de uma entrada.</dd>
<dt>{{domxref("Response.status")}} {{readonlyinline}}</dt>
<dd>Contém o código de "status" da resposta (ex., <code>200</code> para um sucesso).</dd>
<dt>{{domxref("Response.statusText")}} {{readonlyinline}}</dt>
<dd>Contém a mensagem de "status" correspondente ao código de "status" (ex., <code>OK</code> para <code>200</code>).</dd>
<dt>{{domxref("Response.type")}} {{readonlyinline}}</dt>
<dd>Contém o tipo da resposta (ex., <code>basic</code>, <code>cors</code>).</dd>
<dt>{{domxref("Response.url")}} {{readonlyinline}}</dt>
<dd>Contém a URL de resposta.</dd>
<dt>{{domxref("Response.useFinalURL")}}</dt>
<dd>Contém um valor boleano indicando se essa é a URL final da resposta.</dd>
</dl>
<p><code>Response</code> implementa {{domxref("Body")}}, por isso também tem as seguintes propriedades disponíveis:</p>
<dl>
<dt>{{domxref("Body.body")}} {{readonlyInline}}</dt>
<dd>Um simples "getter" para ler do conteúdo do corpo através da interface {{domxref("ReadableStream")}}.</dd>
<dt>{{domxref("Body.bodyUsed")}} {{readonlyInline}}</dt>
<dd>Armazena um {{domxref("Boolean")}} que indica se o corpo já foi utilizado em uma resposta.</dd>
</dl>
<h2 id="Métodos">Métodos</h2>
<dl>
<dt>{{domxref("Response.clone()")}}</dt>
<dd>Cria uma cópia do objeto <code>Response</code>.</dd>
<dt>{{domxref("Response.error()")}}</dt>
<dd>Retorna um novo objeto <code>Response</code> associado a um erro de rede.</dd>
<dt>{{domxref("Response.redirect()")}}</dt>
<dd>Cria uma nova resposta com uma URL diferente.</dd>
</dl>
<p><code>Response</code> implementa {{domxref("Body")}}, por isso também tem as seguintes propriedades disponíveis:</p>
<dl>
<dt>{{domxref("Body.arrayBuffer()")}}</dt>
<dd>Recebe um "stream" {{domxref("Response")}} e lê até a conclusão. Retorna uma "promise" que resolve com um {{domxref("ArrayBuffer")}}.</dd>
<dt>{{domxref("Body.blob()")}}</dt>
<dd>Recebe um "stream" {{domxref("Response")}} e lê até a conclusão. Retorna uma "promise" que resolve com um {{domxref("Blob")}}.</dd>
<dt>{{domxref("Body.formData()")}}</dt>
<dd>Recebe um "stream" {{domxref("Response")}} e lê até a conclusão. Retorna uma "promise" que resolve com um objeto {{domxref("FormData")}}.</dd>
<dt>{{domxref("Body.json()")}}</dt>
<dd>Recebe um "stream" {{domxref("Response")}} e lê até a conclusão. Retorna uma "promise" que resolve com o resultado do parseamento do texto do corpo como {{jsxref("JSON")}}.</dd>
<dt>{{domxref("Body.text()")}}</dt>
<dd>Recebe um "stream" {{domxref("Response")}} e lê até a conclusão. Retorna uma "promise" que resolve com um {{domxref("USVString")}} (texto).</dd>
</dl>
<h2 id="Exemplos">Exemplos</h2>
<p>Em nosso <a href="https://github.com/mdn/fetch-examples/tree/master/basic-fetch">exemplo básico fetch</a> (<a href="http://mdn.github.io/fetch-examples/basic-fetch/">executar exemplo live</a>) nós usamos uma simples chamada <code>fetch()</code> para pegar uma imagem e exibi-la em uma tag {{htmlelement("img")}}. A chamada <code>fetch()</code> retorna uma "promise", que resolve com o objeto <code>Response</code> associado com o recurso da operação "fetch". Você irá notar que como estamos solicitando uma imagem, nós precisamos executar {{domxref("Body.blob")}} ({{domxref("Response")}} implementa o "body") para dar à resposta seu tipo MIME correto.</p>
<pre class="brush: js">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>Você também pode usar o construtor {{domxref("Response.Response()")}} para criar seu objeto <code>Response</code> personalizado:</p>
<pre class="brush: js">var myResponse = new Response();</pre>
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Especificação</th>
<th scope="col">Status</th>
<th scope="col">Comentário</th>
</tr>
<tr>
<td>{{SpecName('Fetch','#response-class','Response')}}</td>
<td>{{Spec2('Fetch')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidade_entre_Navegadores">Compatibilidade entre Navegadores</h2>
<p>{{Compat("api.Response")}}</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>
|
