统一封装axios思路
1.首先在js里面引入axios,然后可以设置一些我们的baseURL,也就是我们的公共地址,以及我们请求的延迟时间
const service = axios.create({
//默认访问基地址
baseURL:`https://www.liulongbin.top:8888/api/private/v1`,
timeout:3000, //请求延迟时间
});
2.然后可以使用请求拦截和响应拦截来处理我们的数据
//请求拦截
service.interceptors.request.use(function (config) {
// 请求前处理,例如:处理请求头header
return config;
}, function (error) {
// 报错返回
return Promise.reject(error);
});
//响应拦截
service.interceptors.response.use(function (response) {
//成功返回 对状态码进行统一处理 例如:200,400,500 单独判断处理各种情况
if (response.data.data && response.data.meta) {
var { data: res, meta: { msg, status } } = response.data;
if (status === 200) {
console.log('msg::',msg)
} else {
console.log('msg::',msg)
Promise.reject(msg)
}
} else {
Message({
message:'参数有误,请检查',
type: "error"
});
}
}, function (error) {
//返回报错处理
Message({
message:'接口请求有误,请检查',
type: "error"
});
});
然后在另外一个js文件中我们封装各种请求并抛出
登陆功能的实现思路
打开项目首先展示的一个登录窗口,这个功能就是用一个form表单,输入我们的账号和密码 点击登录的时候,首先给表单添加验证事件,判断账号密码格式是否正确,然后向后台进行请求,登录成功,页面显示一个提示,登录成功,失败即显示登录失败。