Refactor the backend ( Api resources )

Author: Pure-Peace

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-cli-electron-template",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

src/backend.js

@@ -0,0 +1,3 @@
+import resources from './resources'
+
+export default resources

src/backend/index.js

@@ -0,0 +1,40 @@
+import axios from 'axios'
+
+// Full config:  https://github.com/axios/axios#request-config
+/* axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';
+axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
+axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; */
+
+const config = {
+  /* baseURL: process.env.baseURL || process.env.apiUrl || ""
+  timeout: 60 * 1000, // Timeout
+  withCredentials: true, // Check cross-site Access-Control
+  headers: { 'Content-Type': 'application/json' } */
+}
+
+const $axios = axios.create(config)
+
+$axios.interceptors.request.use(
+  function (config) {
+    // Do something before request is sent
+    return config
+  },
+  function (error) {
+    // Do something with request error
+    return Promise.reject(error)
+  }
+)
+
+// Add a response interceptor
+$axios.interceptors.response.use(
+  function (response) {
+    // Do something with response data
+    return response
+  },
+  function (error) {
+    // Do something with response error
+    return Promise.reject(error)
+  }
+)
+
+export default $axios

src/backend/requester.js

@@ -0,0 +1,12 @@
+import axios from '../requester'
+
+// Api resources here
+export default {
+  // Async await
+  async demoGetV1 () {
+    return (await axios.get('http://example.com/')).data
+  },
+  demoPostV1 () {
+    return axios.post('http://example.com/').then(response => response.data)
+  }
+}

src/backend/resources/api_v1.js

@@ -0,0 +1,12 @@
+import axios from '../requester'
+
+// Api resources here
+export default {
+  // Async await
+  async demoGetV2 () {
+    return (await axios.get('http://example.com/')).data
+  },
+  demoPostV2 () {
+    return axios.post('http://example.com/').then(response => response.data)
+  }
+}

src/backend/resources/api_v2.js

@@ -0,0 +1,12 @@
+import axios from '../requester'
+
+// Api resources here
+export default {
+  // Async await
+  async publicGet () {
+    return (await axios.get('http://example.com/')).data
+  },
+  publicPost () {
+    return axios.post('http://example.com/').then(response => response.data)
+  }
+}

src/backend/resources/common.js

@@ -0,0 +1,9 @@
+import apiV1 from './api_v1'
+import apiV2 from './api_v2'
+import common from './common'
+
+export default {
+  apiV1,
+  apiV2,
+  ...common // Deconstruction
+}

src/backend/resources/index.js

@@ -15,15 +15,19 @@
     <h2>Author: PurePeace</h2>
     <h2
       style="cursor: pointer; color: #FFF;"
-      @click="()=>{const {shell} = require('electron'); shell.openExternal(link)}"
+      @click="
+        () => {
+          const { shell } = require('electron')
+          shell.openExternal(link)
+        }
+      "
     >
       Github: <span style="user-select: text;">{{ link }}</span>
     </h2>
   </div>
 </template>
 
 <script>
-
 export default {
   data () {
     return {
@@ -32,17 +36,13 @@ export default {
     }
   },
   methods: {
-    sendRequest () {
+    // Async request
+    async sendRequest () {
+      console.log(this.$backend)
       this.buttonText = 'requestDemo.requesting'
-      this.$backend.demoGet(
-        // 参数 / parameter
-      ).then(res => {
-        console.log(res)
-        this.buttonText = 'requestDemo.requestSuccess'
-      }).catch(error => {
-        console.log(error)
-        this.buttonText = 'requestDemo.requestFail'
-      })
+      const res = await this.$backend.apiV2.demoGetV2()
+      this.buttonText = 'requestDemo.requestSuccess'
+      console.log(res)
     }
   }
 }