3-2 axios 封装 & 数据获取

.eslintrc.js

@@ -14,6 +14,7 @@ module.exports = {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'space-before-function-paren': 0,
-    'indent': 0
+    'indent': 0,
+    'object-curly-spacing': 0
   }
 }

package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.19.2",
     "core-js": "^3.6.5",
     "cube-ui": "~1.12.15",
     "vue": "^2.6.11"

src/App.vue

@@ -1,18 +1,35 @@
 <template>
   <div id="app">
-    <v-header></v-header>
+    <v-header :seller="seller"></v-header>
   </div>
 </template>
 
 <script>
-import VHeader from "./components/v-header/v-header";
+  import VHeader from './components/v-header/v-header'
+  import {getSeller} from 'api'
 
-export default {
-  name: 'App',
-  components: {
-    VHeader
+  export default {
+    name: 'App',
+    data() {
+      return {
+        seller: {}
+      }
+    },
+    created() {
+      this._getSeller()
+    },
+    methods: {
+      _getSeller() {
+        getSeller().then((seller) => {
+          // 由于用 axios 封装了一遍，这里一定可以拿到数据
+          this.seller = seller
+        })
+      }
+    },
+    components: {
+      VHeader
+    }
   }
-}
 </script>
 
 <style lang="stylus">

src/api/helpers.js

@@ -0,0 +1,17 @@
+import axios from 'axios'
+
+const ERR_OK = 0
+
+export function get(url) {
+  return function (params) {
+    return axios.get(url, {
+      params
+    }).then((res) => {
+      const {errno, data} = res.data
+      if (errno === ERR_OK) {
+        return data
+      }
+    }).catch(() => {
+    })
+  }
+}

src/api/index.js

@@ -0,0 +1,7 @@
+import { get } from './helpers'
+
+const getSeller = get('/api/seller')
+
+export {
+  getSeller
+}

vue.config.js

@@ -51,5 +51,6 @@ module.exports = {
     config.resolve.alias
       .set('components', resolve('src/components'))
       .set('common', resolve('src/common'))
+      .set('api', resolve('src/api'))
   }
 }