refine code

Author: PanJiaChen

mock/article.js

@@ -48,8 +48,11 @@ export default [
       const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))
 
       return {
-        total: mockList.length,
-        items: pageList
+        code: '20000',
+        data: {
+          total: mockList.length,
+          items: pageList
+        }
       }
     }
   },
@@ -61,7 +64,10 @@ export default [
       const { id } = config.query
       for (const article of List) {
         if (article.id === +id) {
-          return article
+          return {
+            code: '20000',
+            data: article
+          }
         }
       }
     }
@@ -71,12 +77,16 @@ export default [
     url: '/article/pv',
     type: 'get',
     response: _ => {
-      return { pvData: [
-        { key: 'PC', pv: 1024 },
-        { key: 'mobile', pv: 1024 },
-        { key: 'ios', pv: 1024 },
-        { key: 'android', pv: 1024 }
-      ]
+      return {
+        code: '20000',
+        data: {
+          pvData: [
+            { key: 'PC', pv: 1024 },
+            { key: 'mobile', pv: 1024 },
+            { key: 'ios', pv: 1024 },
+            { key: 'android', pv: 1024 }
+          ]
+        }
       }
     }
   },
@@ -86,6 +96,7 @@ export default [
     type: 'post',
     response: _ => {
       return {
+        code: '20000',
         data: 'success'
       }
     }
@@ -96,6 +107,7 @@ export default [
     type: 'post',
     response: _ => {
       return {
+        code: '20000',
         data: 'success'
       }
     }

mock/remoteSearch.js

@@ -21,7 +21,10 @@ export default [
         const lowerCaseName = item.name.toLowerCase()
         return !(name && lowerCaseName.indexOf(name.toLowerCase()) < 0)
       })
-      return { items: mockNameList }
+      return {
+        code: '20000',
+        data: { items: mockNameList }
+      }
     }
   },
 
@@ -31,14 +34,17 @@ export default [
     type: 'get',
     response: _ => {
       return {
-        total: 20,
-        'items|20': [{
-          order_no: '@guid()',
-          timestamp: +Mock.Random.date('T'),
-          username: '@name()',
-          price: '@float(1000, 15000, 0, 2)',
-          'status|1': ['success', 'pending']
-        }]
+        code: '20000',
+        data: {
+          total: 20,
+          'items|20': [{
+            order_no: '@guid()',
+            timestamp: +Mock.Random.date('T'),
+            username: '@name()',
+            price: '@float(1000, 15000, 0, 2)',
+            'status|1': ['success', 'pending']
+          }]
+        }
       }
     }
   }

mock/user.js

@@ -30,7 +30,10 @@ export default [
     type: 'post',
     response: config => {
       const { username } = config.body
-      return tokens[username]
+      return {
+        code: '20000',
+        data: tokens[username]
+      }
     }
   },
 
@@ -40,7 +43,10 @@ export default [
     type: 'get',
     response: config => {
       const { token } = config.query
-      return users[token]
+      return {
+        code: '20000',
+        data: users[token]
+      }
     }
   },
 
@@ -50,6 +56,7 @@ export default [
     type: 'post',
     response: _ => {
       return {
+        code: '20000',
         data: 'success'
       }
     }

src/layout/components/Navbar.vue

@@ -77,10 +77,10 @@ export default {
     toggleSideBar() {
       this.$store.dispatch('toggleSideBar')
     },
-    logout() {
-      this.$store.dispatch('Logout').then(() => {
-        location.reload()// In order to re-instantiate the vue-router object to avoid bugs
-      })
+    async logout() {
+      await this.$store.dispatch('Logout')
+      // In order to re-instantiate the vue-router object to avoid bugs
+      location.reload()
     }
   }
 }

src/store/modules/user.js

@@ -36,7 +36,7 @@ const user = {
         login({ username: username.trim(), password: password }).then(response => {
           const { data } = response
           commit('SET_TOKEN', data.token)
-          setToken(response.data.token)
+          setToken(data.token)
           resolve()
         }).catch(error => {
           reject(error)
@@ -54,17 +54,17 @@ const user = {
             reject('Verification failed, please Login again.')
           }
 
-          const { roles } = data
+          const { roles, name, avatar, introduction } = data
 
           // roles must be a non-empty array
           if (!roles || roles.length <= 0) {
             reject('getInfo: roles must be a non-null array!')
           }
 
-          commit('SET_ROLES', data.roles)
-          commit('SET_NAME', data.name)
-          commit('SET_AVATAR', data.avatar)
-          commit('SET_INTRODUCTION', data.introduction)
+          commit('SET_ROLES', roles)
+          commit('SET_NAME', name)
+          commit('SET_AVATAR', avatar)
+          commit('SET_INTRODUCTION', introduction)
           resolve(data)
         }).catch(error => {
           reject(error)

src/utils/request.js

@@ -29,7 +29,11 @@ service.interceptors.request.use(
 
 // response interceptor
 service.interceptors.response.use(
-  response => response,
+  /**
+   * If you want to get information such as headers or status
+   * Please return  response => response
+  */
+  response => response.data,
   /**
    * 下面的注释为通过在response里，自定义code来标示请求状态
    * 当code返回如下情况则说明权限有问题，登出并返回到登录页

src/views/table/dragTable.vue

@@ -96,17 +96,16 @@ export default {
     this.getList()
   },
   methods: {
-    getList() {
+    async getList() {
       this.listLoading = true
-      fetchList(this.listQuery).then(response => {
-        this.list = response.data.items
-        this.total = response.data.total
-        this.listLoading = false
-        this.oldList = this.list.map(v => v.id)
-        this.newList = this.oldList.slice()
-        this.$nextTick(() => {
-          this.setSort()
-        })
+      const { data } = await fetchList(this.listQuery)
+      this.list = data.items
+      this.total = data.total
+      this.listLoading = false
+      this.oldList = this.list.map(v => v.id)
+      this.newList = this.oldList.slice()
+      this.$nextTick(() => {
+        this.setSort()
       })
     },
     setSort() {

src/views/table/inlineEditTable.vue

@@ -88,17 +88,16 @@ export default {
     this.getList()
   },
   methods: {
-    getList() {
+    async getList() {
       this.listLoading = true
-      fetchList(this.listQuery).then(response => {
-        const items = response.data.items
-        this.list = items.map(v => {
-          this.$set(v, 'edit', false) // https://vuejs.org/v2/guide/reactivity.html
-          v.originalTitle = v.title //  will be used when user click the cancel botton
-          return v
-        })
-        this.listLoading = false
+      const { data } = await fetchList(this.listQuery)
+      const items = data.items
+      this.list = items.map(v => {
+        this.$set(v, 'edit', false) // https://vuejs.org/v2/guide/reactivity.html
+        v.originalTitle = v.title //  will be used when user click the cancel botton
+        return v
       })
+      this.listLoading = false
     },
     cancelEdit(row) {
       row.title = row.originalTitle

src/views/zip/index.vue

@@ -53,12 +53,11 @@ export default {
     this.fetchData()
   },
   methods: {
-    fetchData() {
+    async fetchData() {
       this.listLoading = true
-      fetchList().then(response => {
-        this.list = response.data.items
-        this.listLoading = false
-      })
+      const { data } = await fetchList()
+      this.list = data.items
+      this.listLoading = false
     },
     handleDownload() {
       this.downloadLoading = true