项目应用
http.js 中 axios 封装，先直接贴代码：
import axios from 'axios';
import store from '../store' //vuex
import {ToastError} from 'assets/js/toast.js' //提示语，可自行封装
axios.defaults.timeout = 5000; //超时时间设置
axios.defaults.withCredentials = true; //true允许跨域
//Content-Type 响应头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
if (process.env.NODE_ENV === 'production') {
/*第二层if，根据.env文件中的VUE_APP_FLAG判断是生产环境还是测试环境*/
if (process.env.VUE_APP_FLAG === 'pro') {
//production 生产环境
axios.defaults.baseURL = 'https://www.xxx.com';
} else {
//test 测试环境
axios.defaults.baseURL = '';
}
} else {
//dev 开发环境
axios.defaults.baseURL = 'http://www.xxx1.com';
}
// 响应拦截器
axios.interceptors.response.use(
response => {
// 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
// 否则的话抛出错误
if (response.status === 200) {
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
},
// 服务器状态码不是2开头的的情况
error => {
if (error.response.status) {
switch (error.response.status) {
// 401: 未登录
case 401:
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
break;
case 403:
ToastError('管理员权限已修改请重新登录')
// 清除sessionStorage
store.commit("qiut")
// 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
setTimeout(() => {
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
}, 1000);
break;
// 404请求不存在
case 404:
ToastError('请求页面飞到火星去了')
break;
}
return Promise.reject(error.response);
}
});
/**
* 封装get方法
* @param url
* @param data
* @returns {Promise}
*/
export function get(url, params = {}) {
return new Promise((resolve, reject) => {
axios.get(url, {
params: params
})
.then(response => {
resolve(response.data);
})
.catch(err => {
reject(err)
})
})
}
/**
* 封装post请求
* @param url
* @param data
* @returns {Promise}
*/
export function post(url, data = {}) {
return new Promise((resolve, reject) => {
axios.post(url, data)
.then(response => {
resolve(response.data);
}, err => {
reject(err)
})
})
}
/**
* 封装delete请求
* @param url
* @param data
* @returns {Promise}
*/
export function deletes(url, data = {}) {
return new Promise((resolve, reject) => {
axios.delete(url, data)
.then(response => {
resolve(response.data);
}, err => {
reject(err)
})
})
}
/**
* 封装put请求
* @param url
* @param data
* @returns {Promise}
*/
export function put(url, data = {}) {
return new Promise((resolve, reject) => {
axios.put(url, data)
.then(response => {
resolve(response.data);
}, err => {
reject(err)
})
})
}
这里新建了一个api文件夹，里面有一个index.js来管理接口
//引用上面的http.js文件
import {get, post, put, deletes} from './http'
//登录接口
export const getLogin = (fromData)=> post('user/login',fromData)
//退出登录接口
export const getLoginOut = ()=> get('user/logout')
//图片上传接口 参数 ${type},fileData
export const SaveImg = (type,fileData)=> post(`goods/save_img/${type}`,fileData)
在登录页 login.vue 中应用 axios 的封装：
<template>
<div class="login-big-bg">
<div class="login-content-box">
<div class="login-box">
<el-alert :title="errorTip" :closable="false" v-show="errorTip" type="error" show-icon></el-alert>
<div class="label-item">
<i class="user-icon"></i>
<input @keyup.enter="Login" class="input" type="text" placeholder="请输入用户名" v-model.trim="loginForm.username" />
</div>
<div class="label-item">
<i class="password-icon"></i>
<input @keyup.enter="Login" class="input" type="password" placeholder="请输入密码" v-model.trim="loginForm.password" />
</div>
<el-button type="primary" class="login-btn" @click="Login()">登录</el-button>
</div>
</div>
</div>
</template>
<script>
import qs from "qs"; // qs库可以表单序列化提交
import { Message } from "element-ui"; //vue element-ui 框架
import { getLogin } from "api"; // 调用api 登录接口
export default {
name: "login",
data() {
return {
loginForm: {
username: "",
password: ""
},
errorTip: ""
};
},
methods: {
Login() {
if (this.loginForm.username === "") {
this.errorTip = "账号不能为空";
} else if (this.loginForm.password === "") {
this.errorTip = "密码不能为空";
} else {
let fromData = decodeURI(qs.stringify(this.loginForm));
getLogin(fromData)
.then(res => {
if (res.success) {
this.$store.commit("login", res.data); //把登录返回的数据存在vuex里
this.$router.push("/goods/add"); //登录成功后跳转页面
this.loginForm.username='';
this.loginForm.password='';
} else {
this.errorTip = res.data.msg;
}
})
.catch(error => {
this.errorTip = error;
});
}
}
}
};
</script>
<style lang="less" scoped>
//....写自己的样式
</style>
