lisang
/
d2-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(api): ✨ 完善 service 代码，request 现在会根据需要自动序列化参数

This commit is contained in:
FairyEver 2020-11-17 14:33:07 +08:00
parent f53927121e
commit 886a4a8638
4 changed files with 101 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
package-lock.json generated
View File

@ -12971,10 +12971,9 @@
"dev": true
},
"qs": {
"version": "6.5.2",
"resolved": "https://registry.npm.taobao.org/qs/download/qs-6.5.2.tgz",
"integrity": "sha1-yzroBuh0BERYTvFUzo7pjUA/PjY=",
"dev": true
"version": "6.9.4",
"resolved": "https://registry.npm.taobao.org/qs/download/qs-6.9.4.tgz",
"integrity": "sha1-kJCykNH5FyjTwi5UhDykSupatoc="
},
"query-string": {
"version": "4.3.4",
@ -13357,6 +13356,14 @@
"tough-cookie": "~2.5.0",
"tunnel-agent": "^0.6.0",
"uuid": "^3.3.2"
},
"dependencies": {
"qs": {
"version": "6.5.2",
"resolved": "https://registry.npm.taobao.org/qs/download/qs-6.5.2.tgz",
"integrity": "sha1-yzroBuh0BERYTvFUzo7pjUA/PjY=",
"dev": true
}
}
},
"request-promise-core": {

1
package.json
View File

@ -32,6 +32,7 @@
"lowdb": "^1.0.0",
"marked": "^1.0.0",
"nprogress": "^0.2.0",
"qs": "^6.9.4",
"quill": "^1.3.7",
"screenfull": "^5.0.2",
"simplemde": "^1.11.2",

120
src/api/service.js
View File

@ -1,8 +1,36 @@
import { Message } from 'element-ui'
import axios from 'axios'
import Adapter from 'axios-mock-adapter'
import { get } from 'lodash-es'
import { get, isEmpty } from 'lodash-es'
import qs from 'qs'
import util from '@/libs/util'
import { errorLog, errorCreate } from './tools'
import store from '@/store'
/**
* @description 记录和显示错误
* @param {Error} error 错误对象
*/
function handleError (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 创建请求实例
@ -22,29 +50,43 @@ function createService () {
// 响应拦截
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
}
// http 状态码 200 情况
// 根据 前后端约定的 response.data.code 判断接口是否请求成功
// 例如 接口返回数据为
// {
// code: 0,
// msg: 'success',
// data: {
// list: [],
// count: 0
// }
// }
// 此时
// response.data.code :
// 0
// response.data.msg :
// 'success'
// response.data.data : (在调用接口)
// {
// list: [],
// count: 0
// }
// 默认约定 code 为 0 时代表成功
// 你也可以不使用这种方法，改为在下面的 http 错误拦截器里做处理
// 没有 code 视为非项目接口不作处理
if (response.data.code === undefined) {
return response.data
}
// 有 code 判断为项目接口请求
switch (response.data.code) {
// 返回响应内容
case 0: return response.data.data
// 例如在 code 401 情况下退回到登录页面
case 401: throw new Error('请重新登录')
// 根据需要添加其它判断
default: throw new Error(`${response.data.msg}: ${response.config.url}`)
}
},
error => {
@ -63,18 +105,22 @@ function createService () {
case 505: error.message = 'HTTP版本不受支持'; break
default: break
}
errorLog(error)
return Promise.reject(error)
handleError(error)
throw error
}
)
return service
}
function stringify (data) {
return qs.stringify(data, { allowDots: true, encode: false })
}
/**
* @description 创建请求方法
* @param {Object} service axios 实例
*/
function createRequestFunction (service) {
function createRequest (service) {
return function (config) {
const token = util.cookies.get('token')
const configDefault = {
@ -86,17 +132,29 @@ function createRequestFunction (service) {
baseURL: process.env.VUE_APP_API,
data: {}
}
return service(Object.assign(configDefault, config))
const option = Object.assign(configDefault, config)
// 处理 get 请求的参数
// 请根据实际需要修改
if (!isEmpty(option.params)) {
option.params = {}
option.url = option.url + '?' + stringify(option.params)
}
// 当需要以 form 形式发送时 处理发送的数据
// 请根据实际需要修改
if (!isEmpty(option.data) && option.headers['Content-Type'] === 'application/x-www-form-urlencoded') {
option.data = stringify(option.data)
}
return service(option)
}
}
// 用于真实网络请求的实例和请求方法
export const service = createService()
export const request = createRequestFunction(service)
export const request = createRequest(service)
// 用于模拟网络请求的实例和请求方法
export const serviceForMock = createService()
export const requestForMock = createRequestFunction(serviceForMock)
export const requestForMock = createRequest(serviceForMock)
// 网络请求数据模拟工具
export const mock = new Adapter(serviceForMock)

40
src/api/tools.js
View File

@ -1,7 +1,3 @@
import { Message } from 'element-ui'
import store from '@/store'
import util from '@/libs/util'
/**
* @description 安全地解析 json 字符串
* @param {String} jsonString 需要解析的 json 字符串
@ -48,39 +44,3 @@ 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
}