feat: 优化接口配置设计,注册的网络请求会自动注册到 vue 原型 $api 上,修改了一些旧的接口调用方式

src/api/components.markdown.js

@@ -1,9 +0,0 @@
-import request from '@/plugin/axios'
-
-export function componentsMarkdownBase (url) {
-  return request({
-    baseURL: process.env.BASE_URL,
-    url,
-    method: 'get'
-  })
-}

src/api/demo.business.issues.142.js

@@ -1,18 +0,0 @@
-import request from '@/plugin/axios'
-
-export function fetch () {
-  return request({
-    url: '/demo/business/issues/142/fetch',
-    method: 'get'
-  })
-}
-
-export function detail (id) {
-  return request({
-    url: '/demo/business/issues/142/detail',
-    method: 'get',
-    params: {
-      id
-    }
-  })
-}

src/api/demo.business.table.1.js

@@ -1,9 +0,0 @@
-import request from '@/plugin/axios'
-
-export function businessTable1List (params) {
-  return request({
-    url: '/demo/business/table/1/fetch',
-    method: 'get',
-    params
-  })
-}

src/api/demo.playground.log.ajax.js

@@ -1,8 +0,0 @@
-import request from '@/plugin/axios'
-
-export function getInvalidUrl () {
-  return request({
-    url: '/invalid-url',
-    method: 'get'
-  })
-}

src/api/demo.plugins.mocks.ajax.js

@@ -1,8 +0,0 @@
-import request from '@/plugin/axios'
-
-export function pluginMocksAjax () {
-  return request({
-    url: '/demo/plugins/mock/ajax',
-    method: 'get'
-  })
-}

src/api/index.js

@@ -0,0 +1,7 @@
+import { assign, map } from 'lodash'
+import { request } from './service'
+
+const files = require.context('./modules', false, /\.js$/)
+const generators = files.keys().map(key => files(key).default)
+
+export default assign({}, ...map(generators, generator => generator({ request })))

src/api/modules/component.markdown.js

@@ -0,0 +1,13 @@
+export default ({ request }) => ({
+  /**
+   * @description 登录
+   * @param {Object} data 登录携带的信息
+   */
+  COMPONENT_MARKDOWN_GET ({ url = '' } = {}) {
+    return request({
+      baseURL: process.env.BASE_URL,
+      url,
+      method: 'get'
+    })
+  }
+})

src/api/modules/demo.js

@@ -0,0 +1,44 @@
+export default ({ request }) => ({
+  /**
+   * @description https://d2.pub/d2-admin/preview/#/demo/business/issues/142
+   * @description 列表
+   */
+  DEMO_BUSINESS_ISSUE_142_LIST () {
+    return request({
+      url: '/demo/business/issues/142/fetch',
+      method: 'get'
+    })
+  },
+  /**
+   * @description https://d2.pub/d2-admin/preview/#/demo/business/issues/142
+   * @description 详情
+   */
+  DEMO_BUSINESS_ISSUE_142_DETAIL ({ id } = {}) {
+    return request({
+      url: '/demo/business/issues/142/detail',
+      method: 'get',
+      params: {
+        id
+      }
+    })
+  },
+  /**
+   * @description https://d2.pub/d2-admin/preview/#/demo/business/table/1
+   * @description 列表
+   */
+  DEMO_BUSINESS_TABLE_1_LIST () {
+    return request({
+      url: '/demo/business/table/1/fetch',
+      method: 'get'
+    })
+  },
+  /**
+   * @description 错误日志示例 请求一个不存在的地址
+   */
+  DEMO_LOG_AJAX () {
+    return request({
+      url: '/invalid-url',
+      method: 'get'
+    })
+  }
+})

src/api/modules/sys.user.js

@@ -0,0 +1,13 @@
+export default ({ request }) => ({
+  /**
+   * @description 登录
+   * @param {Object} data 登录携带的信息
+   */
+  SYS_USER_LOGIN (data = {}) {
+    return request({
+      url: '/login',
+      method: 'post',
+      data
+    })
+  }
+})

src/api/service.js

@@ -0,0 +1,112 @@
+import axios from 'axios'
+import { Message } from 'element-ui'
+import { get } from 'lodash'
+import util from '@/libs/util'
+import store from '@/store'
+
+// 创建一个错误
+function errorCreate (msg) {
+  const error = new Error(msg)
+  errorLog(error)
+  throw error
+}
+
+// 记录和显示错误
+function errorLog (error) {
+  // 添加到日志
+  store.dispatch('d2admin/log/push', {
+    message: '数据请求异常',
+    type: 'danger',
+    meta: {
+      error
+    }
+  })
+  // 打印到控制台
+  if (process.env.NODE_ENV === 'development') {
+    util.log.danger('>>>>>> Error >>>>>>')
+    console.log(error)
+  }
+  // 显示提示
+  Message({
+    message: error.message,
+    type: 'error',
+    duration: 5 * 1000
+  })
+}
+
+// 创建一个 axios 实例
+const service = axios.create()
+
+// 请求拦截器
+service.interceptors.request.use(
+  config => config,
+  error => {
+    // 发送失败
+    console.log(error)
+    return Promise.reject(error)
+  }
+)
+
+// 响应拦截器
+service.interceptors.response.use(
+  response => {
+    // dataAxios 是 axios 返回数据中的 data
+    const dataAxios = response.data
+    // 这个状态码是和后端约定的
+    const { code } = dataAxios
+    // 根据 code 进行判断
+    if (code === undefined) {
+      // 如果没有 code 代表这不是项目后端开发的接口 比如可能是 D2Admin 请求最新版本
+      return dataAxios
+    } else {
+      // 有 code 代表这是一个后端接口 可以进行进一步的判断
+      switch (code) {
+        case 0:
+          // [ 示例 ] code === 0 代表没有错误
+          return dataAxios.data
+        case 'xxx':
+          // [ 示例 ] 其它和后台约定的 code
+          errorCreate(`[ code: xxx ] ${dataAxios.msg}: ${response.config.url}`)
+          break
+        default:
+          // 不是正确的 code
+          errorCreate(`${dataAxios.msg}: ${response.config.url}`)
+          break
+      }
+    }
+  },
+  error => {
+    if (error && error.response) {
+      switch (error.response.status) {
+        case 400: error.message = '请求错误'; break
+        case 401: error.message = '未授权，请登录'; break
+        case 403: error.message = '拒绝访问'; break
+        case 404: error.message = `请求地址出错: ${error.response.config.url}`; break
+        case 408: error.message = '请求超时'; break
+        case 500: error.message = '服务器内部错误'; break
+        case 501: error.message = '服务未实现'; break
+        case 502: error.message = '网关错误'; break
+        case 503: error.message = '服务不可用'; break
+        case 504: error.message = '网关超时'; break
+        case 505: error.message = 'HTTP版本不受支持'; break
+        default: break
+      }
+    }
+    errorLog(error)
+    return Promise.reject(error)
+  }
+)
+
+export function request (config) {
+  const token = util.cookies.get('token')
+  const configDefault = {
+    headers: {
+      Authorization: token,
+      'Content-Type': get(config, 'headers.Content-Type', 'application/json')
+    },
+    timeout: 5000,
+    baseURL: process.env.VUE_APP_API,
+    data: {}
+  }
+  return service(Object.assign(configDefault, config))
+}

src/api/sys.login.js

@@ -1,9 +0,0 @@
-import request from '@/plugin/axios'
-
-export function accountLogin (data) {
-  return request({
-    url: '/login',
-    method: 'post',
-    data
-  })
-}