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/01-fetch-users/solution.md
+7-7
Original file line number
Diff line number
Diff line change
@@ -1,11 +1,11 @@
1
1
2
-
To fetch a user we need: `fetch('https://api.github.com/users/USERNAME')`.
2
+
Do pobrania użytkownika wykorzystamy: `fetch('https://api.github.com/users/USERNAME')`.
3
3
4
-
If the response has status `200`, call `.json()` to read the JS object.
4
+
Jeżeli odpowiedź zostanie zwrócona ze statusem `200`, wywołamy metodę `.json()`, aby móc odczytać javascriptowy obiekt.
5
5
6
-
Otherwise, if a `fetch`fails, or the response has non-200 status, we just return `null` in the resulting arrray.
6
+
Jeżeli natomiast `fetch`się nie powiedzie lub status odpowiedzi będzie inny niz 200, wówczas w tablicy wynikowej zwracamy po prostu `null`.
7
7
8
-
So here's the code:
8
+
Kod wygląda następująco:
9
9
10
10
```js demo
11
11
asyncfunctiongetUsers(names) {
@@ -33,8 +33,8 @@ async function getUsers(names) {
33
33
}
34
34
```
35
35
36
-
Please note: `.then`call is attached directly to `fetch`, so that when we have the response, it doesn't wait for other fetches, but starts to read `.json()` immediately.
36
+
Zauważ, że metoda `.then`jest dołączona bezpośrednio do `fetch`, więc nie czeka ona na kolejne żądania, lecz jak tylko otrzyma odpowiedź, natychmiast odczytuje ją przy użyciu metody `.json()`.
37
37
38
-
If we used`await Promise.all(names.map(name => fetch(...)))`, and call `.json()`on the results, then it would wait for all fetches to respond. By adding `.json()`directly to each `fetch`, we ensure that individual fetches start reading data as JSON without waiting for each other.
38
+
Gdybyśmy jednak użyli`await Promise.all(names.map(name => fetch(...)))` i wywołali metodę `.json()`dopiero na rezultacie, wówczas musiałaby ona czekać, aż wszystkie żądania zwrócą swoje odpowiedzi. Dołączając `.json()`bezpośrednio do każdego zapytania `fetch` możemy być pewni, że pojedyncze zapytania zaczną odczytywać dane jako JSON, bez czekania nawzajem na siebie.
39
39
40
-
That's an example of how low-level Promise API can still be useful even if we mainly use`async/await`.
40
+
Jest to przykład tego, jak przydatne może być niskopoziomowe Promise API, nawet jeżeli głównie korzystamy z`async/await`.
Create an async function `getUsers(names)`, that gets an array of GitHub logins, fetches the users from GitHub and returns an array of GitHub users.
3
+
Stwórz asynchroniczną funkcję `getUsers(names)`, która otrzymuje tablicę z loginami do GitHuba, a następnie zwraca tablicę z odpowiadającymi im użytkownikami.
4
4
5
-
The GitHub url with user information for the given `USERNAME` is: `https://api.github.com/users/USERNAME`.
5
+
Informacje o użytkowniku przypisanym do `USERNAME`, znajdują się pod adresem: `https://api.github.com/users/USERNAME`.
6
6
7
-
There's a test example in the sandbox.
7
+
W naszym środowisku izolowanym znajduje się przykład testowy.
8
8
9
-
Important details:
9
+
Ważne informacje:
10
10
11
-
1.There should be one `fetch`request per user.
12
-
2.Requests shouldn't wait for each other. So that the data arrives as soon as possible.
13
-
3.If any request fails, or if there's no such user, the function should return `null`in the resulting array.
11
+
1.Można wykonać tylko jedno żądanie `fetch`o dane użytkownika.
12
+
2.Żądania nie powinny na siebie oczekiwać. Chodzi o to, aby dane dotarły jak najszybciej.
13
+
3.Jeżeli żądanie się nie powiedzie lub nie będzie użytkownika o podanej nazwie, funkcja powinna zwrócić `null`w tablicy wynikowej.
This chapter is about sending HTML forms: with or without files, with additional fields and so on.
4
+
W niniejszym rozdziale omówimy wysyłkę formularzy HTML: z plikami lub bez, z dodatkowymi polami i tak dalej.
5
5
6
-
[FormData](https://xhr.spec.whatwg.org/#interface-formdata) objects can help with that. As you might have guessed, it's the object to represent HTML form data.
6
+
Pomoże nam w tym obiekt [FormData](https://xhr.spec.whatwg.org/#interface-formdata). Jak zapewne się domyślasz, jest to obiekt reprezentujący dane formularza HTML.
7
7
8
-
The constructor is:
8
+
Konstruktor wygląda następująco:
9
9
```js
10
10
let formData =newFormData([form]);
11
11
```
12
12
13
-
If HTML `form` element is provided, it automatically captures its fields.
13
+
Przechwyci on automatycznie wszystkie pola formularza HTML na stronie.
14
14
15
-
The special thing about `FormData`is that network methods, such as `fetch`, can accept a`FormData`object as a body. It's encoded and sent out with`Content-Type: form/multipart`.
15
+
`FormData`posiada tę szczególną cechę, że metody sieciowe takie jak `fetch` mogą przyjmować obiekt`FormData`jako ciało. Jest on wówczas kodowany i wysyłany jako`Content-Type: form/multipart`.
16
16
17
-
From the server point of view, that looks like a usual form submission.
17
+
Z perspektywy serwera wygląda to jak zwykłe przesłanie formularza.
18
18
19
-
## Sending a simple form
19
+
## Wysyłanie prostego formularza
20
20
21
-
Let's send a simple form first.
21
+
Na początek wyślijmy prosty formularz.
22
22
23
-
As you can see, that's almost one-liner:
23
+
Jak widać, to niemal jedna linijka:
24
24
25
25
```html run autorun
26
26
<formid="formElem">
27
-
<inputtype="text"name="name"value="John">
28
-
<inputtype="text"name="surname"value="Smith">
27
+
<inputtype="text"name="name"value="Jan">
28
+
<inputtype="text"name="surname"value="Kowalski">
29
29
<inputtype="submit">
30
30
</form>
31
31
@@ -47,48 +47,48 @@ As you can see, that's almost one-liner:
47
47
</script>
48
48
```
49
49
50
-
In this example, the server code is not presented, as it's beyound our scope. The server accepts the POST request and replies "User saved".
50
+
Kod serwera jest poza naszym zakresem zainteresowania, zatem nie pokazujemy go w tym przykładzie. W każdym razie serwer akceptuje żądanie POST i odpowiada komunikatem: "Użytkownik zapisany".
51
51
52
-
## FormData Methods
52
+
## Metody FormData
53
53
54
-
We can modify fields in `FormData`with methods:
54
+
Pola w `FormData`możemy zmieniać następującymi metodami:
55
55
56
-
-`formData.append(name, value)` - add a form field with the given `name`and`value`,
57
-
-`formData.append(name, blob, fileName)` - add a field as if it were `<input type="file">`, the third argument `fileName`sets file name (not form field name), as it it were a name of the file in user's filesystem,
58
-
-`formData.delete(name)` - remove the field with the given`name`,
59
-
-`formData.get(name)` - get the value of the field with the given`name`,
60
-
-`formData.has(name)` - if there exists a field with the given `name`, returns`true`, otherwise`false`
56
+
-`formData.append(name, value)` - dodaj pole formularza o nazwie `name`i wartości`value`,
57
+
-`formData.append(name, blob, fileName)` - dodaj pole tak jakby było znacznikiem `<input type="file">`; trzeci argument `fileName`ustawia nazwę pliku (nie nazwę formularza), tak jakby była nazwą pliku w systemie plików użytkownika,
58
+
-`formData.delete(name)` - usuń pole`name`,
59
+
-`formData.get(name)` - pobierz wartość pola`name`,
60
+
-`formData.has(name)` - jeżeli istnieje pole `name`, zwróć`true`; w innym przypadku zwróć`false`
61
61
62
-
A form is technically allowed to have many fields with the same `name`, so multiple calls to `append`add more same-named fields.
62
+
Formularz, z technicznego punktu widzenia, może mieć pól o nazwie `name`, tak więc wiele wywołań metody `append`doda wiele pól o tej samej nazwie.
63
63
64
-
There's also method`set`, with the same syntax as `append`. The difference is that `.set`removes all fields with the given `name`, and then appends a new field. So it makes sure there's only field with such `name`, the rest is just like`append`:
64
+
Istnieje również metoda`set`, która ma taką samą składnię jak `append`. Różnica polega na tym, że `.set`usuwa wszystkie pola o nazwie `name`, a następnie dodaje nowe pole. Dzięki temu zapewnia, że istnieje tylko jedno pole o nazwie `name`. Pozostała część wygląda jak w metodzie`append`:
65
65
66
66
-`formData.set(name, value)`,
67
67
-`formData.set(name, blob, fileName)`.
68
68
69
-
Also we can iterate over formData fields using`for..of` loop:
69
+
Możemy również iterować po polach `formData`, używając pętli`for..of`:
70
70
71
71
```js run
72
72
let formData =newFormData();
73
73
formData.append('key1', 'value1');
74
74
formData.append('key2', 'value2');
75
75
76
-
//List key/value pairs
76
+
//Wylicz pary klucz/wartość
77
77
for(let [name, value] of formData) {
78
-
alert(`${name} = ${value}`); // key1=value1, then key2=value2
78
+
alert(`${name}=${value}`); // key1=value1 oraz key2=value2
79
79
}
80
80
```
81
81
82
-
## Sending a form with a file
82
+
## Wysyłanie formularza z plikiem
83
83
84
-
The form is always sent as `Content-Type: form/multipart`, this encoding allows to send files. So, `<input type="file">`fields are sent also, similar to a usual form submission.
84
+
Formularz jest zawsze wysyłany jako `Content-Type: form/multipart`, gdyż takie kodowanie pozwala na wysyłkę plików. Tak więc pola `<input type="file">`są również wysyłane, podobnie jak ma to miejsce w zwykłym przesłaniu formularza.
@@ -110,21 +110,21 @@ Here's an example with such form:
110
110
</script>
111
111
```
112
112
113
-
## Sending a form with Blob data
113
+
## Wysyłanie formularza z danymi typu Blob
114
114
115
-
As we've seen in the chapter <info:fetch>, it's easy to send dynamically generated binary data e.g. an image, as `Blob`. We can supply it directly as `fetch` parameter `body`.
115
+
W rozdziale pt. "<info:fetch>" widzieliśmy, że wysyłka dynamicznie generowanych danych binarnych, np. obrazu jako `Blob`, jest dość prosta. Możemy go umieścić jako parametr `body` funkcji `fetch`.
116
116
117
-
In practice though, it's often convenient to send an image not separately, but as a part of the form, with additional fields, such as "name" and other metadata.
117
+
W praktyce jednak często wygodniej jest wysłać obraz nie osobno, ale jako część formularza, z dodatkowymi polami, takimi jak "nazwa” i inne metadane.
118
118
119
-
Also, servers are usually more suited to accept multipart-encoded forms, rather than raw binary data.
119
+
Ponadto serwery są zwykle lepiej przystosowane do akceptowania formularzy zakodowanych w postaci wieloczęściowej (ang. *multipart*) niż surowych danych binarnych.
120
120
121
-
This example submits an image from `<canvas>`, along with some other fields, as a form, using`FormData`:
121
+
W tym przykładzie wysyłamy w formularzu obraz ze znacznika `<canvas>` wraz z innymi polami, używając do tego`FormData`:
@@ -138,7 +138,7 @@ This example submits an image from `<canvas>`, along with some other fields, as
138
138
139
139
*!*
140
140
let formData =newFormData();
141
-
formData.append("firstName", "John");
141
+
formData.append("firstName", "Jan");
142
142
formData.append("image", imageBlob, "image.png");
143
143
*/!*
144
144
@@ -154,36 +154,36 @@ This example submits an image from `<canvas>`, along with some other fields, as
154
154
</body>
155
155
```
156
156
157
-
Please note how the image `Blob` is added:
157
+
Zwróć uwagę, w jaki sposób dodawany jest obraz jako `Blob`:
158
158
159
159
```js
160
-
formData.append("image", imageBlob, "image.png");
160
+
formData.append("image", imageBlob, "obraz.png");
161
161
```
162
162
163
-
That's same as if there were `<input type="file" name="image">` in the form, and the visitor submitted a file named `"image.png"` (3rd argument) with the data `imageBlob` (2nd argument) from their filesystem.
163
+
To tak, jakby w formularzu był znacznik `<input type="file" name="image">`, a użytkownik załadował z systemu plików plik o nazwie `"obraz.png"` (trzeci argument) jako `imageBlob` (drugi argument).
164
164
165
-
The server reads form data and the file, as if it were a regular form submission.
165
+
Serwer odczytuje dane formularza i plik, tak jakby było to zwykłe przesyłanie formularza.
166
166
167
-
## Summary
167
+
## Podsumowanie
168
168
169
-
[FormData](https://xhr.spec.whatwg.org/#interface-formdata)objects are used to capture HTML form and submit it using`fetch`or another network method.
169
+
Obiekty klasy [FormData](https://xhr.spec.whatwg.org/#interface-formdata)służą do przechwycenia formularza HTML i przesłania go za pomocą`fetch`lub innej funkcji sieciowej.
170
170
171
-
We can either create `new FormData(form)`from an HTML form, or create a object without a form at all, and then append fields with methods:
171
+
Możemy albo utworzyć `new FormData(form)`na podstawie formularza HTML, albo stworzyć obiekt bez formularza, a następnie dołączyć do niego pola metodami:
172
172
173
173
-`formData.append(name, value)`
174
174
-`formData.append(name, blob, fileName)`
175
175
-`formData.set(name, value)`
176
176
-`formData.set(name, blob, fileName)`
177
177
178
-
Let's note two peculiarities here:
178
+
Zwróćmy uwagę na dwie osobliwości:
179
179
180
-
1.The`set`method removes fields with the same name, `append`doesn't. That's the only difference between them.
181
-
2.To send a file, 3-argument syntax is needed, the last argument is a file name, that normally is taken from user filesystem for`<input type="file">`.
180
+
1.Metoda`set`usuwa zduplikowane pola o tej samej nazwie, a `append`nie. To jedynia różnica między nimi.
181
+
2.Aby wysłać plik, potrzebna jest trójargumentowa składnia, gdzie ostatnim argumentem jest nazwa pliku, zwykle pobierana z systemu plików na potrzeby`<input type="file">`.
0 commit comments