vue踩坑记-项目对axios进行封装
需求描述
我们在做vue项目的时候，经常会遇到一个问题就是我们的请求需要加请求头，或者还不是一个请求头的情况，那么其实我们可以使用比较原始的办法，直接在我们写的时候就直接加上请求头，这样可以避免后期加不上的情况，但是有下面两种情况是我们很无奈的，第一是请求头信息改掉了，第二是开始的时候没有加，但是后面要求我们加上的时候，这两种情况如果我们的请求比较少的时候还是可以接受的，但是如果多的时候就比较恶心了，估计死的心都有了，还有就是我们版本迭代的时候，域名名字中间会加上对应的版本号，这个时候如果一个一个写的话，估计也够让人头疼的事情，等等情况，都是在接口名字上做的文章，那我们对请求的封装就显的尤为重要。那么其实我们如果前期没有封装请求的话，也是可以的统一配置的，只是这是不得已而为之的办法，统一配置请求信息
代码分析
看目录结构
目录结构
request.js
import axios from 'axios'
import {Toast,Indicator} from 'mint-ui';
function checkStatus (response) {
if (response.status === 200) {
return response
} else {
console.log(response)
}
}
// 共通请求头部
function requestHeader (opt) {
let myHeaders = opt.headers;
if (!myHeaders) {
myHeaders = {};
myHeaders['Content-Type'] = "application/json;charset=utf-8";
}
myHeaders['authorization'] = sessionStorage.getItem('authorization');
return myHeaders
}
//封装的请求体
export function request (options) {
return axios({
method: options.method,
url: options.url,
data: options.data,
params:options.params,
headers: requestHeader(options),
})
.then(checkStatus)
.then(res => {
if (options.method.toUpperCase() === 'HEAD') {
return {success: true}
} else {
if(res.status === 200){
return res.data
}else{
Toast(res.statusText)
}
}
}).catch(function (err){
if (options.method.toUpperCase() === 'HEAD') {
return {success: false}
} else {
Toast("后台处理发生异常，请稍后重试");
}
});
}这个文件是对axios的请求的封装，上面的注释写的很明白了，这里不做过多的注释。
Constants.js
export default {
// host_login:'http://www.crowncrystalhotel.com:9519', //线下模拟登陆的接口ip
// host_submit:'http://47.98.113.173:9104', //线下的打扫任务
host_login:'http://47.98.113.173:9022', //线上模拟登陆的接口ip
host_submit:'http://service.crowncrystalhotel.com',//线上的公众号的打扫任务
}这个文件是统一配置域名信息，其实这个域名我们一般只有一个，那么这里就直接写一个就可以了，只是我的项目导致的，我这里会有很多的域名，因为后端比较多，服务都不一样，所以这里大家根据情况自己写适合自己的代码。
Config.js
module.exports = {
api : {
"clean_employee_login":'/v1/common/employee/login', //做授权，模拟登陆
"clean_task_api" : '/v1/room_service/add_sweep/', //打扫的接口
},
roles: {
},
authors: {
}
};这里的文件是接口的名字，一般来说是一个域名对应很多的接口的名字，所以不管上一个文件里面是不是多个的，这里一般都不会是一个文件，因为一个项目不会只有一个接口，这里不做赘述，自己看一下文件的写法就行了。
vue文件引用
import data from '../../utils/date'; //引入时间格式化js
import {api} from '../../utils/Config' //引入接口配置文件
import {request} from '../../utils/request' //引入封装的接口
import Constants from '../../utils/Constants' //引入封装的接口ip
import {Toast,Indicator} from 'mint-ui'; //安装提示信息
import md5 from 'js-md5';//引入需要加密的MD5js
export default {
data() {
return {
clean_time : '', //绑定时间
clean_new_Time: "", //绑定的选择的时间
clean_Room: "", //绑定房间号
clean_new_Room: "", //绑定的选择的房间号
isShowClean_Room: false, //是否显示房间号蒙层
authorization : '',//模拟登陆的授权信息
homeCodeList: [{
flex: 1,
values: ['8501', '8502', '8503', '8504', '8505', '8506', '8507', '8508'],
className: 'homeCode',
textAlign: 'center'
}],
}
},
created(){
/**
* @simulation_login 模拟登陆拿授权信息
*/
let that = this;
//that.simulation_login;
this.simulation_login();
console.info('passing....');
},
methods: {
/**
* @homeCloseClick 点击选择房间号
*/
homeCloseClick() {
this.isShowClean_Room = true;
console.log("选择房间号")
},
/**
* @timeCloseClick 点击选择时间
*/
timeCloseClick() {
this.clean_new_Time = new Date(); //将时间重置为当前的时间
this.$refs.picker.open(); //打开时间选择器
this.isShowHome_Time = true;
console.log("选择时间");
},
/**
* @onValuesChange 选择选项的函数
* @param values 被选择的选项
*/
onValuesChange(values) {
console.log(values.values[0]);
this.clean_new_Room = values.values[0];//将选择的数据给homeNewCode
},
/**
* @clean_RoomCancel 点击房间号的取消
*/
clean_RoomCancel() {
this.clean_new_Room = this.clean_Room;
this.isShowClean_Room = false;
},
/**
* @clean_RoomConfirm 点击房间号确定
*/
clean_RoomConfirm() {
this.clean_Room = this.clean_new_Room;
this.isShowClean_Room = false;
},
/**
* @select_Time 选择时间
*/
select_Time(){
this.isShowHome_Time = false;
console.info(this.clean_new_Time);
this.clean_time = this.clean_new_Time.format('yyyy-MM-dd HH:mm:ss'); //将时间格式化
},
/**
* @confirm_clean 点击确认打扫
* @Constants.host_submit 提交的接口
*/
confirm_clean(){
if(this.clean_Room && this.clean_time){
request({
method : 'post',
url : Constants.host_submit + api.clean_task_api, //发送提交打扫的请求
data : {
room_no : this.clean_Room,
sweep_type : 0,
sweep_time : this.clean_time,
card_id : null,
remark : '',
},
/*headers : {
authorization : this.authorization
}*/
}).then((res)=>{
console.info(res);
if(res.message === 'success'){
Toast({
message: '操作成功',
iconClass: 'mint-toast-icon mintui mintui-success'
});
}else{
let instance = Toast(res.message);
setTimeout(() => {
instance.close();
}, 2000);
}
}).catch((err)=>{
let instance = Toast('系统异常');
setTimeout(() => {
instance.close();
}, 2000);
console.error(err);
});
}else{
let instance = Toast('请完善信息');
setTimeout(() => {
instance.close();
}, 2000);
}
},
/**
* @simulation_login 模拟登陆获取授权
*/
simulation_login() {
let username = 'hotel_root';
let pwd = '123456';
let code = 'SHJKJD-HND';
let shift_name = 'morning_shift';
request({
method : 'post',
url : Constants.host_login + api.clean_employee_login,
data : {
code: code,
user_name: username,
password: md5(pwd),
shift_name : shift_name
}
}).then((res)=>{
console.info(res);
if(res.message === 'success'){
//this.authorization = res.new_authorization;
sessionStorage.setItem('authorization',res.new_authorization); //将最新的授权信心放到缓存中
} else{
console.error('模拟登陆失败');
}
}).catch((err)=>{
console.error(err);
})
},
}
}这里需要使用的地方直接就可以import引入，当然您也可以全局引用，都是可以的，这里只是写怎么使用的，不做过多的赘述，只是一个例子。
到这里基本就结束了，封装一个请求不难，熟悉这个过程就好了。我也是在别人的帮助下实现的，多写写就好了，感谢一路以来帮助我的人。vue的路上祝我和朋友们一路顺风。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-08-06 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读