Change vue-resource to axios

vue-resource has some issue on handling json data without http header. See #16, but it doesn't related syntex error handling.
rishubil · Sep 6, 2017 · 0df2a67 · 0df2a67
1 parent d95c107
commit 0df2a67
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 153 deletions.
diff --git a/source/package.json b/source/package.json
@@ -11,13 +11,13 @@
     "lint": "eslint --ext .js,.vue src"
   },
   "dependencies": {
+    "axios": "^0.16.2",
     "clipboard": "^1.7.1",
     "hangul-js": "^0.2.4",
     "lodash": "^4.17.4",
     "spectre.css": "^0.2.14",
     "vue": "^2.3.3",
     "vue-lazyload": "^1.0.6",
-    "vue-resource": "^1.3.4",
     "vue-router": "^2.6.0",
     "vue2-animate": "^1.0.4"
   },

diff --git a/source/src/components/chat/Chat.vue b/source/src/components/chat/Chat.vue
@@ -6,6 +6,7 @@
 
 <script>
   import _ from 'lodash';
+  import axios from 'axios';
 
   const TWITCH_EMOTE_URL_TEMPLATE = 'https://static-cdn.jtvnw.net/emoticons/v1/{image_id}/3.0';
 
@@ -106,37 +107,41 @@
           if (url === '') {
             url = 'https://rishubil.github.io/jsassist-open-dccon/static/dccon_list.json';
           }
+
           // eslint-disable-next-line
           addChatMessage('system', 'SYSTEM', '디시콘 목록을 불러오는 중..');
-          t.$http.get(url, {responseType: 'json'}).then((response) => {
-            try {
-              t.dccons = _(response.body.dccons)
-                .flatMap(v => _(v.keywords).map(o => [o, v]).value())
-                .fromPairs()
-                .value();
-              t.dcconKeywords = _(t.dccons)
-                .keys()
-                .sortBy()
-                .reverse()
-                .value();
-              // eslint-disable-next-line
-              addChatMessage('system', 'SYSTEM', '디시콘 목록 불러오기 완료.');
-            } catch (e) {
+
+          axios.get(url)
+            .then((response) => {
+              try {
+                t.dccons = _(response.data.dccons)
+                  .flatMap(v => _(v.keywords).map(o => [o, v]).value())
+                  .fromPairs()
+                  .value();
+                t.dcconKeywords = _(t.dccons)
+                  .keys()
+                  .sortBy()
+                  .reverse()
+                  .value();
+                // eslint-disable-next-line
+                addChatMessage('system', 'SYSTEM', '디시콘 목록 불러오기 완료.');
+              } catch (e) {
+                // eslint-disable-next-line
+                addChatMessage('system', 'SYSTEM', '디시콘 목록을 불러올 수 없습니다.');
+                // eslint-disable-next-line no-console
+                console.log(e);
+                // eslint-disable-next-line no-console
+                console.log(response);
+              }
+              cb();
+            })
+            .catch((error) => {
               // eslint-disable-next-line
               addChatMessage('system', 'SYSTEM', '디시콘 목록을 불러올 수 없습니다.');
               // eslint-disable-next-line no-console
-              console.log(e);
-              // eslint-disable-next-line no-console
-              console.log(response);
-            }
-            cb();
-          }, (response) => {
-            // eslint-disable-next-line
-            addChatMessage('system', 'SYSTEM', '디시콘 목록을 불러올 수 없습니다.');
-            // eslint-disable-next-line no-console
-            console.log(response);
-            cb();
-          });
+              console.log(error);
+              cb();
+            });
         }, 100);
       },
       loadTwitchEmotes() {

diff --git a/source/src/components/list/List.vue b/source/src/components/list/List.vue
@@ -27,6 +27,7 @@
 
 <script>
   import _ from 'lodash';
+  import axios from 'axios';
   import Clipboard from 'clipboard';
   import Bus from '@/bus';
   import Search from './ui/Search';
@@ -65,21 +66,25 @@
       if (url === '') {
         url = 'https://rishubil.github.io/jsassist-open-dccon/static/dccon_list.json';
       }
-      this.$http.get(url).then((response) => {
-        try {
-          this.dcconList = response.body.dccons;
-        } catch (e) {
+
+      axios.get(url)
+        .then((response) => {
+          try {
+            this.dcconList = response.data.dccons;
+          } catch (e) {
+            Bus.$emit('TOAST_MSG', '디시콘 목록을 불러올 수 없습니다.');
+            // eslint-disable-next-line no-console
+            console.log(e);
+            // eslint-disable-next-line no-console
+            console.log(response);
+          }
+        })
+        .catch((error) => {
           Bus.$emit('TOAST_MSG', '디시콘 목록을 불러올 수 없습니다.');
           // eslint-disable-next-line no-console
-          console.log(e);
-          // eslint-disable-next-line no-console
-          console.log(response);
-        }
-      }, (response) => {
-        Bus.$emit('TOAST_MSG', '디시콘 목록을 불러올 수 없습니다.');
-        // eslint-disable-next-line no-console
-        console.log(response);
-      });
+          console.log(error);
+        });
+
       // eslint-disable-next-line no-unused-vars
       const clipboard = new Clipboard('.clipboard');
     },

diff --git a/source/src/main.js b/source/src/main.js
@@ -1,11 +1,9 @@
 import Vue from 'vue';
-import VueResource from 'vue-resource';
 import VueLazyload from 'vue-lazyload';
 import App from './App';
 import router from './router';
 
 Vue.use(VueLazyload);
-Vue.use(VueResource);
 Vue.config.productionTip = false;
 
 /* eslint-disable no-new */