如何基于vue-cli3.0构建功能完善的移动端架子

2020-06-14 06:08:52易采站长站整理

}
)
// axios respone拦截器
axios.interceptors.response.use(
response => {
// 如果返回的状态码为200,说明接口请求成功,可以正常拿到数据
// 否则的话抛出错误 结合自身业务和后台返回的接口状态约定写respone拦截器
Indicator.close()
console.log('response', response);
if (response.status === 200 && response.data.code === 0) {
return Promise.resolve(response)
} else {
Toast({
message: response.data.msg,
position: 'middle',
duration: 2000
});
return Promise.reject(response)
}
},
error => {
Indicator.close()
const responseCode = error.response.status
switch (responseCode) {
// 401:未登录
case 401:
break
// 404请求不存在
case 404:
Toast({
message: '网络请求不存在',
position: 'middle',
duration: 2000
});
break
default:
Toast({
message: error.response.data.message,
position: 'middle',
duration: 2000
});
}
return Promise.reject(error)
}
)
/**
* 封装get方法,对应get请求
* @param {String} url [请求的url地址] * @param {Object} params [请求时携带的参数] */
function get (url, params = {}) {
return new Promise((resolve, reject) => {
axios
.get(url, {
params: params
})
.then(res => {
resolve(res.data)
})
.catch(err => {
reject(err.data)
})
})
}
/**
* post方法,对应post请求
* @param {String} url [请求的url地址] * @param {Object} params [请求时携带的参数] */
function post (url, params) {
return new Promise((resolve, reject) => {
axios
.post(url, qs.stringify(params))
.then(res => {
resolve(res.data)
})
.catch(err => {
reject(err.data)
})
})
}

为了方便管理api路径,这里把所以请求都放在了api文件夹下,如


import { get, post } from '@/axios/http.js'
function getIndex (params) {
return get('/mock/5cb48c7ed491cd741c54456f/base/index', params)
}
function login(params) {
return post('/mock/5cb48c7ed491cd741c54456f/base/login', params)
}
export {
getIndex,
login
}

其他

去除console.log

装uglifyjs-webpack-plugin插件


// 上线压缩去除console等信息
config.plugins.push(
new UglifyJsPlugin({