- 封装api.js
// 读取配置的根目录地址
const root = process.env.API_ROOT;
// 引入axios
let axios = require('axios');
function toType (obj) {
return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase();
}
// 参数过滤函数
function filterNull (o) {
for (let key in o) {
if (o[key] === null) {
delete o[key]
}
if (toType(o[key]) === 'string') {
o[key] = o[key].trim()
} else if (toType(o[key]) === 'object') {
o[key] = filterNull(o[key])
} else if (toType(o[key]) === 'array') {
o[key] = filterNull(o[key])
}
}
return o
}
/*
接口处理函数
*/
function apiAxios (method, url, params, success, failure) {
if (params) {
params = filterNull(params)
}
axios({
method: method,
url: url,
data: method === 'POST' || method === 'PUT' ? params : null,
params: method === 'GET' || method === 'DELETE' ? params : null,
baseURL: root,
// 请求超时
timeout: 30000,
// 是否携带cookie信息
withCredentials: false
})
.then(function (res) {
if (res.data.success === true) {
if (success) {
success(res.data)
}
} else {
if (failure) {
failure(res.data)
} else {
console.error('error: ' + JSON.stringify(res.data));
this.$message('error: ' + JSON.stringify(res.data));
}
}
})
.catch(function (err) {
let res = err.response;
if (err) {
console.error('api error, HTTP CODE: ' + res.status);
this.$message('api error, HTTP CODE: ' + res.status);
}
})
}
// 返回在vue模板中的调用接口
export default {
get: function (url, params, success, failure) {
return apiAxios('GET', url, params, success, failure)
},
post: function (url, params, success, failure) {
return apiAxios('POST', url, params, success, failure)
},
put: function (url, params, success, failure) {
return apiAxios('PUT', url, params, success, failure)
},
delete: function (url, params, success, failure) {
return apiAxios('DELETE', url, params, success, failure)
}
}
- 加入vue全局变量
import api from './api/api';
/* api设置成全局属性 */
Vue.prototype.$ajax = api;
$ajax.get
$ajax.post
....