You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 5-network/01-fetch/article.md
+46-1Lines changed: 46 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,11 @@
1
1
2
2
# Fetch
3
3
4
+
<<<<<<< HEAD
4
5
JavaScript può inviare richieste di rete al server e caricare nuove informazioni ogni volta che è necessario.
6
+
=======
7
+
JavaScript can send network requests to the server and load new information whenever it's needed.
8
+
>>>>>>> 872cc6adedac4ff3ebec73916bf435f1d72f2864
5
9
6
10
Per esempio, possiamo usare le richieste di rete per:
7
11
@@ -12,11 +16,19 @@ Per esempio, possiamo usare le richieste di rete per:
12
16
13
17
...e tutto senza alcun ricaricamento della pagina!
14
18
19
+
<<<<<<< HEAD
15
20
Ti sarà capitato di ascoltare o leggere il termine "AJAX" (acronimo di <b>A</b>synchronous <b>J</b>avaScript <b>A</b>nd <b>X</b>ML) che è comunemente utilizzato per accomunare (sotto un'unica effige) le richieste di rete in JavaScript. Non è però necessario usare XML: il termine proviene da un retaggio del passato ed è per questo che fa parte dell'abbreviazione.
21
+
=======
22
+
There's an umbrella term "AJAX" (abbreviated <b>A</b>synchronous <b>J</b>avaScript <b>A</b>nd <b>X</b>ML) for network requests from JavaScript. We don't have to use XML though: the term comes from old times, that's why that word is there. You may have heard that term already.
23
+
>>>>>>> 872cc6adedac4ff3ebec73916bf435f1d72f2864
16
24
17
25
Ci sono molti modi per inviare richieste di rete per richiedere informazioni dal server.
18
26
27
+
<<<<<<< HEAD
19
28
Il metodo `fetch()` è tra tutti il più moderno e versatile, e per questo inizieremo ad analizzare proprio questo. Questo metodo non è supportato dai browser più datati (ma è possibile risolvere con dei polyfills), ma lo è ampiamente tra quelli recenti.
29
+
=======
30
+
The `fetch()` method is modern and versatile, so we'll start with it. It's not supported by old browsers (can be polyfilled), but very well supported among the modern ones.
31
+
>>>>>>> 872cc6adedac4ff3ebec73916bf435f1d72f2864
20
32
21
33
La sintassi base è:
22
34
@@ -27,11 +39,21 @@ let promise = fetch(url, [options])
27
39
-**`url`** -- l'URL da raggiungere.
28
40
-**`options`** -- parametri opzionali: metodi, headers etc.
29
41
42
+
<<<<<<< HEAD
30
43
Il browser avvia immediatamente la richiesta, il cui risultato sarà utilizzato e gestito per mezzo di una promise.
44
+
=======
45
+
Without `options`, that is a simple GET request, downloading the contents of the `url`.
46
+
47
+
The browser starts the request right away and returns a promise that the calling code should use to get the result.
48
+
>>>>>>> 872cc6adedac4ff3ebec73916bf435f1d72f2864
31
49
32
50
Ottenere una risposta è comunemente un processo che si svolge in due fasi.
33
51
52
+
<<<<<<< HEAD
34
53
**Prima fase: la `promise` viene risolta con un oggetto (object) di classe built-in [Response](https://fetch.spec.whatwg.org/#response-class) non appena il server risponde con gli headers.**
54
+
=======
55
+
**First, the `promise`, returned by `fetch`, resolves with an object of the built-in [Response](https://fetch.spec.whatwg.org/#response-class) class as soon as the server responds with headers.**
56
+
>>>>>>> 872cc6adedac4ff3ebec73916bf435f1d72f2864
35
57
36
58
In questa fase possiamo controllare lo status HTTP, per vedere se la richiesta ha avuto successo o meno, controllare le intestazioni, ma non abbiamo ancora il body.
37
59
@@ -59,12 +81,21 @@ if (response.ok) { // se l'HTTP-status è 200-299
59
81
60
82
`Response` fornisce molteplici metodi promise-based per accedere al body in svariati formati:
61
83
62
-
-**`response.text()`** -- legge la risposta e ritorna un testo,
84
+
<<<<<<< HEAD
85
+
-**`response.text()`** -- legge il la risposta e ritorna un testo,
63
86
-**`response.json()`** -- interpreta e ritorna la risposta come un JSON,
64
87
-**`response.formData()`** -- ritorna la risposta come un oggetto (object) `FormData` (spiegato nel [prossimo capitolo](info:formdata)),
65
88
-**`response.blob()`** -- ritorna la risposta come [Blob](info:blob) (binary data con type),
66
89
-**`response.arrayBuffer()`** -- ritorna la risposta come [ArrayBuffer](info:arraybuffer-binary-arrays) (rappresentazione low-level di binary data),
67
90
- inoltre, `response.body` è un oggetto (object) [ReadableStream](https://streams.spec.whatwg.org/#rs-class), che consente di leggere il body "pezzo per pezzo" (chunk-by-chunk), come vedremo dopo in un esempio.
91
+
=======
92
+
-**`response.text()`** -- read the response and return as text,
93
+
-**`response.json()`** -- parse the response as JSON,
94
+
-**`response.formData()`** -- return the response as `FormData` object (explained in the [next chapter](info:formdata)),
95
+
-**`response.blob()`** -- return the response as [Blob](info:blob) (binary data with type),
96
+
-**`response.arrayBuffer()`** -- return the response as [ArrayBuffer](info:arraybuffer-binary-arrays) (low-level representation of binary data),
97
+
- additionally, `response.body` is a [ReadableStream](https://streams.spec.whatwg.org/#rs-class) object, it allows you to read the body chunk-by-chunk, we'll see an example later.
98
+
>>>>>>> 872cc6adedac4ff3ebec73916bf435f1d72f2864
68
99
69
100
Ad esempio, otteniamo un oggetto (object) JSON con gli ultimi commit da GitHub:
Per ottenere il testo della risposta, `await response.text()` invece del `.json()`:
123
+
=======
124
+
To get the response text, `await response.text()` instead of `.json()`:
125
+
>>>>>>> 872cc6adedac4ff3ebec73916bf435f1d72f2864
91
126
92
127
```js run async
93
128
let response =awaitfetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits');
@@ -126,8 +161,14 @@ Possiamo solo scegliere un metodo di lettura del body.
126
161
Se per esempio abbiamo già prelevato il response con `response.text()`, successivamente `response.json()` non funzionerà, dato che il body sarà stato già processato.
127
162
128
163
```js
164
+
<<<<<<< HEAD
129
165
let text = await response.text(); // elaborazione del response body
130
166
let parsed = await response.json(); // fallisce (già elaborato)
167
+
=======
168
+
let text = await response.text(); // response body consumed
169
+
let parsed = await response.json(); // fails (already consumed)
170
+
```
171
+
>>>>>>> 872cc6adedac4ff3ebec73916bf435f1d72f2864
131
172
````
132
173
133
174
## Headers della risposta (o response headers)
@@ -227,7 +268,11 @@ Se stiamo invece inviando un JSON, usiamo `application/json` come `Content-Type`
227
268
228
269
Possiamo anche inviare binary data con `fetch` usando oggetti `Blob` o `BufferSource`.
229
270
271
+
<<<<<<< HEAD
230
272
In questo esempio, c'è un `<canvas>` sul quale possiamo disegnare spostarci sopra con il mouse. Al clic sul bottone "Invia" invieremo l'immagine al server:
273
+
=======
274
+
In this example, there's a `<canvas>` where we can draw by moving a mouse over it. A click on the "submit" button sends the image to the server:
0 commit comments