diff --git a/5-network/01-fetch/01-fetch-users/_js.view/source.js b/5-network/01-fetch/01-fetch-users/_js.view/source.js
index 0c62e7bb5..4a5d2bbe1 100644
--- a/5-network/01-fetch/01-fetch-users/_js.view/source.js
+++ b/5-network/01-fetch/01-fetch-users/_js.view/source.js
@@ -1,4 +1,4 @@
async function getUsers(names) {
- /* your code */
+ /* twój kod */
}
diff --git a/5-network/01-fetch/01-fetch-users/_js.view/test.js b/5-network/01-fetch/01-fetch-users/_js.view/test.js
index 95eaf876e..f32a5d4b3 100644
--- a/5-network/01-fetch/01-fetch-users/_js.view/test.js
+++ b/5-network/01-fetch/01-fetch-users/_js.view/test.js
@@ -1,7 +1,7 @@
describe("getUsers", function() {
- it("gets users from GitHub", async function() {
- let users = await getUsers(['iliakan', 'remy', 'no.such.users']);
+ it("pobiera użytkowników GitHuba", async function() {
+ let users = await getUsers(['iliakan', 'remy', 'nieistniejący.użytkownik']);
assert.equal(users[0].login, 'iliakan');
assert.equal(users[1].login, 'remy');
assert.equal(users[2], null);
diff --git a/5-network/01-fetch/01-fetch-users/solution.md b/5-network/01-fetch/01-fetch-users/solution.md
index b8dfb62a2..369e34fbe 100644
--- a/5-network/01-fetch/01-fetch-users/solution.md
+++ b/5-network/01-fetch/01-fetch-users/solution.md
@@ -1,11 +1,11 @@
-To fetch a user we need: `fetch('https://api.github.com/users/USERNAME')`.
+Do pobrania użytkownika wykorzystamy: `fetch('https://api.github.com/users/USERNAME')`.
-If the response has status `200`, call `.json()` to read the JS object.
+Jeżeli odpowiedź zostanie zwrócona ze statusem `200`, wywołamy metodę `.json()`, aby móc odczytać javascriptowy obiekt.
-Otherwise, if a `fetch` fails, or the response has non-200 status, we just return `null` in the resulting arrray.
+Jeżeli natomiast `fetch` się nie powiedzie lub status odpowiedzi będzie inny niz 200, wówczas w tablicy wynikowej zwracamy po prostu `null`.
-So here's the code:
+Kod wygląda następująco:
```js demo
async function getUsers(names) {
@@ -33,8 +33,8 @@ async function getUsers(names) {
}
```
-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.
+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()`.
-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.
+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.
-That's an example of how low-level Promise API can still be useful even if we mainly use `async/await`.
+Jest to przykład tego, jak przydatne może być niskopoziomowe Promise API, nawet jeżeli głównie korzystamy z `async/await`.
diff --git a/5-network/01-fetch/01-fetch-users/task.md b/5-network/01-fetch/01-fetch-users/task.md
index 4605b4955..862ef551e 100644
--- a/5-network/01-fetch/01-fetch-users/task.md
+++ b/5-network/01-fetch/01-fetch-users/task.md
@@ -1,13 +1,13 @@
-# Fetch users from GitHub
+# Pobierz użytkowników z GitHuba
-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.
+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.
-The GitHub url with user information for the given `USERNAME` is: `https://api.github.com/users/USERNAME`.
+Informacje o użytkowniku przypisanym do `USERNAME`, znajdują się pod adresem: `https://api.github.com/users/USERNAME`.
-There's a test example in the sandbox.
+W naszym środowisku izolowanym znajduje się przykład testowy.
-Important details:
+Ważne informacje:
-1. There should be one `fetch` request per user.
-2. Requests shouldn't wait for each other. So that the data arrives as soon as possible.
-3. If any request fails, or if there's no such user, the function should return `null` in the resulting array.
+1. Można wykonać tylko jedno żądanie `fetch` o dane użytkownika.
+2. Żądania nie powinny na siebie oczekiwać. Chodzi o to, aby dane dotarły jak najszybciej.
+3. Jeżeli żądanie się nie powiedzie lub nie będzie użytkownika o podanej nazwie, funkcja powinna zwrócić `null` w tablicy wynikowej.
diff --git a/5-network/01-fetch/article.md b/5-network/01-fetch/article.md
index 1170042e0..32eb82358 100644
--- a/5-network/01-fetch/article.md
+++ b/5-network/01-fetch/article.md
@@ -1,87 +1,87 @@
# Fetch
-JavaScript can send network requests to the server and load new information whenever is needed.
+Ilekroć jest to potrzebne, JavaScript potrafi wykonywać żądania sieciowe do serwera i pobierać nowe informacje.
-For example, we can use a network request to:
+Można na przykład użyć żądania sieciowego do:
-- Submit an order,
-- Load user information,
-- Receive latest updates from the server,
-- ...etc.
+- złożenia zamówienia,
+- wyświetlenia informacji o użytkowniku,
+- otrzymania najnowszych aktualizacji z serwera,
+- ...itp.
-...And all of that without reloading the page!
+...I to wszystko bez przeładowania strony!
-There's an umbrella term "AJAX" (abbreviated Asynchronous JavaScript And XML) 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.
+Istnieje nadrzędny termin "AJAX" (skrót od Asynchronous JavaScript And XML) dotyczący żądań sieciowych w JavaScripcie. Nie musimy jednak używać XML-a: skrót ten pochodzi z dawnych czasów, stąd też zawiera takie właśnie słowo. Być może znasz już ten termin.
-There are multiple ways to send a network request and get information from the server.
+Istnieje wiele sposobów wysłania żądania sieciowego i pobrania informacji z serwera.
-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.
+Metoda `fetch()` jest nowoczesna i wszechstronna, dlatego od niej zaczniemy. Nie jest ona wspierana przez stare przeglądarki (można ją dodać poprzez odpowiednią łatkę - ang. *polyfill*), jest natomiast bardzo dobrze obsługiwana przez współczesne przeglądarki.
-The basic syntax is:
+Podstawowa składnia jest następująca:
```js
let promise = fetch(url, [options])
```
-- **`url`** -- the URL to access.
-- **`options`** -- optional parameters: method, headers etc.
+- **`url`** -- adres URL zapytania.
+- **`options`** -- parametry opcjonalne: metoda, nagłówki, itp.
-Without `options`, that is a simple GET request, downloading the contents of the `url`.
+Bez `options` mamy do czynienia ze zwykłym zapytaniem GET, pobierającym zawartość adresu `url`.
-The browser starts the request right away and returns a promise that the calling code should use to get the result.
+Przeglądarka natychmiast uruchamia zapytanie i zwraca obietnicę (ang. *promise*), której kod wywołujący powinien użyć do uzyskania wyniku.
-Getting a response is usually a two-stage process.
+Uzyskanie odpowiedzi jest zwykle procesem dwuetapowym.
-**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.**
+**Po pierwsze, obietnica `promise` zwrócona przez `fetch`, rozwiązuje się (ang. *resolves*) do obiektu wbudowanej klasy [Response](https://fetch.spec.whatwg.org/#response-class) , gdy tylko serwer odpowie nagłówkami.**
-At this stage we can check HTTP status, to see whether it is successful or not, check headers, but don't have the body yet.
+Na tym etapie możemy sprawdzić status żądania HTTP, aby dowiedzieć się, czy się ono powiodło, albo przejrzeć nagłówki. Nie mamy jednak jeszcze dostępu do ciała odpowiedzi.
-The promise rejects if the `fetch` was unable to make HTTP-request, e.g. network problems, or there's no such site. Abnormal HTTP-statuses, such as 404 or 500 do not cause an error.
+Obietnica jest odrzucana (ang. *rejects*), jeżeli `fetch` jest w stanie wykonać zapytania HTTP, np. ze względu na problemy sieciowe lub brak strony, do której skierowano zapytanie. Nieprawidłowe statusy HTTP, takie jak 404 lub 500, nie powodują błędu.
-We can see HTTP-status in response properties:
+Informację o statusie HTTP znajdziemy wśród właściwości odpowiedzi:
-- **`status`** -- HTTP status code, e.g. 200.
-- **`ok`** -- boolean, `true` if the HTTP status code is 200-299.
+- **`status`** -- kod odpowiedzi HTTP, np. 200.
+- **`ok`** -- typ logiczny, `true` jeżeli kod odpowiedzi HTTP jest z zakresu 200-299.
-For example:
+Przykładowo:
```js
let response = await fetch(url);
-if (response.ok) { // if HTTP-status is 200-299
- // get the response body (the method explained below)
+if (response.ok) { // jeżeli kod odpowiedzi HTTP jest z zakresu 200-299
+ // pobierz ciało odpowiedzi (wyjaśnione poniżej)
let json = await response.json();
} else {
- alert("HTTP-Error: " + response.status);
+ alert("Błąd HTTP: " + response.status);
}
```
-**Second, to get the response body, we need to use an additional method call.**
+**Po drugie, aby pobrać ciało odpowiedzi, należy wywołać kolejną metodę.**
-`Response` provides multiple promise-based methods to access the body in various formats:
+Obiekt klasy `Response` (pol. *odpowiedź*) zapewnia wiele metod bazujących na obietnicach, które pozwalają na dostęp do ciała odpowiedzi i zwrócenie go w różnych formach:
-- **`response.text()`** -- read the response and return as text,
-- **`response.json()`** -- parse the response as JSON,
-- **`response.formData()`** -- return the response as `FormData` object (explained in the [next chapter](info:formdata)),
-- **`response.blob()`** -- return the response as [Blob](info:blob) (binary data with type),
-- **`response.arrayBuffer()`** -- return the response as [ArrayBuffer](info:arraybuffer-binary-arrays) (low-level representaion of binary data),
-- additionally, `response.body` is a [ReadableStream](https://streams.spec.whatwg.org/#rs-class) object, it allows to read the body chunk-by-chunk, we'll see an example later.
+- **`response.text()`** -- odczytaj odpowiedź i zwróć jako tekst,
+- **`response.json()`** -- odczytaj odpowiedź i zwróć jako JSON,
+- **`response.formData()`** -- zwróć odpowiedź jako obiekt typu `FormData` (wyjaśnienie w [następnym rozdziale](info:formdata)),
+- **`response.blob()`** -- zwróć odpowiedź jako [Blob](info:blob) (dane binarne z typem),
+- **`response.arrayBuffer()`** -- zwróć odpowiedź jako [ArrayBuffer](info:arraybuffer-binary-arrays) (niskopoziomowa reprezentacja danych binarnych),
+- ponadto `response.body` jest sam w sobie obiektem typu [ReadableStream](https://streams.spec.whatwg.org/#rs-class), co pozwala na odczytywanie go kawałek po kawałku. Ale o tym nieco później.
-For instance, let's get a JSON-object with latest commits from GitHub:
+Pobierzmy dla przykładu obiekt JSON z ostatnimi commitami z GitHuba.
```js run async
let url = 'https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits';
let response = await fetch(url);
*!*
-let commits = await response.json(); // read response body and parse as JSON
+let commits = await response.json(); // odczytaj ciało odpowiedzi i zwróć jako JSON
*/!*
alert(commits[0].author.login);
```
-Or, the same without `await`, using pure promises syntax:
+Bądź to samo, ale bez `await`, a jedynie za pomocą czystej składni obietnic:
```js run
fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits')
@@ -89,70 +89,70 @@ fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commi
.then(commits => alert(commits[0].author.login));
```
-To get the reponse text, `await response.text()` instead of `.json()`:
+Aby pobrać odpowiedź jako tekst, użyj `await response.text()` zamiast `.json()`:
```js run async
let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits');
-let text = await response.text(); // read response body as text
+let text = await response.text(); // odczytaj ciało odpowiedzi jako tekst
alert(text.slice(0, 80) + '...');
```
-As a show-case for reading in binary format, let's fetch and show a logo image of ["fetch" specification](https://fetch.spec.whatwg.org) (see chapter [Blob](info:blob) for details about operations on `Blob`):
+Aby zaprezentować odczyt danych w formacie binarnym, pobierzmy obraz logo [specyfikacji "fetch"](https://fetch.spec.whatwg.org) (patrz rozdział [Blob](info:blob) odnośnie operacji na obiekcie `Blob`):
```js async run
let response = await fetch('/article/fetch/logo-fetch.svg');
*!*
-let blob = await response.blob(); // download as Blob object
+let blob = await response.blob(); // pobierz logo jako obiekt Blob
*/!*
-// create for it
+// stwórz dla niego znacznik
let img = document.createElement('img');
img.style = 'position:fixed;top:10px;left:10px;width:100px';
document.body.append(img);
-// show it
+// wyświetl je
img.src = URL.createObjectURL(blob);
-setTimeout(() => { // hide after three seconds
+setTimeout(() => { // ukryj po upływie trzech sekund
img.remove();
URL.revokeObjectURL(img.src);
}, 3000);
```
````warn
-We can choose only one body-reading method.
+Można wybrać tyko jedną z metod odczytywania ciała odpowiedzi.
-If we've already got the response with `response.text()`, then `response.json()` won't work, as the body content has already been processed.
+Jeśli już zdecydowaliśmy się na `response.text()`, wówczas `response.json()` nie zadziała, ponieważ zawartość ciała odpowiedzi została już wcześniej przetworzona.
```js
-let text = await response.text(); // response body consumed
-let parsed = await response.json(); // fails (already consumed)
+let text = await response.text(); // ciało odpowiedzi zostaje przetworzone
+let parsed = await response.json(); // nie powiedzie się (przetworzone wcześniej)
````
-## Response headers
+## Nagłówki odpowiedzi
-The response headers are available in a Map-like headers object in `response.headers`.
+Nagłówki odpowiedzi są dostępne w obiekcie nagłówków podobnym do obiektu Map, a konkretnie w `response.headers`.
-It's not exactly a Map, but it has similar methods to get individual headers by name or iterate over them:
+Nie jest do dokładnie Map, aczkolwiek posiada podobne metody, służące do pobrania poszczególnych nagłówków za pomocą nazwy lub poprzez iterowanie po nich:
```js run async
let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits');
-// get one header
+// pobieramy jeden nagłówek
alert(response.headers.get('Content-Type')); // application/json; charset=utf-8
-// iterate over all headers
+// iterujemy po wszystkich nagłówkach
for (let [key, value] of response.headers) {
alert(`${key} = ${value}`);
}
```
-## Request headers
+## Nagłówki żądania
-To set a request header in `fetch`, we can use the `headers` option. It has an object with outgoing headers, like this:
+Aby zdefiniować nagłówek w żądaniu `fetch`, użyjemy właściwości `headers`, która zawiera obiekt z wychodzącymi nagłówkami:
```js
let response = fetch(protectedUrl, {
@@ -162,7 +162,7 @@ let response = fetch(protectedUrl, {
});
```
-...But there's a list of [forbidden HTTP headers](https://fetch.spec.whatwg.org/#forbidden-header-name) that we can't set:
+... Istnieją również [zabronione nagłówki HTTP](https://fetch.spec.whatwg.org/#forbidden-header-name), których nie możemy ustawić:
- `Accept-Charset`, `Accept-Encoding`
- `Access-Control-Request-Headers`
@@ -185,27 +185,27 @@ let response = fetch(protectedUrl, {
- `Proxy-*`
- `Sec-*`
-These headers ensure proper and safe HTTP, so they are controlled exclusively by the browser.
+Dzięki nim protokół HTTP działa prawidłowo i jest bezpieczny, dlatego też są pod pełną kontrolą przeglądarki.
-## POST requests
+## Żądania POST
-To make a `POST` request, or a request with another method, we need to use `fetch` options:
+Do wykonania żądania z metodą `POST` lub jakąkolwiek inną musimy użyć opcji dostępnych w funkcji `fetch`:
-- **`method`** -- HTTP-method, e.g. `POST`,
-- **`body`** -- the request body, one of:
- - a string (e.g. JSON-encoded),
- - `FormData` object, to submit the data as `form/multipart`,
- - `Blob`/`BufferSource` to send binary data,
- - [URLSearchParams](info:url), to submit the data in `x-www-form-urlencoded` encoding, rarely used.
+- **`method`** -- metoda HTTP, np. `POST`,
+- **`body`** -- ciało żądania, może przyjąć formę:
+ - łańcucha znaków (np. w formacie JSON),
+ - obiektu `FormData`, aby móc przesłać dane jako `form/multipart`,
+ - `Blob`/`BufferSource`, aby przesłać dane w formie binarnej,
+ - [URLSearchParams](info:url), aby przesłać dane jako `x-www-form-urlencoded`, rzadko używane.
-The JSON format is used most of the time.
+Najczęściej używanym formatem jest JSON.
-For example, this code submits `user` object as JSON:
+Przykładowo, ten kod przesyła obiekt `user` jako JSON:
```js run async
let user = {
- name: 'John',
- surname: 'Smith'
+ name: 'Jan',
+ surname: 'Kowalski'
};
*!*
@@ -222,21 +222,21 @@ let result = await response.json();
alert(result.message);
```
-Please note, if the request `body` is a string, then `Content-Type` header is set to `text/plain;charset=UTF-8` by default.
+Należy pamiętać, że jeżeli ciało żądania (`body`) jest łańcuchem znaków, wówczas nagłówek `Content-Type` domyślnie ustawiony jest na `text/plain;charset=UTF-8`.
-But, as we're going to send JSON, we use `headers` option to send `application/json` instead, the correct `Content-Type` for JSON-encoded data.
+Ponieważ jednak zamierzamy wysłać obiekt JSON, użyjemy obiektu `headers` do ustawienia nagłówka `Content-Type` na `application/json`, czyli właściwego dla danych zakodowanych w formacie JSON.
-## Sending an image
+## Wysyłanie obrazu
-We can also submit binary data with `fetch` using `Blob` or `BufferSource` objects.
+Za pomocą `fetch` możemy także przesłać dane binarne, używając obiektów `Blob` albo `BufferSource`.
-In this example, there's a `