axios的封装
先安装axios
npm install axios再安装vantUI组件库
npm install vant然后在src下新建一个文件夹api专门用来存放接口相关的文件和配置，目录结构如下：
src
├── api
├── index.js #api接口的出口
├── config.js #管理接口域名
└── article.js #接口模块
├── assets
├── css
├── fonts
└── images
├── components
├── router
└── index.js
├── store
└── index.js
├── utils #工具文件夹
└── http.js #封装axios
├── views
├── App.vue
└── main.js下面是请求和响应拦截等相关配置http.js
import axios from 'axios'
import router from '../router'
import store from '../store'
import { Toast } from 'vant'
import 'vant/lib/index.css';
/**
* 提示函数
* 显示一秒后关闭、禁止点击蒙层
*/
const tip = msg => {
Toast({
message: msg,
duration: 1000,
forbidClick: true
})
}
/**
* 跳转登录页
* 携带当前页面路由，以其在登录页面完成登录后返回当前页面
*/
const toLogin = () => {
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
})
}
/**
* 请求失败后的错误统一处理
* @param {Number} status 请求失败的状态码
*/
const errorHandle = (status, other='') => {
// 状态码判断
switch (status) {
// 401: 未登录状态，跳转登录页
case 401:
toLogin();
break;
// 403 token过期，清除token并跳转登录页
case 403:
tip('登录过期，请重新登录');
localStorage.removeItem('token');
store.commit('login', null);
setTimeout(() => {
toLogin();
}, 1000);
break;
// 404请求不存在
case 404:
tip('请求的资源不存在');
break;
default:
console.log(other);
}
}
// 创建axios实例
var instance = axios.create({
timeout: 1000 * 12
})
// 设置post请求头
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
/**
* 请求拦截器
* 每次请求前，如果存在token则在请求头中携带token
*/
instance.interceptors.request.use(
config => {
// 登录流程控制中，根据本地是否存在token判断用户的登录情况
// 但是即使token存在，也有可能token是过期的，所以在每次的请求头中携带token
// 后台根据携带的token判断用户的登录情况，并返回给我们对应的状态码
// 而后我们可以在响应拦截器中，根据状态码进行一些统一的操作。
const token = store.state.token;
token && (config.headers.Authorization = token);
return config;
},
error => Promise.error(error)
)
// 响应拦截器
instance.interceptors.response.use(
// 请求成功
res => res.status === 200 ? Promise.resolve(res) : Promise.reject(res),
// 请求失败
error => {
const { response } = error;
if (response) {
// 请求已发出，但是不在2xx的范围
errorHandle(response.status, response.data.message);
return Promise.reject(response);
}else {
// 处理断网的情况
// eg:请求超时或断网时，更新state的network状态
// network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏
// 关于断网组件中的刷新重新获取数据，会在断网组件中说明
store.commit('changeNetwork', false);
}
}
)
export default instance;使用
post方法必须要使用对提交从参数对象进行序列化的操作，所以这里我们通过node的qs模块来序列化我们的参数。
npm install qs接口域名的管理config.js
/**
* 接口域名的管理
*/
const config = {
apiUrl: 'https://www.domain.com/api/v1',
searchUrl: 'https://search.domain.com/api/v1'
}
export default config;接口模块article.js
/**
* article模块接口列表
*/
import config from './config'
import axios from '@/utils/http'
import qs from 'qs'
const article = {
// 新闻列表
articleList() {
return axios.get(`${config.apiUrl}/topics`);
},
// 新闻详情
articleDetail(id, params) {
return axios.get(`${config.apiUrl}/topics/${id}`, { params });
},
// post提交
login(params) {
return axios.post(`${config.apiUrl}/login`, qs.stringify(params));
}
}
export default article;api接口的出口index.js
/**
* api接口的统一出口
*/
import article from '@/api/article'; // 文章模块接口
// 其他模块的接口……
// 导出接口
export default {
article,
// ……
}最后，为了方便api的调用，我们需要将其挂载到vue的原型上。在main.js中：
import Vue from 'vue'
import App from './App.vue'
import router from './router' // 导入路由文件
import store from './store' // 导入vuex文件
import api from './api' // 导入api接口
Vue.config.productionTip = false
Vue.prototype.$api = api // 将api挂载到vue的原型上
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')然后我们可以在页面中这样调用接口 Home.vue
<script>
export default {
name: "Home",
methods: {
loadData(){
let sendData = {
page: 1,
pageSize: 20
};
this.$api.article.testList(sendData).then(res=>{
console.log(res);
}).catch(err=>{
console.log(err);
})
},
postData(){
let sendData = {
username: 'bestthink',
password: '123456'
};
this.$api.article.login(sendData).then(res=>{
console.log(res);
}).catch(err=>{
console.log(err);
})
}
}
};
</script>处理断网的情况 App.vue
<template>
<div id="app">
<div v-if="!network">
<h1>网络出现了点问题...</h1>
<button @click="onRefresh">刷新</button>
</div>
<router-view />
</div>
</template>
<script>
import { mapState } from "vuex";
export default {
name: "App",
computed: {
...mapState(["network"]),
},
methods: {
// 通过跳转一个空页面再返回的方式来实现刷新当前页面数据的目的
onRefresh() {
this.$router.replace("/refresh");
}
}
};
</script>通过跳转Refresh页面然后立即返回的方式来实现重新获取数据的操作,需要新建一个Refresh.vue页面，并在其beforeRouteEnter钩子中再返回当前页面。
<template>
<div></div>
</template>
<script>
export default {
beforeRouteEnter(to, from, next) {
next((vm) => {
vm.$router.replace(from.fullPath);
});
}
};
</script>vuex中存储网络、登录等状态
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
network: true, //网络状态 false 断网
hasLogin: false, //登录状态 false 未登录
token: '' //登录后存储token
},
mutations: {
//更新网络状态
changeNetwork(state, value) {
state.network = value;
},
//登录
login(state, provider) {
state.hasLogin = true;
state.token = provider.token;
localStorage.setItem('token', provider.token);
},
//退出登录
logout(state) {
state.hasLogin = false;
state.token = '';
localStorage.removeItem('token');
}
},
actions: {
},
modules: {
}
})
