前言
局部刷新技术技术的出现与应用大大推动了web工程的成熟与发展。其中以ajax与axios最为突出，但是不管是哪种方式，我们每次发起请求都会重复对http参数进行设置，并对请求后的数据进行异常数据处理等，作为一名优秀的面向对象的软件攻城狮怎么能够容忍，所以笔者遍访各大网站与前同事、同学总结出一套简单明了的封装方式！
项目结构
如下图所示，名称为demo的演示项目
其中utils中存放的即是封装的axios组件
代码鉴赏
1、首先在store中声明baseUrl，用于存放请求路径的公共部分，同时声明一个修改公共路径的方法editBaseUrl：
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { baseUrl: 'http://127.0.0.1:8001' }, mutations: { editBaseUrl: (state, val) => { state.menus = val } }, actions: { }, modules: { } })
2、在新建的request.js文件中引入axios与store：
import axios from 'axios';
import store from '@/store';
3、声明一个axios对象：
const service = axios.create({ method: 'post',//http请求方式 baseURL: store.state.baseUrl, // 默认公用url withCredentials: true, // 跨域请求 timeout: 10000 // 请求超时时间 });
4、设置拦截器，每次发起http请求前进行拦截，并将请求秘钥注入http请求头：
service.interceptors.request.use( config => { //getToken为自定义方法，用于获取在store或cookie中的token，token为用户使用账号及密码置换的秘钥 config.headers.Authorization = getToken(); return config; }, error => { return Promise.reject(error); } )
设置拦截器，对请求的返回值进行拦截，并对返回结果进行初步处理：
service.interceptors.response.use( response => { //拿到返回数据 const res = response.data; //res结构为{code:0,data:{},mes:{}}，其中code为错误码，0为未报错，data为返回数据，mes为错误信息 if (res.code != undefined) { //请求未报错，将数据摘出并返回 if (res.code === 0) { return res.data; } //请求报错 else { //将错误信息弹窗 alert(res.msg); //特定错误码，登录超时，将前端存储在store中和cookie中的token删除并返回登录页 if (res.code === 106) { removeToken(); router.push('/'); } return Promise.reject(res.msg || 'error'); } } }, //请求未能连接成功 error => { //console.log('err' + error); // for debug alert(error.message); return Promise.reject(error); } )
5、定义输出接口：
export default service;
6、调用：
在api文件夹中定义js文件
import request from '@/utils/request'; export function getPage(data) { return request({ url: '/api/account/v1/getPage',//请求url=http://127.0.0.1:8001/api/account/v1/getPage data: data }) }
拓展
许多小伙伴在前后端分离之后会遇到这样一个问题：开发人员发布版本之后将前端项目打包发给运维同事，但是如何我们上面在设置baseUrl时直接将其写死在store中，如果后端地址发生改变，如何才能不用重新打包即可部署呢？
如上图在index.html中加入以下代码：
<script> window.config = { Host: 'http://127.0.0.1:8001/'//访问后端地址 }; </script>
并在App.vue初始化时，将该参数提交至store中即可：
mounted: function () { store.commit( "editBaseUrl", window.config.Host); }
