feat: 💡 分离用于真实网络请求和模拟请求的 service

src/api/index.js

@@ -1,14 +1,17 @@
 import { assign, map } from 'lodash'
 import faker from 'faker/locale/zh_CN'
-import { request, mock } from './service'
+import { service, request, serviceForMock, requestForMock, mock } from './service'
 import * as tools from './tools'
 
 const files = require.context('./modules', false, /\.js$/)
 const generators = files.keys().map(key => files(key).default)
 
 export default assign({}, ...map(generators, generator => generator({
+  service,
   request,
-  faker,
+  serviceForMock,
+  requestForMock,
   mock,
+  faker,
   tools
 })))

src/api/modules/demo.js

@@ -7,7 +7,7 @@ const businessIssue142Db = [
   { id: '4', name: '用户 4', address: '上海市普陀区金沙江路 1516 弄' }
 ]
 
-export default ({ request, faker, mock, tools }) => ({
+export default ({ service, request, serviceForMock, requestForMock, mock, faker, tools }) => ({
   /**
    * @description https://d2.pub/d2-admin/preview/#/demo/business/issues/142
    * @description 列表
@@ -18,7 +18,7 @@ export default ({ request, faker, mock, tools }) => ({
       .onAny('/demo/business/issues/142/fetch')
       .reply(...tools.responseSuccess({ list: businessIssue142Db }))
     // 接口请求
-    return request({
+    return requestForMock({
       url: '/demo/business/issues/142/fetch',
       method: 'get'
     })
@@ -34,7 +34,7 @@ export default ({ request, faker, mock, tools }) => ({
       .onAny('/demo/business/issues/142/detail')
       .reply(config => tools.responseSuccess(find(businessIssue142Db, { id: config.params.id })))
     // 接口请求
-    return request({
+    return requestForMock({
       url: '/demo/business/issues/142/detail',
       method: 'get',
       params: {
@@ -66,7 +66,7 @@ export default ({ request, faker, mock, tools }) => ({
         }))
       }))
     // 接口请求
-    return request({
+    return requestForMock({
       url: '/demo/business/table/1/fetch',
       method: 'get',
       params
@@ -77,7 +77,7 @@ export default ({ request, faker, mock, tools }) => ({
    */
   DEMO_LOG_AJAX () {
     // 接口请求
-    return request({
+    return requestForMock({
       url: '/invalid-url',
       method: 'get'
     })

src/api/modules/file.js

@@ -1,10 +1,10 @@
-export default ({ request, faker, mock, tools }) => ({
+export default ({ service, request, serviceForMock, requestForMock, mock, faker, tools }) => ({
   /**
    * @description 请求项目中的文件
    * @param {String} url 文件地址
    */
   FILE_GET (url = '') {
-    return request({
+    return requestForMock({
       baseURL: process.env.BASE_URL,
       url,
       method: 'get'

src/api/modules/sys.user.js

@@ -6,7 +6,7 @@ const users = [
   { username: 'user1', password: 'user1', uuid: 'user1-uuid', name: 'User1' }
 ]
 
-export default ({ request, faker, mock, tools }) => ({
+export default ({ service, request, serviceForMock, requestForMock, mock, faker, tools }) => ({
   /**
    * @description 登录
    * @param {Object} data 登录携带的信息
@@ -22,7 +22,7 @@ export default ({ request, faker, mock, tools }) => ({
           : tools.responseError({}, '账号或密码不正确')
       })
     // 接口请求
-    return request({
+    return requestForMock({
       url: '/login',
       method: 'post',
       data

src/api/service.js

@@ -1,44 +1,16 @@
 import axios from 'axios'
 import Adapter from 'axios-mock-adapter'
-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
-  })
-}
+import { errorLog, errorCreate } from './tools'
 
+/**
+ * @description 创建请求实例
+ */
+function createService () {
   // 创建一个 axios 实例
   const service = axios.create()
-
-// 请求拦截器
+  // 请求拦截
   service.interceptors.request.use(
     config => config,
     error => {
@@ -47,8 +19,7 @@ service.interceptors.request.use(
       return Promise.reject(error)
     }
   )
-
-// 响应拦截器
+  // 响应拦截
   service.interceptors.response.use(
     response => {
       // dataAxios 是 axios 返回数据中的 data
@@ -97,10 +68,15 @@ service.interceptors.response.use(
       return Promise.reject(error)
     }
   )
+  return service
+}
 
-export const mock = new Adapter(service)
-
-export function request (config) {
+/**
+ * @description 创建请求方法
+ * @param {Object} service axios 实例
+ */
+function createRequestFunction (service) {
+  return function (config) {
     const token = util.cookies.get('token')
     const configDefault = {
       headers: {
@@ -113,3 +89,15 @@ export function request (config) {
     }
     return service(Object.assign(configDefault, config))
   }
+}
+
+// 用于真实网络请求的实例和请求方法
+export const service = createService()
+export const request = createRequestFunction(service)
+
+// 用于模拟网络请求的实例和请求方法
+export const serviceForMock = createService()
+export const requestForMock = createRequestFunction(serviceForMock)
+
+// 网络请求数据模拟工具
+export const mock = new Adapter(serviceForMock)

src/api/tools.js

@@ -1,3 +1,7 @@
+import { Message } from 'element-ui'
+import store from '@/store'
+import util from '@/libs/util'
+
 /**
  * @description 安全地解析 json 字符串
  * @param {String} jsonString 需要解析的 json 字符串
@@ -44,3 +48,39 @@ export function responseSuccess (data = {}, msg = '成功') {
 export function responseError (data = {}, msg = '请求失败', code = 500) {
   return response(data, msg, code)
 }
+
+/**
+ * @description 记录和显示错误
+ * @param {Error} error 错误对象
+ */
+export 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
+  })
+}
+
+/**
+ * @description 创建一个错误
+ * @param {String} msg 错误信息
+ */
+export function errorCreate (msg) {
+  const error = new Error(msg)
+  errorLog(error)
+  throw error
+}