vue项目中对axios的封装和API接口管理详解
在我们做vue项目时，使用axios请求数据已经是司空见惯了，它是基于promise的http库，可以运行在浏览器和nodejs中，其实他有很多的优秀特性，例如，请求拦截，响应拦截，以及取消请求，json转换，客户端防御XSRF等，所以尤大大直接推荐我们使用axios库。
我们先看axios如何封装，首先我在src下创建requestjs文件，这个文件里面我主要对axios进行封装，然后是methodjs，这个文件主要对post和get方法进行封装，再有一个apijs文件，这个文件存放后端的所有接口，也就是说，公共管理接口，在创建一个localjs文件，这个文件对localstorage进行封装，这些写完之后我们再写一个tokenjs，这个文件管理token，
先来看看requestjs，在这里我只对axios的请求以及他的响应进行了拦截，直接来看代码：
import axios from 'axios' //引入axios
import { GETTOKEN } from './token' //引入获取token的方法
const instance = axios.create({
timeout:15000, //开始创建axios的请求时间
// baseURL:'http://localhost:9005' //这个默认的url可以不去写
});
//请求拦截
instance.interceptors.request.use( //开始对请求进行拦截
config => {
if(GETTOKEN()){ //判断是否存在token，如果存在我们将其在头部进行发送
config.headers = { //headers的值
'Content-Type':'application/x-www-form-urlencoded',
'Authorization': GETTOKEN()
};
} //我们将参数返回出来
return config
},error =>{
Promise.reject(error) //如果错误，我们则使用Promise异步方法将error输出
}
);
//响应拦截
instance.interceptors.response.use(
(response) => { //response的拦截
if (response.data && response.data.code && response.data.code !== 200) { //首先要判断他的值以及他的code值，如果是200,等真确的码则将response返回出来，如果是错误的就使用Promise方法将错误输出
Promise.reject(error)
}
return response
}, (error) => {
return Promise.reject(error) //将错误信息返回给前端页面
}
);
export default instance //导出所有axios的定义接下来看methodjs，针对他的post和get方法的封装：
/**
* 整体导出
* 我们在使用promise时，在一个promise链中，只要任何一个promise被reject，promise链就被破坏了，reject之后的promise都不会再执行，而是直接调用.catch方法，通过 .catch 能够清楚的判断出promise链在哪个环节出了问题
*/
export default {
//异步加载，返回一个promise对象，
GETMETHOD(url,param){
return new Promise((resolve, reject)=>{
request({
url:url,
method:'GET',
params:param
}).then((res) => {
resolve(res) //使用resolve将结果输出，返回promise对象，
}).catch((error) => {
reject(error) //使用reject，promise不执行，调用catch方法。将错误信息输出前端页面。
})
})
},
POSTMETHOD(url, param) {
return new Promise((resolve, reject) => {
request({
url: url,
method: 'POST',
params: param
}).then((res) => {
resolve(res)
}).then((error) => {
reject(error)
})
})
}
}现在我们来看apijs，这个里面是对接口的管理，写法很简单，就是将接口写在这里面：
/**
* url地址的封装
*/
export default {
LOGINURL:'/userApi/login'
}我们再来看localjs，对localstorage进行封装，在这里，我封装了他常用的四个方法，获取、存储、删除、清空是个方法：
export default {
/**
* 在localStorage中没有设置失效时间的，只能设置key和value
* 存储
* @param KEY
* @param VALUE
* @param TIME
*/
set(KEY,VALUE,TIME) {
if (typeof KEY !== 'string') { //判断key值是否是字符串
console.log("*STORAGE ERROR* key必须是字符串");
return;
}
if (TIME) { //判断是否传入时间
if (typeof TIME !== 'number') { //判断key值是否是数字字符串
console.log("*STORAGE ERROR* time必须是数字");
} else {
TIME = parseInt(TIME) + (new Date()).getTime();
}
} else {
TIME = null;
}
var setValue = { //因为这个没法设置时间，所以在这里我们存value时，将value存为对象
value: JSON.stringify(VALUE),
time: TIME
};
localStorage.setItem(KEY, JSON.stringify(setValue)); //转成字符串的对象
},
/**
* 获取
* @param KEY
* @returns {*}
*/
get(KEY) {//先获取存储的值
var getValue = JSON.parse(localStorage.getItem(KEY));
if(!getValue){//判断是否有值
return null
}
if (getValue.time && getValue.time < (new Date()).getTime()) { //判断时间等于或者小于现在时间时删除localStorage，并将其置为null
localStorage.remove(KEY);
return null;
} else {
return JSON.parse(getValue.value) //反之，这就将value值return出来
}
},
/**
* 删除
* @param KEY
*/
remove(KEY) {//使用localStorage方法，直接删除
localStorage.removeItem(KEY);
},
/**
* 清空
*/
clear() {//使用localStorage方法，直接清空
localStorage.clear();
}
}最后我们看看tokenjs，也就是token的存储，调用localStorage封装的方法就可以：
/**
* token的封装
*/
// import cookie from 'js-cookie'
import localStorage from './local'
const LOGINTOKEN = 'USERTOKEN' //定义key值
export function GETTOKEN(){ //获取token
localStorage.get(LOGINTOKEN)
}
export function SETTOKEN(val,time) { //存储token携带时间
localStorage.set(LOGINTOKEN,val, { expires: time });
}
export function REMOVETOKEN() { //删除token
localStorage.remove(LOGINTOKEN)
}axios的封装就到这里，可以参考该地址：https://github.com/jiab7413/webpack-axios，pack为webpack服务配置，server为后台配置，axios在pack文件下的src下
【推荐】
前端共享博客 http://sharedblog.cn/
网站建站知识 http://iqzhan.com/category-10.html