vue项目axios封装

vue项目axios封装

一、下载 axios

npm install axios -S

二、引用

一般会在项目的src目录中，新建一个request文件夹，然后在里面新建一个http.js和一个api.js文件。http.js文件用来封装我们的axios，api.js用来统一管理我们的接口

三、引用（http.js文件）

import axios from 'axios'; // 引入axios
import QS from 'qs'; // 引入qs模块，用来序列化post类型的数据，后面会提到
import router from '../router';
import store from './../store/index'; (四、说明此问题)

// 创建 axios 实例
const service = axios.create({
baseURL: process.env.NODE_ENV === 'production' ? 'http://192.168.0.151:8089/api/v2' : 'http://192.168.0.151:8089/api/v2', // api base_url
timeout: 60000 // 请求超时时间
})

// 请求超时时间
service.defaults.timeout = 10000;

// post请求头
service.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

// 请求拦截器
service.interceptors.request.use(
config => {
// 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
// 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
const token = store.state.token;
token && (config.headers.Authorization = token);
return config;
},
error => {
return Promise.error(error);
})
// 响应拦截器
service.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:
router.replace({
path: '/login',
query: { redirect: router.currentRoute.fullPath }
});
break;
// 403 token过期
// 登录过期对用户进行提示
// 清除本地token和清空vuex中token对象
// 跳转登录页面
case 403:
// 消息弹窗，可自己封装，可引用（五、单独说明）
this.$my_message({
content: '登录过期，请重新登录',
time: 1000,
type: 'info', // info/success/warning/error，默认info
hasClose: true
});
// 清除token
localStorage.removeItem('token');
store.commit('loginSuccess', null);
// 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
setTimeout(() => {
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
}, 1000);
break;
// 404请求不存在
case 404:
this.$my_message({
content: '网络请求不存在',
tie: 1500,
hasClose: true
});
break;
// 其他错误，直接抛出错误提示
default:
this.$my_message({
content: error.response.data.message,
time: 1500,
hasClose: true
});
}
return Promise.reject(error.response);
}
}
);
export {
service as axios
}

四、vuex引入

npm install vuex --save

1、新建一个store文件夹（这个不是必须的），并在文件夹下新建index.js文件，文件中引入我们的vue和vuex。在一个模块化的打包系统中，您必通过 Vue.use() 进行引用：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
})
代码片

这步操作结束，vuex就算引用成功了。

2.可以在main.js文件中在实例化 Vue对象时加入 store 对象，这可以把store的实例注入所有的子组件中，如下图所示：

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})

五、消息提示窗

1、在components里创建组件message文件，包含index.js和Message.vue文件
如图Message.vue

<template>
<transition name="fade">
<div class="message" :class="type" v-if="visible">
<i class="icon-type iconfont" :class="'icon-'+type"></i>
<div class="content">{{content}}
<i v-if="hasClose" class="btn-close iconfont icon-close"     @click="visible=false"></i>
</div>
</div>
</transition>
</template>
<script>
export default {
name: "MyMessage",
data() {
return {
content: '',
time: 3000,
visible: false,
type:'info',//'success','warning','error'
hasClose:false,
}
},
mounted() {
this.close()
},
methods: {
close() {
window.setTimeout(() =>{
this.visible = false
}, this.time);
}
}
}
</script>
<style scoped>
.fade-enter-active,
.fade-leave-active {
transition: opacity .3s;
}

.fade-enter,
.fade-leave-to {
opacity: 0
}
.message {
position: fixed;
top: 40px;
text-align: center;
left: 50%;
transform: translateX(-50%);
min-width: 400px;
padding: 10px 20px;
font-size: 14px;
line-height: 1.4;
border-radius: 4px;
z-index: 1000;
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
color: red;
/*  // &.info
// &.success
// &.error
// &.warning */
}

如图index.js

import Vue from 'vue'
import Message from './Message.vue'

const messageBox = Vue.extend(Message)
Message.install = function (options, type) {
if (options === undefined || options === null) {
options = {
content: ''
}
} else if (typeof options === 'string' || typeof options === 'number') {
options = {
content: options
}
if (type != undefined && options != null) {
options.type = type;
}
}
let instance = new messageBox({
data: options
}).$mount()

document.body.appendChild(instance.$el)
Vue.nextTick(() => {
instance.visible = true
})
}

export default Message

2、main.js全局引入组件

import Message from '@/components/message'
Vue.prototype.$my_message = Message.install;