chore(lit): fetch data, extract function to create task in a separate…

… file (#279)

Co-authored-by: Giuseppe Piscopo <[email protected]>

content/7-webapp-features/2-fetch-data/lit/fetch-users-task.js

@@ -0,0 +1,14 @@
+import { Task } from "@lit/task";
+
+export function createFetchUsersTask(element) {
+  return new Task(element, {
+    task: async () => {
+      const response = await fetch("https://randomuser.me/api/?results=3");
+      if (!response.ok) {
+        throw new Error(response.status);
+      }
+      return response.json();
+    },
+    args: () => [],
+  });
+}

content/7-webapp-features/2-fetch-data/lit/x-app.js

@@ -1,19 +1,10 @@
-import { Task } from "@lit/task";
 import { LitElement, html } from "lit";
 import { customElement } from "lit/decorators.js";
+import { createFetchUsersTask } from "./fetch-users-task";
 
 @customElement("x-app")
 export class XApp extends LitElement {
-  fetchUsers = new Task(this, {
-    task: async () => {
-      const response = await fetch("https://randomuser.me/api/?results=3");
-      if (!response.ok) {
-        throw new Error(response.status);
-      }
-      return response.json();
-    },
-    args: () => [],
-  });
+  fetchUsers = createFetchUsersTask(this);
 
   render() {
     return this.fetchUsers.render({