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,115 +1,103 @@
 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'
+import { errorLog, errorCreate } from './tools'
 
-// 创建一个错误
+/**
-function errorCreate (msg) {
+ * @description 创建请求实例
-  const error = new Error(msg)
+ */
-  errorLog(error)
+function createService () {
-  throw error
+  // 创建一个 axios 实例
-}
+  const service = axios.create()
-
+  // 请求拦截
-// 记录和显示错误
+  service.interceptors.request.use(
-function errorLog (error) {
+    config => config,
-  // 添加到日志
+    error => {
-  store.dispatch('d2admin/log/push', {
+      // 发送失败
-    message: '数据请求异常',
+      console.log(error)
-    type: 'danger',
+      return Promise.reject(error)
-    meta: {
-      error
     }
-  })
+  )
-  // 打印到控制台
+  // 响应拦截
-  if (process.env.NODE_ENV === 'development') {
+  service.interceptors.response.use(
-    util.log.danger('>>>>>> Error >>>>>>')
+    response => {
-    console.log(error)
+      // dataAxios 是 axios 返回数据中的 data
-  }
+      const dataAxios = response.data
-  // 显示提示
+      // 这个状态码是和后端约定的
-  Message({
+      const { code } = dataAxios
-    message: error.message,
+      // 根据 code 进行判断
-    type: 'error',
+      if (code === undefined) {
-    duration: 5 * 1000
+        // 如果没有 code 代表这不是项目后端开发的接口 比如可能是 D2Admin 请求最新版本
-  })
+        return dataAxios
-}
+      } else {
-
+        // 有 code 代表这是一个后端接口 可以进行进一步的判断
-// 创建一个 axios 实例
+        switch (code) {
-const service = axios.create()
+          case 0:
-
+            // [ 示例 ] code === 0 代表没有错误
-// 请求拦截器
+            return dataAxios.data
-service.interceptors.request.use(
+          case 'xxx':
-  config => config,
+            // [ 示例 ] 其它和后台约定的 code
-  error => {
+            errorCreate(`[ code: xxx ] ${dataAxios.msg}: ${response.config.url}`)
-    // 发送失败
+            break
-    console.log(error)
+          default:
-    return Promise.reject(error)
+            // 不是正确的 code
-  }
+            errorCreate(`${dataAxios.msg}: ${response.config.url}`)
-)
+            break
-
+        }
-// 响应拦截器
-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 const mock = new Adapter(service)
-
-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,
+    error => {
-    baseURL: process.env.VUE_APP_API,
+      if (error && error.response) {
-    data: {}
+        switch (error.response.status) {
-  }
+          case 400: error.message = '请求错误'; break
-  return service(Object.assign(configDefault, config))
+          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)
+    }
+  )
+  return service
 }
+
+/**
+ * @description 创建请求方法
+ * @param {Object} service axios 实例
+ */
+function createRequestFunction (service) {
+  return function (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))
+  }
+}
+
+// 用于真实网络请求的实例和请求方法
+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
+}