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
|
---
title: Fetch API
slug: Web/API/Fetch_API
tags:
- API
- Experimental
- Fetch
- Referência(2)
- XMLHttpRequest
- request
translation_of: Web/API/Fetch_API
---
<p>{{DefaultAPISidebar("Fetch API")}}{{ SeeCompatTable() }}</p>
<p><span id="result_box" lang="pt"><span>A Fetch API fornece uma interface para buscar recursos (por exemplo, em toda a rede). Parecerá familiar para qualquer pessoa que tenha usado XMLHttpRequest, porém a nova API oferece um conjunto de recursos mais poderoso e flexível.</span></span></p>
<h2 id="Conceitos_e_uso">Conceitos e uso</h2>
<p>O Fetch fornece uma definição genérica de objetos de {{domxref("Request")}} e {{domxref("Response")}} (e outras coisas envolvidas com solicitações de rede). Isso permitirá que eles sejam usados onde quer que sejam necessários no futuro, seja para service workers, Cache API e outras coisas similares que manipulam ou modifiquem pedidos e respostas ou qualquer tipo de caso de uso que possa exigir que você gere suas próprias responses programaticamente.</p>
<p>Ele também fornece uma definição para conceitos relacionados como CORS e a semântica de cabeçalho de origem HTTP, suplantando suas definições separadas em outro lugar.</p>
<p>Para fazer uma solicitação e buscar um recurso, use o método {{domxref("GlobalFetch.fetch")}} . Ele é implementado em várias interfaces, especificamente {{domxref("Window")}} e {{domxref("WorkerGlobalScope")}}. Isso torna disponível em praticamente qualquer contexto em que você possa querer obter recursos.</p>
<p>O método fetch () tem um argumento obrigatório, o caminho para o recurso que deseja obter. Ele retorna uma promessa que resolve a {{domxref("Response")}} para esta requisição, seja ele bem-sucedido ou não. Você também pode, opcionalmente, passar um objeto de opções de inicialização como o segundo argumento (consulte {{domxref("Request")}}).</p>
<p>Uma vez que uma {{domxref("Response")}} é recuperada, há uma série de métodos disponíveis para definir o conteúdo do corpo e como ele deve ser tratado (veja {{domxref("Body")}}.)</p>
<p><br>
Você pode criar um pedido e uma resposta diretamente usando os construtores {{domxref("Request.Request","Request()")}} e {{domxref("Response.Response","Response()")}}, mas é improvável que você faça isso diretamente. Em vez disso, é mais provável que sejam criados como resultados de outras ações da API (por exemplo, {{domxref("FetchEvent.respondWith")}} de service workers).</p>
<div class="note">
<p><strong>Note</strong>: Encontre mais informações sobre os recursos do Fetch API em <a href="/en-US/docs/Web/API/Fetch_API/Using_Fetch">Using Fetch</a>, e conceitos para estudos em <a href="/en-US/docs/Web/API/Fetch_API/Basic_concepts">Fetch basic concepts</a>.</p>
</div>
<h2 id="Fetch_Interfaces">Fetch Interfaces</h2>
<dl>
<dt>{{domxref("GlobalFetch")}}</dt>
<dd>Contém o método <code>fetch()</code> usado para buscar um recurso.</dd>
<dt>{{domxref("Headers")}}</dt>
<dd>Representa cabeçalhos response/request, permitindo que você os consulte e faça diferentes ações dependendo dos resultados.</dd>
<dt>{{domxref("Request")}}</dt>
<dd>Representa um pedido de recursos.</dd>
<dt>{{domxref("Response")}}</dt>
<dd>Representa a resposta de uma requisição.</dd>
</dl>
<h2 id="Fetch_mixin">Fetch mixin</h2>
<dl>
<dt>{{domxref("Body")}}</dt>
<dd>Providencia métodos relacionados ao corpo da resposta/requisição, permitindo que você declare qual seu tipo de conteúdo e como ele deve ser tratado.</dd>
</dl>
<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ários</th>
</tr>
<tr>
<td>{{SpecName('Fetch')}}</td>
<td>{{Spec2('Fetch')}}</td>
<td>Definição inicial</td>
</tr>
</tbody>
</table>
<h2 id="Navegadores_Compatíveis">Navegadores Compatíveis</h2>
<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</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>
<li><a href="https://github.com/github/fetch">Fetch polyfill</a></li>
<li><a href="/en-US/docs/Web/API/Fetch_API/Basic_concepts">Fetch basic concepts</a></li>
</ul>
|
