Rewrite data fetch using async/await. Refs PlaidWeb#25

Signed-off-by: André Jaenisch <[email protected]>

static/webmention.js

@@ -368,25 +368,20 @@ A more detailed example:
    * Fetch the stored data.
    *
    * @param {string} url
-   * @param {*} callback
+   * @returns {Promise<WebmentionResponse>}
    */
-  function getData(url, callback) {
-    window
-      .fetch(url)
-      .then(function(response) {
-        if (response.status >= 200 && response.status < 300) {
-          return Promise.resolve(response);
-        } else {
-          return Promise.reject(new Error(response.statusText));
-        }
-      })
-      .then(function(response) {
+  async function getData(url) {
+    try {
+      const response = await window.fetch(url);
+      if (response.status >= 200 && response.status < 300) {
         return response.json();
-      })
-      .then(callback)
-      .catch(function(error) {
-        console.error("Request failed", error);
-      });
+      } else {
+        return Promise.reject(new Error(response.statusText));
+      }
+    } catch(error) {
+      console.error("Request failed", error);
+      return Promise.reject(error);
+    }
   }
 
   /**
@@ -418,47 +413,48 @@ A more detailed example:
       apiURL += `&target[]=${encodeURIComponent('http:' + path)}&target[]=${encodeURIComponent('https:' + path)}`;
     });
 
-    getData(apiURL, function(/** @type {WebmentionResponse} */json) {
-      /** @type {Array<Reaction>} */
-      let comments = [];
-      /** @type {Array<Reaction>} */
-      const collects = [];
-
-      if (commentsAreReactions) {
-        comments = collects;
-      }
+    getData(apiURL)
+      .then(function(/** @type {WebmentionResponse} */json) {
+        /** @type {Array<Reaction>} */
+        let comments = [];
+        /** @type {Array<Reaction>} */
+        const collects = [];
 
-      /** @type {Record<ReactEmoji, Array<Reaction>>} */
-      const mapping = {
-        "in-reply-to": comments,
-        "like-of": collects,
-        "repost-of": collects,
-        "bookmark-of": collects,
-        "mention-of": comments,
-        "rsvp": comments
-      };
-
-      json.children.forEach(function(child) {
-        // This seem to push the reaction into either comments or collects
-        const store = mapping[child['wm-property']];
-        if (store) {
-          store.push(child);
+        if (commentsAreReactions) {
+          comments = collects;
         }
-      });
 
-      // format the comment-type things
-      let formattedComments = '';
-      if (comments.length > 0 && comments !== collects) {
-        formattedComments = formatComments(dedupe(comments));
-      }
+        /** @type {Record<ReactEmoji, Array<Reaction>>} */
+        const mapping = {
+          "in-reply-to": comments,
+          "like-of": collects,
+          "repost-of": collects,
+          "bookmark-of": collects,
+          "mention-of": comments,
+          "rsvp": comments
+        };
+
+        json.children.forEach(function(child) {
+          // This seem to push the reaction into either comments or collects
+          const store = mapping[child['wm-property']];
+          if (store) {
+            store.push(child);
+          }
+        });
+
+        // format the comment-type things
+        let formattedComments = '';
+        if (comments.length > 0 && comments !== collects) {
+          formattedComments = formatComments(dedupe(comments));
+        }
 
-      // format the other reactions
-      let reactions = '';
-      if (collects.length > 0) {
-        reactions = formatReactions(dedupe(collects));
-      }
+        // format the other reactions
+        let reactions = '';
+        if (collects.length > 0) {
+          reactions = formatReactions(dedupe(collects));
+        }
 
-      container.innerHTML = `${formattedComments}${reactions}`;
-    });
+        container.innerHTML = `${formattedComments}${reactions}`;
+      });
   });
 }());