封装请求返回的数据及在store请求接口

Author: kuangshp

src/servers/User.ts

@@ -0,0 +1,9 @@
+import { $get } from '@/utils';
+class UserService {
+  // 获取全部的用户
+  public async getAllUser(): Promise<any> {
+    return await $get('/user?pageSize=10&pageNumber=1');
+  }
+}
+
+export default new UserService();

src/store/index.ts

@@ -3,8 +3,11 @@ import Vuex from 'vuex';
 import { viewStore } from './view';
 Vue.use(Vuex);
 
+import user from './modules/user';
+
 export default new Vuex.Store({
   modules: {
     viewStore,
+    user,
   },
 });

src/store/modules/user.ts

@@ -0,0 +1,18 @@
+import UserService from '@/servers/User';
+import { axiosResult } from '@/utils';
+
+export default {
+  namespaced: true,
+  state: {},
+  mutations: {},
+  actions: {
+    async getAllUserApi() {
+      try {
+        const { code, message, result } = await UserService.getAllUser();
+        return axiosResult(result, code, message, true);
+      } catch (e) {
+        console.error(e);
+      }
+    },
+  },
+};

src/utils/axios-result.ts

@@ -0,0 +1,34 @@
+/*
+ * @Description:封装数据请求返回的格式
+ * @Author: 水痕
+ * @Github: https://github.com/kuangshp
+ * @Email: 332904234@qq.com
+ * @Company:
+ * @Date: 2019-08-21 13:04:57
+ * @LastEditors: 水痕
+ * @LastEditTime: 2019-08-21 13:22:22
+ */
+
+/**
+ * @param result 返回数据结果
+ * @param code 返回的code
+ * @param message 返回的消息
+ * @param isObj 是否要以对象返回
+ */
+export const axiosResult = (
+  result: any,
+  code: number,
+  message: string,
+  isObj: boolean = false,
+): Promise<any> =>
+  new Promise((resolve, reject) => {
+    if (Object.is(code, 0)) {
+      if (result) {
+        isObj ? resolve({ result }) : resolve(result);
+      } else {
+        isObj ? resolve({ message }) : resolve(message);
+      }
+    } else {
+      reject(message);
+    }
+  });

src/utils/index.ts

@@ -2,4 +2,6 @@ export * from './storage';
 export * from './auth';
 export * from './set-title';
 export * from './axios-request';
+export * from './axios-method';
+export * from './axios-result';
 export * from './data-type';

src/views/demo1/demo12/demo12.vue

@@ -1,15 +1,43 @@
 <template>
   <div class="demo12">
     <h1>我是demo12页面</h1>
+    <el-button
+      type="primary"
+      @click="vuexGetUser"
+    >使用vuex方法获取全部用户</el-button>
+    <el-button
+      type="primary"
+      @click="getAllUserApi"
+    >直接获取全部用户</el-button>
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
+import { Action } from 'vuex-class';
+import axios from 'axios';
 @Component({
   components: {},
 })
-export default class Demo12 extends Vue { }
+export default class Demo12 extends Vue {
+  @Action('user/getAllUserApi') private getAllUserApi!: () => Promise<any>;
+
+  /**
+   * 直接在vue组件中使用axios请求接口
+   */
+  private async getUser() {
+    const result = await axios.get('/user?pageSize=10&pageNumber=1');
+    console.log(result);
+  }
+
+  /**
+   * 通过store统一调用接口
+   */
+  private async vuexGetUser() {
+    const { result } = await this.getAllUserApi();
+    console.log(result);
+  }
+}
 </script>
 <style lang="less">
 </style>