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下