最详细的axios+vuex请求封装以及使用实例
极力推荐的axios+vuex的二次封装以及使用方式,
目录
一、Vux相关介绍
1.Vuex基本概念
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。在单页面应用中可保证各个组件之间的相互通信。
1.下载安装vuex插件
npm install vuex
2.在项目目录里面创建一个专门的store文件夹用来存放vuex对应的操作
说明:
- 创建一个store文件这样的好处是,当我们的项目比较大,请求后端接口比较多的时候,后端可能会采用微服务的方式进行,搭建,我们前端可以根据后端的服务划分,来创建不同的数据请求仓库,这样会使得我们的项目在后期维护起来特别方便。
3.store文件夹中创建indx.js文件,开始封装index.js文件
index文件可以引入每个功能模块对应的vuex文件,可以根据项目模块的划分创建对应的数据仓库,以及请求文件,我们利用import和export 来进行不同模块的引入,导出,这样会使我们的项目更符合模块化。index.js文件中主要是引入其他模块的数据请求文件,类似于一个所有数据请求的父站点,根据你页面发出的请求地址,在去找对应的子站点。
比如这个文件中引入了两个请求模块,一个是登录的login模块,一个是用来存放项目字典数据的dictionary模块
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
import login from './login'//登录vuex模块文件
import dictionary from './dictionary'//字典vuex模块文件
const store = new Vuex.Store({
modules: {
login,
dictionary
}
});
export default store
4.main.js文件引入store并使用(默认会去引入index.js文件)
封装完成index之后在项目的全局文件main.js中引入store,并且,要在Vue实例中使用store
import store from './store'
new Vue({
el: '#app',
store
)}
二、Axios相关介绍
1.axios基本概念
axios是在Vue项目中最常用进行前后端数据请求的一种方式,
1.下载安装axios
npm install axios
2.创建对应axios文件夹,用来对axios进行二次封装(创建apiConfig和index文件)
说明:
-
apiConfig.js中主要用来同意封装后端接口地址,方便修改,最好设置本地,测试,正式,三种环境,这样的话便于我们日后维护,开发。
-
index.js文件主要是对请求的封装,包括请求的封装和响应的封账,以及对后端抛出常见错误码的拦截
3.apiConfig.js文件
const apiConfig = {
apiFun() {
let baseUrl = {};
switch (1) {
case 1:
baseUrl = {
//本地
api:''
};
break;
case 2:
baseUrl = {
// 线上测试环境
api: '',
};
break;
case 3:
baseUrl = {
// 线上正式环境
api: '',
};
break;
default:
break;
}
return baseUrl
}
};
export default apiConfig.apiFun()
4.index.js拦截二次封装
import Vue from 'vue';
import axios from "axios";
import store from "../store"
import apiConfig from "./apiConfig";
import $api from '../axios/apiConfig'//接口
//接口
for (let k in apiConfig) {
Vue.prototype[k] = apiConfig[k];
}
const Axios = axios.create({
timeout: 20000,
responseType: "json",
headers: {
'Content-Type': 'application/json',
}
});
let loadAll;
Axios.interceptors.request.use(
config => {
let userInfo=JSON.parse(window.localStorage.getItem('userInfo')||'{}');
添加token
if (userInfo&&userInfo.accessToken) {
config.headers['Authorization'] = userInfo.accessToken;
}else{
window.localStorage.clear()
}
if (config.mask !== false) {
loadAll = Loading.service({
lock: true,
text: '加载中',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
}
return config;
},
err => {
return Promise.reject(err);
});
Axios.interceptors.response.use(
response => {
setTimeout(()=> {
loadAll.close();
}, 500);
if (response.data.code === 200) {
//操作成功返回数据
return response.data;
}
5.main.js中引入axios并使用
import Axios from './axios'
(会默认去找axios文件下的index.js文件)
Vue.prototype.axios = Axios;
(在Vue的原型中增加axios)
三、Axios+Vuex获取后端数据
1.实例演示使用Vuex+Axios获取后端数据
说明:
1.通过简单的模拟用户登录过程中的操作,向大家展示Vuex和axios的正确使用姿势
假如在a页面调用登录接口
login()
this.logInfo = {
userName:'za',
password:'123'
}
//vuex利用dispacth调用actions中的请求,完成一次前端和服务端的数据通信
this.$store.dispatch("login/adminLogin", this.logInfo).then(res => {
if (res) {
this.$router.push({
path: "/"
});
}
});
2.Vuex中对应的login.js文件请求后端
import $api from '../axios/apiConfig'//接口
import axios from '../axios'//请求
const module = {
namespaced:true,
state:{},
mutations:{},
actions:{
adminLogin(context, data) {
通过封装的promise来进行后端请求
return new Promise((resolve) => {
axios.post($api.api + '/login', data).then(res => {
if (res) {
拿到数据之后返回给前端
resolve(res.data)
}
})
})
}
}
}
export default module //导出模块
四、异步操Vuex
1.实例
假如你在a页面中需要操作仓库,那么你只需要找到store中对应的文件,比如当你登录成功之后想将用户的信息存储在vuex中
登录成功之后你可以通过this.$store.commit来操作对应仓库中的mutations,mutations可以改变vuex中的state
this.$store.commit('login/setUserName',this.userName)
this.$store.commit('login/setToken',this.Token)
**
对应的login仓库模块中需要有setToken方法和setUserName方法(注意vuex只有mutations可以操作state)
**
const module = {
namespaced:true,
state:{
userInfo:{
userName:'',
Token:''
}
},
mutations:{
setUserName(state,val){
state.userInfo.userName = val
},
setToken(state,val){
state.userInfo.Token = val
}
},
}
这样信息就存在了vuex中,我们就可以在项目中的所有组件中使用了,如何使用,在使用的时候我们可以借助,Vue的一个计算属性,这样的话能优化我们的性能,只有当Vuex缓存变化的时候才会执行。
在页面中使用this.$store.state.login.userName,可以获取到state中的对应数据。
通过this.getuserName就可以获取到vuex中的数据
computed: {
getuserName() {
return (
this.$store.state.login.userName
);
}
}
更多推荐
所有评论(0)