[wook] step 13-1 미션 제출합니다! (#74)

* init snow pc에서 작업하던 파일을 제가 다시 clone해서 구현하여 commit이 남아있지 않게 되었습니다 ㅠㅠ * feat: myPromise class 생성후 cb함수 실행 구현 constructor 에서 cb를 실행하도록 하였다. cb가 MyPromise.resolve와 MyPromise.reject를 인자로 받도록하였다. * feat: then 의 콜백함수의 인자처리 구현 콜백함수의 인자를 외부에서 받아서 처리하는것이 아니므로 내부의 this.value를 인자로 넣어주어 Promise객체가 인자로 들어가도록 처리하였다. * feat: then 함수가 Promise가 fulfilled되었을때 실행되도록 구현 then은 내부에서 cb가 상태가 변했을때 실행되도록한다. 따라서 resolve에서 상태를 바꾸고, then을 한번 더 호출해야한다. 이에따라 then의 콜백함수를 변수로 기억하도록 하였다. (변수가 하나 더 생겨서 살짝 지저분한것같다) * refactor: then 함수의 if문 변경 fast-return 을 사용해 2뎁스를 예방 * feat: then에서 기존의 Promise 객체를 수정하여 구현 1. this.callback를 this.callbackQueue로 변경 2. executeThensCallback 함수를 생성 이 함수는 등록된 콜백함수를 실행하고 promise 객체의 value를 변경하고 콜백큐를 수정하며 resolve에서 실행된다. 3. 하나의 promise에서 실행되므로 resolve에서 while문을 통해 콜백큐에 등록된 콜백들을 실행한다. 4. 그러나 이런 방식은 Promise생성시 pending이 resolve로 바뀌면 나머지 Promise는 자동으로 resolve상태로 담아있게된다. * feat: json 파일 출력하기 구현
code-squad · Jul 4, 2019 · 86403fa · 86403fa
1 parent a9e21f9
commit 86403fa
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 0 deletions.
diff --git a/Fetch/fetchData.js b/Fetch/fetchData.js
@@ -0,0 +1,4 @@
+fetch("./localData.json")
+.then((response)=>{
+    return response.json();
+}).then((data)=>{console.log(data)})
diff --git a/Fetch/index.html b/Fetch/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+</head>
+<body>
+    <script src="fetchData.js"></script>
+</body>
+</html>
diff --git a/Fetch/localData.json b/Fetch/localData.json
@@ -0,0 +1,22 @@
+[
+    {
+      "title": "FREE delivery, as fast as today",
+      "desc": "Fast, free and convenient ways to get millions of items, from unlimited Two-Day Shipping to Same-Day and 2-Hour Delivery in select areas",
+      "imgAdress": "../images/Card_A01.png"
+    },
+    {
+      "title": "Exclusive Deals Just for you",
+      "desc": "Get exclusive access to deals and discounts before anyone else with 30-minute early access to Lightning Deals",
+      "imgAdress": "../images/Card_B01.png"
+    },
+    {
+      "title": "Award-Winning Movies & TV Shows",
+      "desc": "Watch what you love with award-winning Amazon Originals, movies and TV shows, included in your membership.",
+      "imgAdress": "../src/images/Card_C01.png"
+    },
+    {
+      "title": "Over two million songs, ad free",
+      "desc": "Get access to an exclusive library of songs from Amazon Music without any ads.",
+      "imgAdress": "../src/images/Card_D01.png"
+    }
+]
diff --git a/myPromise/myPromise.js b/myPromise/myPromise.js
@@ -0,0 +1,52 @@
+class MyPromise {
+    constructor(cb) {
+        this.state = 'pending';
+        this.value = undefined;
+        this.thensCallbackQueue = [];
+        cb(this.resolve.bind(this), this.reject.bind(this));
+    }
+
+    resolve(value) {
+        this.value = value;
+        this.state = 'fulfilled';
+        // MyPromise 를 then마다 만들지 않고 한번에 처리하려다 보니 발생한 현상.. 
+        while(this.thensCallbackQueue.length !== 0){
+            const currentCallback = this.thensCallbackQueue[0];
+            this.excuteThensCallback(currentCallback);
+        }
+    }
+
+    reject(value) {}
+
+    then(cb){
+        if(!this.thensCallbackQueue.includes(cb)) {
+            this.thensCallbackQueue.push(cb);
+            return this;
+        }
+    }
+
+    excuteThensCallback(cb) {
+        const fetchedValue = cb(this.value);
+        this.value = fetchedValue;
+        this.thensCallbackQueue.shift();
+    }
+}
+const myFirstPromise = new MyPromise((MyResolve, MyReject) => {
+    setTimeout(() => {
+        MyResolve({ "name": "Success!", "id": 123123 });
+    }, 1000);
+})
+myFirstPromise.then((successMessage) => {
+    return successMessage.name;
+}).then((data) => {
+    console.log(`data is ${data}`);
+    return data
+  }).then((data2) => {
+      console.log(`data2 인 ${data2}를 잘 받았습니다.`);
+      return data2
+  }).then((data3) => { 
+      console.log(`data3 is ${data3}`);
+  })
+
+
+