feat: api管理

src/api/index.js

+/**api管理页面
+ * apiMap中新增需要的api
+ *
+ * 导出的requestMap是一个对象，属性名为调用时的名称，值为实际请求方法
+ * 方法接收两个对象参数，第一个为需要传递的数据，第二个为请求的配置
+ * 第一个参数：如果为put/post/patch方法中的一种，会被转化为data属性；其余则是params
+ * 第二个参数：请求配置
+ * let xx = await this.$api.getBanner({ account: '18038018084', psw: '2' })
+ * let vv = await this.$api.login({ account: '18038018084', psw: '2' })
+ * 如果类似post的方法需要通过url后缀形式传递参数，在第二个参数config加上params属性即可：
+ * let vv = await this.$api.login({ account: '18038018084', psw: '2' },{ params: {} })
+ * 设置请求信息及请求头：
+ * let xx = await this.$api.getBanner({}, {timeout: 1000, headers:{ aaa: 111 }})
+ */
+import { request } from '@/plugins/axios/index'
+
+const apiMap = {
+    getBanner: { method: 'get', url: '/home/banner' },
+    login: { method: 'post', url: '/login' }
+}
+
+const requestMap = {}
+Object.keys(apiMap).forEach((alias) => {
+    const { method, url, config } = apiMap[alias]
+    requestMap[alias] = (dataOrParams = {}, instanceConf = {}) => {
+        const keyName = ['PUT', 'POST', 'PATCH'].includes(method) ? 'data' : 'params'
+        return request({
+            method: method.toUpperCase(),
+            url,
+            [keyName]: dataOrParams,
+            ...Object.assign(config || {}, instanceConf)
+        })
+    }
+})
+
+export default requestMap

src/main.js

@@ -4,7 +4,8 @@ import router from './router'
 import store from './store'
 import './registerServiceWorker'
 import './assets/style/index.scss'
-import requests from '@/plugins/axios/index'
+import * as requests from '@/plugins/axios/index'
+import api from '@/api/index.js'
 import VueBus from 'vue-bus'
 import VModal from 'vue-js-modal'
 import moment from '@/plugins/moment.js'
@@ -30,6 +31,7 @@ Vue.use(VModal)
 Vue.config.productionTip = false
 Vue.prototype.$request = requests.request
 Vue.prototype.$axios = requests.pureAxios
+Vue.prototype.$api = api
 Vue.prototype.$mt = moment
 Vue.prototype.$ = utils
 new Vue({

src/plugins/axios/axios.handleStatus.js

 // 处理响应错误码
 export default (response) => {
+    console.log('response:', response)
     const status = response.status
-
     // 如果http响应状态码response.status正常，则直接返回数据
-    if ((status >= 200 && status < 300) || status === 304) {
+    if ((status >= 200 && status <= 300) || status === 304) {
         return response.data
     } else {
         // 判断后端返回的code
         let errMsg = ''
         const code = parseInt(response.data && response.data.code)
-        console.log('code:', code)
+        const msg = (response.data || {}).msg
+        console.log('msg:', msg)
         switch (code) {
             case 400:
                 break
@@ -22,6 +23,10 @@ export default (response) => {
                 errMsg = '未登录'
                 // store.commit('changeLogin', {})
                 break
+            case 404:
+                errMsg = '请求地址错误'
+                // store.commit('changeLogin', {})
+                break
             case 412:
                 errMsg = '未找到有效session'
                 break
@@ -50,7 +55,6 @@ export default (response) => {
                 // errMsg = err.response.data.msg
                 break
         }
-        console.log('errMsg:', errMsg)
         return {
             code,
             errMsg

src/plugins/axios/index.js

@@ -7,6 +7,8 @@ import setOptions from '@/plugins/axios/axios.setOptions.js'
 // import store from '@/store/index'
 // import router from '@/router/index.js'
 // import { Message, Notification } from 'element-ui'
+// import qs from 'qs'
+// console.log('qs:',qs)
 
 console.log('axios-process.env:', process.env)
 
@@ -101,7 +103,8 @@ request.removeRequestInterceptors = removeRequestInterceptors
 request.removeResponseInterceptors = removeResponseInterceptors
 request.clearPendingPool = clearPendingPool
 
-export default {
-    pureAxios,
-    request
-}
+// export default{
+//     pureAxios,
+//     request
+// }
+export { pureAxios, request }

src/router/index.js

 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import store from '@/store/index.js'
-import requests from '@/plugins/axios/index'
+import { request } from '@/plugins/axios/index'
 Vue.use(VueRouter)
 
 let routes = []
@@ -57,7 +57,7 @@ const router = new VueRouter({
 // 路由全局前置守卫
 router.beforeEach((to, from, next) => {
     // 路由变化时取消所有非全局的pending状态的请求
-    requests.request.clearPendingPool()
+    request.clearPendingPool()
     // 未登录情况下访问的页面需要登录，自动跳转到指定页面（登录页）
     if (to.meta.needAuth && !store.getters['authed']) next({ name: 'page2' })
     else next()

src/store/global.js

 // 全局vuex信息
 // getter调用示例：this.$store.getters['authed']
 
-import axios from '@/plugins/axios'
+// import axios from '@/plugins/axios/index'
 
 const state = {
     _authed: false
@@ -15,8 +15,8 @@ const mutations = {}
 
 const actions = {
     async testAction(ctx, paylaod) {
-        let result = await axios.get('/home/banner?type=1&category=18')
-        console.log('result:', result)
+        // let result = await axios.get('/home/banner?type=1&category=18')
+        // console.log('result:', result)
     }
 }
 

src/views/home.vue

@@ -55,7 +55,12 @@ export default {
         }
     },
     created() {},
-    mounted() {},
+    async mounted() {
+        let xx = await this.$api.getBanner({ pageSize: 20, pIndex: 2 })
+        console.log('xx:', xx)
+        let vv = await this.$api.login({ account: '18038018084', psw: '2' })
+        console.log('vv:', vv)
+    },
     methods: {
         ttt() {
             this.$store.dispatch('testAction')
@@ -109,6 +114,52 @@ export default {
             setTimeout(() => {
                 cancelFn()
             }, 500)
+        },
+        // get写法1
+        async getMethod1() {
+            let params = {
+                a: 1,
+                type: 1,
+                category: 18
+            }
+            let result = await this.$request.get('/home/banner', { params })
+            console.log('getMethod1 result1:', result)
+        },
+        // get写法2
+        async getMethod2() {
+            let params = {
+                a: 2,
+                type: 1,
+                category: 18
+            }
+            let result = await this.$request({
+                method: 'GET',
+                url: '/home/banner',
+                params: params
+            })
+            console.log('getMethod2 result:', result)
+        },
+        // post写法1
+        async postMethod1() {
+            const paramObj = {
+                account: '18038018084',
+                psw: '111'
+            }
+            let result = await this.$request.post('/login', paramObj)
+            console.log('postMethod1 result:', result)
+        },
+        // post写法2
+        async postMethod2() {
+            const paramObj = {
+                account: '18038018084',
+                psw: '111'
+            }
+            let result = await this.$request({
+                method: 'POST',
+                url: '/login',
+                data: paramObj
+            })
+            console.log('postMethod2 result:', result)
         }
     }
 }