feat(api): ✨ 完善 service 代码，request 现在会根据需要自动序列化参数
This commit is contained in:
FairyEver
parent
f53927121e
commit
886a4a8638
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue