网络请求的封装方法图例：
import axios from 'axios';// 引入axios
//环境切换
axios.defaults.baseURL = 'http://10.*.183.25:2023*/'
// 请求超时 请求头 10s
// axios.defaults.timeout = 30000
axios.defaults.headers.post['Content-Type'] = 'application/JSON';
// 请求拦截器
axios.interceptors.request.use(
config => {
// 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
// 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
let user = sessionStorage.getItem("user");
if (user != null) {
let usertoken = JSON.parse(sessionStorage.getItem("user"));
config.headers.Authorization = usertoken.token;
}
return config;
},
error => {
return Promise.error(error);
})
// 响应拦截器
axios.interceptors.response.use(
response => {
if (response.status === 200) {
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
},
// 服务器状态码不是200的情况
error => {
if (error.response.status) {
switch (error.response.status) {
// 401: 未登录
case 401:
console.log("未登录")
break;
case 403:
console.log("登录过期，请重新登录")
break;
// 404请求不存在
case 404:
console.log("地址不存在")
break;
// 其他错误，直接抛出错误提示
default:
console.log('其他错误', error.response.data.message)
}
return Promise.reject(error.response);
}
}
);
/**
* get方法，对应get请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export 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 [请求时携带的参数]
*/
export function post(url, params) {
return new Promise((resolve, reject) => {
axios.post(url, params)
.then(res => {
resolve(res.data);
})
.catch(err => {
reject(err.data)
})
});
}
/**
* 封装patch请求
* @param url
* @param params
* @returns {Promise}
*/
export function patch(url, params) {
return new Promise((resolve, reject) => {
axios.patch(url, params)
.then(response => {
resolve(response.data);
}, err => {
reject(err)
})
})
}
/**
* put 请求
* @param url
* @param params
*/
export function put(url, params) {
return new Promise((resolve, reject) => {
axios.put(url, params)
.then(response => {
resolve(response.data);
}, err => {
reject(err)
})
})
}
创建统一的接口名称调用
// 刚刚封装的axios
import { post } from './axios';
// users接口
export const login = params => post('/system/login', params);//登录
/**
*
* @param {用户管理} params
*/
export const syslist = params => post('/sys/user/list', params);//用户管理【用户列表】
export const resetpassword = params => post('/sys/user/resetpassword', params);//用户管理【重置密码】
export const deleteuser = params => post('/sys/user/delete', params);//用户管理【删除用户】
export const Adduser = params => post('/sys/user/add ', params);//用户管理【添加用户】
export const checkusername = params => post('/sys/user/checkusername', params);//用户管理【验证用户名是否已存在】
export const findbyid = params => post('/sys/user/findbyid', params);//用户管理【根据id查询用户】
export const update = params => post('/sys/user/update', params);//用户管理【修改用户信息】
export const updatepassword = params => post('/sys/user/updatepassword', params);//用户管理【修改用户信息】
/**
* @param {角色管理} params
*/
export const listall = params => post('/sys/role/listall', params);//角色管理【角色列表】
export const roleadd = params => post('/sys/role/add ', params);//角色管理【添加角色】
export const roledelete = params => post('/sys/role/delete ', params);//角色管理【删除角色】
export const rolefindbyid = params => post('/sys/role/findbyid ', params);//角色管理【根据id查询角色】
export const roleupdate = params => post('/sys/role/update', params);//角色管理【更新角色】
export const grantrole = params => post('/sys/role/grantrole', params);//角色管理【给用户设置角色】
export const updatemenus = params => post('/sys/menu/updatemenus', params);//角色管理【设置角色的权限信息】
export const rolemenus = params => post('/sys/menu/menus', params);//角色管理【设置角色的权限信息】
/**
* @param {菜单管理} params
*/
export const listpage = params => post('/sys/menu/listpage', params);//菜单管理【菜单列表】
export const treelist = params => post('/sys/menu/treelist', params);//菜单管理【查询菜单权限树】
export const menuadd = params => post('/sys/menu/add', params);//菜单管理【添加菜单】
export const menudel = params => post('/sys/menu/del', params);//菜单管理【删除菜单】
export const menuupdate = params => post('/sys/menu/update', params);//菜单管理【更新菜单】
export const menufindbyid = params => post('/sys/menu/findbyid', params);//菜单管理【根据id获取菜单】
export const magictrue = params => post('/digitaltwin/magic/true', params);//孪生模拟 模拟数据
export const magicfalse = params => post('/digitaltwin/magic/false', params);//孪生模拟 真实数据
export const magic = params => post('/digitaltwin/magic', params);//孪生模拟 查看当前状态
export const restart = params => post('/base/restart', params);//孪生模拟 重启后台服务
export const SZLSstatus = params => post('/base/status', params);//孪生模拟 查询后台服务器状态
在页面中的调用
<template>
<div class="Userbox">
<el-button type="primary" @click="magicbtn">查看状态</el-button>
<el-button type="warning" @click="magictruebtn">模拟数据</el-button>
<el-button type="success" @click="magicfalsebtn">真实数据</el-button>
<br />
<br />
<h1>当前数据状态：{{ type }}</h1>
<br />
<el-button type="primary" @click="statusfunc">查询后台服务器状态</el-button>
<el-button type="danger" @click="Restartfunc">重启后台服务</el-button>
<br />
<h2>服务器当前状态：{{ statusok }}</h2>
</div>
</template>
<script>
import { magictrue, magicfalse, magic, restart, SZLSstatus } from "@/utils/api";
export default {
data() {
return {
type: "",
statusok: "",
};
},
mounted() {
this.magicbtn();
this.statusfunc();
},
methods: {
//模拟数据
magictruebtn() {
magictrue({}).then((res) => {
alert("模拟数据，30秒以后数字孪生数据汇总即将生效");
this.magicbtn();
});
},
// 真实数据
magicfalsebtn() {
magicfalse({}).then((res) => {
alert("真实数据，30秒以后数字孪生数据汇总即将生效");
this.magicbtn();
});
},
//查看状态
magicbtn() {
magic({}).then((res) => {
if (res.data) {
this.type = "【当前为模拟数据】";
} else {
this.type = "【当前为真实数据】";
}
});
},
//重启UE5数字孪生后台服务
Restartfunc() {
restart({}).then((res) => {
alert("后台服务已重启");
});
},
//查看后台服务器的状态
statusfunc() {
SZLSstatus({}).then((res) => {
if (res.data == "active") {
this.statusok = "运行中";
alert("运行中");
} else if (res.data == "activating") {
this.statusok = "启动中";
alert("启动中");
} else if (res.data == "failed") {
this.statusok = "已停止";
alert("已停止");
}
});
},
},
};
</script>
<style>
.stared {
color: red;
}
.stacolor {
color: #409eff;
}
.Hemobox {
width: 100%;
height: auto;
position: relative;
}
.Usersuo {
width: 100%;
height: auto;
position: relative;
background: #ffffff;
padding: 20px;
padding-bottom: 1px;
margin-bottom: 20px;
box-sizing: border-box;
}
.Tablebox {
width: 100%;
height: auto;
position: relative;
background: #ffffff;
padding: 20px;
padding-bottom: 1px;
margin-bottom: 50px;
box-sizing: border-box;
}
.Table_a {
color: #ffffff;
text-decoration: none;
}
</style>
到此，一个简单的http网络请求封装结束
扫一扫
3611
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
