前言
局部刷新技术技术的出现与应用大大推动了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);
}