我们平时的项目中会用到axios来做ajax请求,但是都要进行封装过
http-server.js 封装如下:
/***
* Created by Simple on 2018/1/14 0014.
* Http请求控制器模块
*/
import axios from 'axios';
import store from '@/store/index';
import types from '@/store/types';
import router from '@/router/index';
import { Loading, Message } from 'element-ui';
// axios 配置
axios.defaults.timeout = 15000;
// axios.defaults.baseURL = 'http://';
// 配置通用请求动画
let loading = null;
axios.interceptors.request.use(config => {
console.time('ajax请求耗时');
if (store.state.users.token) {
config.headers.Authorization = `${store.getters.token}`;
}
loading = Loading.service({
lock: true,
text: '拼命加载中...',
background: 'rgba(255, 255, 255, .6)'
});
return config;
}, err => {
loading.close();
return Promise.reject(err);
});
// http response 拦截器
axios.interceptors.response.use(response => {
if (response && response.data) {
switch (response.data.code) {
case '401':
// 401 清除token信息并跳转到登录页面
store.commit(types.CLEAR_USER_TOKEN);
Message.error({
message: '身份过期,请重新登录'
});
setTimeout(() => {
router.replace({
path: '/login',
name: 'Login',
query: { redirect: router.currentRoute.fullPath }
});
}, 1200);
break;
//无权限
case '403':
router.replace({
name: 'noAuth',
query: { redirect: router.currentRoute.fullPath }
});
}
}
loading.close();
console.timeEnd('ajax请求耗时');
return response;
}, error => {
if (error.response) {
switch (error.response.status) {
case '401':
// 401 清除token信息并跳转到登录页面
store.commit(types.CLEAR_USER_TOKEN);
router.replace({
name: 'Login',
query: { redirect: router.currentRoute.fullPath }
});
break;
//无权限
case '403':
router.replace({
name: 'noAuth',
query: { redirect: router.currentRoute.fullPath }
});
break;
}
}
loading.close();
Message.error({
message: '哎呀~ (ಥ﹏ಥ)网络又开小差了,请稍后刷新重试!'
});
return Promise.reject(error.response.data);
});
export default axios;
api.js 调用者,调用方法如下:
import axios from '../method/http-server';
// axios.defaults.headers.common['language'] = common.getCurrentLanguage();
//测试服务器
let base = 'http://api.xxxx.com';
// 内网
//let base = 'http://192.168.0.1';
//生产环境
if (process.env.NODE_ENV === 'production') {
// 外网
// base = 'https://api.xxxxx.com';
}
let baseCommon = base + '/common'; //服务名 前缀
let baseParking = base + '/parking';
// 定义请求方式
const methodPut = {
headers: {
method: 'PUT'
}
};
const methodDelete = {
headers: {
method: 'DELETE'
}
};
//get调用方式
/**
* 获取监控台数据
* @param {*} beginTime
* @param {*} endTime
*/
export const getMonitorData = (beginTime, endTime) => {
return axios.get(`${baseParking}/owner/monitor`, {
params: {
begin: beginTime,
end: endTime
}
}).then((result) => {
return result.data;
});
};
//post调用方式
/**
* 用户登录
* @param params
* @return {Promise.<TResult>|Promise<any>}
*/
export const userLogin = (data) => {
return axios.post(`${baseParking}/owner/login`, data).then((result) => {
return result.data;
});
};
/**
* 用户注销
* @param params
* @return {Promise.<TResult>|Promise<any>}
*/
export const userLogout = () => {
return axios.post(`${baseParking}/owner/loginOut`, null).then((result) => {
return result.data;
});
};
//put 调用
/**
* 管理员修改密码
* @param data
* @return {Promise.<TResult>|Promise<any>}
*/
export const ownerUpdatePassword = (data) => {
return axios.post(`${baseParking}/owner/setOwnerPassword`, data, methodPut).then((result) => {
return result.data;
});
};
//delete调用
/**
* 注销平台管理员账号
* @param params
* @param authId
* @return {Promise.<TResult>|Promise<any>}
*/
export const adminAccountDelete = (params, authId) => {
return axios.post(`${baseParking}/owner/${authId}/ownerAuthAdmin`, params, methodDelete).then((result) => {
return result.data;
});
};
返回值为promise对象
demo.js
//返回值如下
/**
* 监控台
* @param {*} beginTime
* @param {*} endTime
*/
getMonitorData(beginTime, endTime).then((res) => {
if (res && res.code == '200') {
//成功操作 TODO
} else {
//错误操作 TODO
}
});