diff --git a/src/api/index.js b/src/api/index.js index 89160b37..09dd1a5a 100644 --- a/src/api/index.js +++ b/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 }))) diff --git a/src/api/modules/demo.js b/src/api/modules/demo.js index d6b99864..446a5487 100644 --- a/src/api/modules/demo.js +++ b/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' }) diff --git a/src/api/modules/file.js b/src/api/modules/file.js index 5192c726..9c8c9fa9 100644 --- a/src/api/modules/file.js +++ b/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' diff --git a/src/api/modules/sys.user.js b/src/api/modules/sys.user.js index 4ecf2679..bcea5ba4 100644 --- a/src/api/modules/sys.user.js +++ b/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 diff --git a/src/api/service.js b/src/api/service.js index d1697234..bb530c35 100644 --- a/src/api/service.js +++ b/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) { - const error = new Error(msg) - errorLog(error) - throw error -} - -// 记录和显示错误 -function errorLog (error) { - // 添加到日志 - store.dispatch('d2admin/log/push', { - message: '数据请求异常', - type: 'danger', - meta: { - error +/** + * @description 创建请求实例 + */ +function createService () { + // 创建一个 axios 实例 + const service = axios.create() + // 请求拦截 + service.interceptors.request.use( + config => config, + error => { + // 发送失败 + console.log(error) + return Promise.reject(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 + ) + // 响应拦截 + 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, - baseURL: process.env.VUE_APP_API, - data: {} - } - return service(Object.assign(configDefault, config)) + 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) + } + ) + 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) diff --git a/src/api/tools.js b/src/api/tools.js index 720a13a1..990e8405 100644 --- a/src/api/tools.js +++ b/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 +}