Update network requests group

5-network/01-fetch/01-fetch-users/_js.view/solution.js

@@ -0,0 +1,24 @@
+
+async function getUsers(names) {
+  let jobs = [];
+
+  for(let name of names) {
+    let job = fetch(`https://api.github.com/users/${name}`).then(
+      successResponse => {
+        if (successResponse.status != 200) {
+          return null;
+        } else {
+          return successResponse.json();
+        }
+      },
+      failResponse => {
+        return null;
+      }
+    );
+    jobs.push(job);
+  }
+
+  let results = await Promise.all(jobs);
+
+  return results;
+}

5-network/01-fetch/01-fetch-users/_js.view/source.js

@@ -0,0 +1,4 @@
+
+async function getUsers(names) {
+  /* your code */
+}

5-network/01-fetch/01-fetch-users/_js.view/test.js

@@ -0,0 +1,10 @@
+describe("getUsers", function() {
+
+  it("gets users from GitHub", async function() {
+    let users = await getUsers(['iliakan', 'remy', 'no.such.users']);
+    assert.equal(users[0].login, 'iliakan');
+    assert.equal(users[1].login, 'remy');
+    assert.equal(users[2], null);
+  });
+
+});

5-network/01-fetch/01-fetch-users/solution.md

@@ -0,0 +1,40 @@
+
+To fetch a user we need: `fetch('https://api.github.com/users/USERNAME')`.
+
+If the response has status `200`, call `.json()` to read the JS object.
+
+Otherwise, if a `fetch` fails, or the response has non-200 status, we just return `null` in the resulting arrray.
+
+So here's the code:
+
+```js demo
+async function getUsers(names) {
+  let jobs = [];
+
+  for(let name of names) {
+    let job = fetch(`https://api.github.com/users/${name}`).then(
+      successResponse => {
+        if (successResponse.status != 200) {
+          return null;
+        } else {
+          return successResponse.json();
+        }
+      },
+      failResponse => {
+        return null;
+      }
+    );
+    jobs.push(job);
+  }
+
+  let results = await Promise.all(jobs);
+
+  return results;
+}
+```
+
+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.
+
+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.
+
+That's an example of how low-level Promise API can still be useful even if we mainly use `async/await`.

5-network/01-fetch/01-fetch-users/task.md

@@ -0,0 +1,13 @@
+# Fetch users from GitHub
+
+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.
+
+The GitHub url with user information for the given `USERNAME` is: `https://api.github.com/users/USERNAME`.
+
+There's a test example in the sandbox.
+
+Important details:
+
+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.