把 callback hell 改成比較易讀的 async/await 寫法

這邊要特別注意的不是 typescript 語法一類的，而是我先改了程式。這次我的目標是在功能不變的前提下改變寫法，所以測試是不能先動的。測試不變，那不管怎麼改，只要測試能過，理論上功能就不會有變化。當然這前提是該測的通通要測到啦w
Ronmi · Aug 2, 2016 · 1814d1f · 1814d1f
1 parent b89e166
commit 1814d1f
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 120 deletions.
diff --git a/ui/src/API.ts b/ui/src/API.ts
@@ -11,35 +11,21 @@ export interface API {
 
 export default API;
 
-function post<T>(url: string, data: any): Promise<T> {
-    return new Promise<T>(function(res, rej) {
-        fetch(url, {
-            method: "POST",
-            headers: {
-                "Content-Type": "text/plain",
-                "Accept": "application/json, text/plain",
-            },
-            body: JSON.stringify(data),
-        }).then(
-            function(r: Response) {
-                if (r.status >= 400) {
-                    rej(r.status + " " + r.statusText);
-                }
-
-                r.json<T>().then(
-                    function(data: T) {
-                        res(data);
-                    },
-                    function() {
-                        rej("Not JSON format");
-                    }
-                );
-            },
-            function() {
-                rej("Connection error");
-            }
-            );
+async function post<T>(url: string, data: any): Promise<T> {
+    let r = await fetch(url, {
+        method: "POST",
+        headers: {
+            "Content-Type": "text/plain",
+            "Accept": "application/json, text/plain",
+        },
+        body: JSON.stringify(data),
     });
+
+    if (r.status >= 400) {
+        throw r.status + " " + r.statusText;
+    }
+
+    return await r.json<T>();
 }
 
 export class ByFetch implements API {
@@ -49,56 +35,19 @@ export class ByFetch implements API {
         this.token = "";
     }
 
-    Auth(pin: string): Promise<void> {
-        return new Promise<void>((resolve, reject) => {
-            post<string>("/api/auth", { pin: pin }).then(
-                (token: string) => {
-                    this.token = token;
-                    resolve();
-                },
-                (msg: string) => {
-                    reject();
-                }
-            );
-        });
+    async Auth(pin: string): Promise<void> {
+        this.token = await post<string>("/api/auth", { pin: pin });
     }
 
-    Add(data: OrderData): Promise<void> {
-        return new Promise<void>((resolve, reject) => {
-            post("/api/add", { data: data, token: this.token }).then(
-                () => {
-                    resolve();
-                },
-                () => {
-                    reject();
-                }
-            );
-        });
+    async Add(data: OrderData): Promise<void> {
+        await post("/api/add", { data: data, token: this.token });
     }
 
-    List(code: string): Promise<OrderData[]> {
-        return new Promise<OrderData[]>((resolve, reject) => {
-            post("/api/list", { code: code, token: this.token }).then(
-                (data: OrderData[]) => {
-                    resolve(data);
-                },
-                () => {
-                    reject();
-                }
-            );
-        });
+    async List(code: string): Promise<OrderData[]> {
+        return await post<OrderData[]>("/api/list", { code: code, token: this.token });
     }
 
-    ListAll(): Promise<OrderData[]> {
-        return new Promise<OrderData[]>((resolve, reject) => {
-            post("/api/listall", { token: this.token }).then(
-                (data: OrderData[]) => {
-                    resolve(data);
-                },
-                () => {
-                    reject();
-                }
-            );
-        });
+    async ListAll(): Promise<OrderData[]> {
+        return await post<OrderData[]>("/api/listall", { token: this.token });
     }
 };
diff --git a/ui/src/App.tsx b/ui/src/App.tsx
@@ -32,35 +32,31 @@ export default class App extends React.Component<Props, State> {
     }
 
     // custom event handlers, returns promise so we can test on it
-    submitPincode = (pin: string): Promise<void> => {
-        return new Promise<void>((res, rej) => {
-            this.props.api.Auth(pin).then(
-                () => {
-                    this.setState({ authed: true });
-                    this.codeSelected(this.state.code).then(() => { res(); }, () => { res(); });
-                },
-                () => {
-                    this.props.alert("認證失敗");
-                    rej();
-                }
-            );
-        });
+    submitPincode = async (pin: string): Promise<void> => {
+        try {
+	    await this.props.api.Auth(pin);
+            this.setState({ authed: true });
+	    try {
+		await this.codeSelected(this.state.code);
+	    } catch (e) {
+	    }
+	} catch (e) {
+            this.props.alert("認證失敗");
+	    throw e;
+        }
     }
-    submitOrder = (order: OrderData): Promise<void> => {
+    submitOrder = async (order: OrderData): Promise<void> => {
         let data = this.state.data.slice(0);
         this.addOrder(order)
-        return new Promise<void>((res, rej) => {
-            this.props.api.Add(order).then(
-                () => { res(); },
-                () => {
-                    this.setState({ data: data });
-                    rej();
-                }
-            );
-        });
+        try {
+	    await this.props.api.Add(order);
+	} catch (e) {
+            this.setState({ data: data });
+	    throw e;
+        }
     }
-    codeSelected = (code: string): Promise<void> => {
-        return this.getOrderList(code);
+    codeSelected = async (code: string): Promise<void> => {
+        return await this.getOrderList(code);
     }
 
     // helper methods
@@ -74,33 +70,19 @@ export default class App extends React.Component<Props, State> {
         data.sort(sorter);
         this.setState({ data: data });
     }
-    getOrderList(code: string): Promise<void> {
+    async getOrderList(code: string): Promise<void> {
         if (code == translate(code)) {
             return this.getAllOrderList();
         }
 
-        return new Promise<void>((res, rej) => {
-            this.props.api.List(code).then(
-                (data: OrderData[]) => {
-                    data.sort(sorter);
-                    this.setState({ code: code, data: data });
-                    res();
-                },
-                () => { rej(); }
-            );
-        });
+        let data = await this.props.api.List(code);
+        data.sort(sorter);
+        this.setState({ code: code, data: data });
     }
-    getAllOrderList(): Promise<void> {
-        return new Promise<void>((res, rej) => {
-            this.props.api.ListAll().then(
-                (data: OrderData[]) => {
-                    data.sort(sorter);
-                    this.setState({ code: "", data: data });
-                    res();
-                },
-                () => { rej(); }
-            );
-        });
+    async getAllOrderList(): Promise<void> {
+        let data = await this.props.api.ListAll();
+        data.sort(sorter);
+        this.setState({ code: "", data: data });
     }
 
     handlePinFormatError = () => {