/* *请求响应拦截 *用于处理数据返回后的操作 */ axios.interceptors.response.use( response => { return new Promise((resolve, reject) => { //请求成功后关闭加载框 if (loading) { loading.close(); } const res = response.data; if (res.err_code === 0) { resolve(res) } else{ reject(res) } }) }, error => { console.log(error) //请求成功后关闭加载框 if (loading) { loading.close(); } //断网处理或者请求超时 if (!error.response) { //请求超时 if (error.message.includes("timeout")) { console.log("超时了"); messages("error", "请求超时，请检查互联网连接"); } else { //断网，可以展示断网组件 console.log("断网了"); messages("error", "请检查网络是否已连接"); } return; } const status = error.response.status; switch (status) { case 500: messages("error", "服务器内部错误"); break; case 404: messages( "error", "未找到远程服务器" ); break; case 401: messages("warning", "用户登陆过期，请重新登陆"); localStorage.removeItem("token"); setTimeout(() => { router.replace({ path: "/login", query: { redirect: router.currentRoute.fullPath } }); }, 1000); break; case 400: messages("error", "数据异常"); break; default: messages("error", error.response.data.message); } return Promise.reject(error); } );
5.请求相关的事情已经完成，现在开始封装get,post请求
/* *get方法，对应get请求 *@param {String} url [请求的url地址] *@param {Object} params [请求时候携带的参数] */ export function get(url, params) { return new Promise((resolve, reject) => { axios .get(url, { params }) .then(res => { resolve(res); }) .catch(err => { reject(err); }); }); } /* *post方法，对应post请求 *@param {String} url [请求的url地址] *@param {Object} params [请求时候携带的参数] */ export function post(url, params) { return new Promise((resolve, reject) => { axios .post(url, params) .then(res => { resolve(res); }) .catch(err => { reject(err); }); }); }
api.js
封装好axios的业务逻辑之后自然要开始，运用，首先引入 get以及 post方法
import {get,post} from './request';
接下来开始封装接口,并导出
//登陆 export const login=(login)=>post('/api/post/user/login',login) //上传 export const upload=(upload)=>get('/api/get/upload',upload)
那我们如何调用接口呢？以登陆页面为例。
import { login } from "@/api/api.js"; //引入login
/** * @oarma {Object} login 接口传递的参数 */ login(login) .then(res => { //成功之后要做的事情 }) .catch(err => { //出错时要做的事情 });
接口相关的逻辑已经处理完。
八、vuex引入由于vue项目中组件之间传递数据比较复杂，因此官方引入了一个全局状态管理的东东，也就是现在要说的vuex，vuex能更好的管理数据，方便组件之间的通信。
现在在store文件夹下面新建四个文件 state.js, mutations.js, getter.js, action.js。
state.js
state就是Vuex中的公共的状态, 我是将state看作是所有组件的data, 用于保存所有组件的公共数据.
const state = { token: '',//权限验证 tagsList: [], //打开的标签页个数, isCollapse: false, //侧边导航是否折叠 } export default state //导出
mutations.js
我将mutaions理解为store中的methods, mutations对象中保存着更改数据的回调函数,该函数名官方规定叫type, 第一个参数是state, 第二参数是payload, 也就是自定义的参数.改变state的值必须经过mutations
const mutations = { //保存token COMMIT_TOKEN(state, object) { state.token = object.token; }, //保存标签 TAGES_LIST(state, arr) { state.tagsList = arr; }, IS_COLLAPSE(state, bool) { state.isCollapse = bool; } } export default mutations
getter.js
我将getters属性理解为所有组件的computed属性,也就是计算属性。vuex的官方文档也是说到可以将getter理解为store的计算属性, getters的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
const getters={ //你要计算的属性 } export default getters
action.js
actions 类似于 mutations，不同在于：
1.actions提交的是mutations而不是直接变更状态
2.actions中可以包含异步操作, mutations中绝对不允许出现异步
3.actions中的回调函数的第一个参数是context, 是一个与store实例具有相同属性和方法的对象
const actions={ } export default actions
store.js
store.js是vuex模块整合文件,由于刷新页面会造成vuex数据丢失，所以这里引入了一个vuex数据持久话插件，将state里面的数据保存到localstorage。
安装 vuex-persistedstate
npm install vuex-persistedstate --save