image.png
axios/index.js
import axios from 'axios'
import qs from 'qs'
import { Message } from 'element-ui'
import router from '../router';
import store from '../store'
import formatter from '@/store/formatter.js'
const root = process.env.API_ROOT;//配置的接口域名
let cancel;
// 创建axios实例
let instance = axios.create({
baseURL: root,//基地址(一定是要抽象成公共配置的)
timeout: 60000,//超时时间
// 可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
transformRequest: [function (data) {
// `transformRequest` 允许在向服务器发送前，修改请求数据
if (data) {//有data的才能设置，不然会报错;data :body数据;是一个对象(put patch post请求才能使用)
data.token = localStorage.getItem('token') || Cookie.getCookie('token');
let userInfo = store.state.userInfo
if (userInfo) {
data.login_company_id = userInfo.company_id;
data.login_user_id = userInfo.user_id;
data.fixed_province = userInfo.setlocale || localStorage.getItem('local_province');
}
}
//qs.stringify()将对象 序列化成URL的形式，以&进行拼接
return qs.stringify((data))
}],
headers: {//请求头
"Content-Type": "application/x-www-form-urlencoded",
},
})
// 请求拦截器
instance.interceptors.request.use(
config => {
// 登录流程控制中，根据本地是否存在token判断用户的登录情况
// 但是即使token存在，也有可能token是过期的，所以在每次的请求头中携带token
// 后台根据携带的token判断用户的登录情况，并返回给我们对应的状态码
// 而后我们可以在响应拦截器中，根据状态码进行一些统一的操作。
// const token = localStorage.getItem('token') || Cookie.getCookie('token');
// token && (config.data.token = token);
// console.log(cancel)
if (typeof (cancel) === 'function') {
cancel('强制取消了请求')
}
config['cancelToken'] = new axios.CancelToken(function (c) {
cancel = c
})
return config;
},
error => Promise.error(error)
)
// 响应拦截器
instance.interceptors.response.use( // 请求成功
res => {
cancel = null
if (res.status == 200) {
if (res.data.message == 'token值有误') {
localStorage.removeItem('token')
Cookie.delCookie('token')
router.push('/homepage?')
} else if (res.data.message == '权限受限') {//没有权限
router.push('/homepage')
} else {
return Promise.resolve(res.data)
}
} else {
return Promise.resolve({status:'error','message':'服务器错误'})
}
// return res.status === 200 ? Promise.resolve(res.data) : Promise.reject(res)
},
// 请求失败
error => {
if (axios.isCancel(error)) {
// console.log("取消上一个请求")
// 中断promise链接
return new Promise(() => { })
} else {
cancel = null
// 把错误继续向下传递
const { response } = error;
if (response) {
// 请求已发出，但是不在2xx的范围
errorHandle(response.status, response.data.message);
return Promise.resolve({status:'error','message':'服务器错误'})
} else {
errorHandle('500', '服务器错误');
return Promise.resolve({status:'error','message':'服务器错误'})
}
}
});
/**
* 封装get方法
* 封装的方法里不用再处理error,响应拦截器里已经处理
* @param url
* @param data
* @returns {Promise}
*/
export function get(url, params = {}) {
return new Promise((resolve, reject) => {
instance.get(url, {
params: params
})
.then(res => {
return resolve(res)
})
})
}
/**
* 封装post方法
* 封装的方法里不用再处理error,响应拦截器里已经处理
* @param url
* @param data
* @returns {Promise}
*/
export function post(url, data = {}) {
return new Promise((resolve, reject) => {
instance.post(url, data)
.then(res => {
return resolve(res)
})
})
}
/**
* 请求失败后的错误统一处理
* @param {Number} status 请求失败的状态码
* @param {String} message 请求失败的提示消息
**/
const errorHandle = (status, message) => {
// 状态码判断
switch (status) {
case 404:
router.push('/notfound') //跳转到404
break;
default:
let res = { 'status': 'error', message: `服务器错误(${status})` }
formatter.rewriteMessage.error(res.message)
return window.Promise.reject(res)
}
}
export { instance }
api/index.js
/**
* api接口的统一出口
*/
import tender from '@/api/tender';//交易相关
import people from '@/api/people';//人员相关
// 导出接口
export default {
tender,
people
}
api/people.js
/**
* 人员模块相关接口列表
*/
import { post } from '@/axios/index'; // 导入axios/index中创建的axios实例
const people= {
searchPeople(params) {
return post(`/firm/people/searchPeople`, (params));
}
}
export default people;
api/base.js
/**
* 接口域名的管理
*/
const base = {
baseUrl: 'https:',
baseUrl2: 'https:',//如果有些接口用的不是同一个域名，可以在此配置
}
export default base;
main.js
import api from './api' // 导入api接口
Vue.prototype.$api = api;
使用
this.$api.tender.transactionInformation(params).then((res) => {
this.loading = false;
this.tableData = res.rows || [];
this.total = res.total || 0;
this.getRequestPageLog(params);
});
