1.0.1 • Published 5 years ago
pa-ajax v1.0.1
ajax 统一封装
1.Installation
npm install --save-dev pa-ajax
2.Usage
2-1.在项目中src目录下建立一个配置文件夹如ajaxInject
里面分别建一个index.js(入口文件)、ajaxConfig.js(ajax统一配置)、urlConfig.js(接口配置文件)
具体配置演示:
a.index.js(入口文件)
import api from 'pa-ajax'
import ajaxConfig from './ajaxConfig.js' // ajaxConfig为ajax接口配置
import Vue from 'vue'
Vue.prototype.$http = api(ajaxConfig) // 挂载到vue原型下面
b.ajaxConfig.js(ajax统一配置)
// import encrypt from './encrypt'
import urlConfig from './urlConfig'
let defaultOptions = {
method: 'POST', // 默认ajax请求方法
timeout: 5000, // 默认请求超时时间
isLoading: true, // 是否展示loading(请求转圈加载动画),默认为true
limitLoadingTime: 3000, // 接口请求在xxms内完成则不展示loading
isShowDefaultErrTip: true, // 是否展示接口默认错误提示 如果设为false请在请求的catch里面单独设置提示(如果是某个接口不展示,可在请求传参里面添加)
requestSucKey: 'resultCode', // 接口请求成功返回的key值 默认为resultCode
requestSucCode: '0', // 接口请求成功的成功码 默认为0
requestErrDescKey: 'errorDesc', // 接口请求失败错误描述key值 默认为errorDesc
urlConfig, // url配置
headers: {
'Content-Type': 'application/json;charset=UTF-8' // 统一设置默认请求头,单个接口可以额外配置请求头
}, // 设置请求headers
interceptorsRequestFn: [(config) => {
// Do something before request is sent
console.log('ajax-sender-data', config['data'])
// isEncryptPostData && !(encryptExcludePaths || []).includes(config['url']) && (config['data'] = encryptPostData(config['data'])) // 报文加密
return config
}, (err) => {
return Promise.reject(err)
}], // 统一请求拦截
interceptorsResponseFn: [(response) => {
return response.data
}, (err) => {
return Promise.reject(err)
}], // 统一响应拦截
toastConfig: { // 使用ajax提供的默认消息提示及加载动画
/**
* 消息展示默认配置
*/
msgTipDefault: {
text: '',
duration: 2500
},
/**
* 加载动画默认配置
*/
loadingDefault: {
loading: true,
text: 'loading...'
}
},
toastConfig: { // 消息提示配置 (使用自定义消息提示和加载动画)
/**
* 请求失败/异常的消息提示框
*/
msgTip: function (tip) {
let config$toast = (tips) => {
const options = {
type: 'text',
duration: 2000,
message: tips,
position: 'bottom'
}
return Vue.prototype.$toast(options)
}
return config$toast(tip)
},
/**
* 加载展示
*/
loading: function () {
return Vue.prototype.$toast.loading({
mask: true,
message: '加载中...'
})
},
/**
* 清除消息展示框、加载动画
*/
clear: function () {
return Vue.prototype.$toast.clear()
}
}
}
export default defaultOptions
c.urlConfig.js(接口配置文件)
const prefix = '/ts-api1'
const prefix2 = '/ts-api2'
export default {
mchtInfoList: {
url: `${prefix}/unionPay/activity/mcht_info_list`,
method: 'post' // 默认请求方法配置为post的时候可省略此处
},
tsRestful: { // restful风格请求
url: `${prefix2}/getCategories/{cage}`,
method: 'GET'
}
}
2-2.在项目入口文件(如main.js)引入
import '@/common/ajax/ajaxInject'
2-3.例子引用
export default {
created () {
this.tsAjax()
},
methods: {
async tsAjax () {
try {
const sendData = {
data: {
a: 123
},
headers: {
'aa': '456'
}, // 设置请求headers
isShowDefaultErrTip: false // 是否展示接口默认错误提示 如果设为false请在请求的catch里面单独设置提示
}
await this.$http('goodsDetail', sendData)
} catch (e) {
console.log('tsAjaxErr', e)
}
}
}
}
其他说明
针对大型项目,urlConfig很大,建议按模块分开写,最后统一合并引入
如: urlConfig下面建三个文件index.js(统一入口,用来统一合并不同模块请求连接)、goods-config.js(商品模块接口)、pay-config.js(支付模块接口)
// goods-config.js
export default {
goodsDetail: { // 获取商品详情
url: 'goods/detail/{id}'
},
goodsPriceSpc: { // 获取商品规格
url: 'goods/priceSpc'
}
}
// pay-config.js
export default {
payList: { // 获取支付列表
url: 'pay/payList'
}
}
/**
* 获取文件夹下面的请求接口集合
* modulesContext = require.context('./', true, /-config\.js/)
*/
const getTotalModule = (modulesContext) => {
let totalModules = modulesContext.keys().reduce((modules, key) => {
modules[key.replace(/(^\.\/)|(\.js$)/g, '')] = modulesContext(key).default
return modules
}, {})
let obj = {}
for (let key in totalModules) {
obj = { ...obj, ...totalModules[key] }
}
return obj
}
const prefix = 'ts-api/'
const modulesContext = require.context('./', true, /-config\.js/)
let totalModule = getTotalModule(modulesContext)
// prefix拼接
for (let key in totalModule) {
totalModule[key].url = `${prefix}${totalModule[key].url}`
}
export default totalModule