vue中axios的封装与使用

vue中现在的请求数据大多数人都是使用axios来请求数据，不过还有的小伙伴每次请求还是直接在组件中就开始请求了，并没有进行封装。这样后期维护更改什么的都很费劲。上代码，开始
1.首先，先给axios安一个家，在src下面建一个文件夹，叫什么随您。如下图，我建了一个request的文件夹，来放置封装的axios和接口文件，其中axios.js就是进行axios封装的文件，上面的apis是每个模块对应的接口文件了。这样后面维护起来就方便很多了。

2.开始看axios.js文件。

import axios from 'axios';//首先引入axios
import store from '../store/index'//引入vuex
import router from '../pages/index/router'//引入路由
import { Message } from 'element-ui'//引入一个ui提示信息，这里我用的是elementUI的，看你用的什么ui框架
import config from '@/config'//这里的baseUrl因为在项目的其他地方也有用到，所以我写在了另一个文件里导出用了
const { baseUrl } = config//这里如果只在这用的话，就直接把baseurl写在这就好了，也可以根据开发环境和生产环境来判断不同的baseurl。

//首先调用axios的create创建出来。
const service = axios.create({
    baseURL: baseUrl, // axios请求的base_url，就是基础路径了找后端要。
    timeout: 7000, // 设置请求超时时间，毫秒，如果超出这个时间，就给提示请求超时了，下面在响应拦截里会设置的。看自己项目的要求多少秒。一般感觉都是10秒以内吧。
    headers: {//设置请求头，要设置的。
        'Content-Type': 'application/json;charset=UTF-8'
    }
})
// 开始主要的了，先是请求拦截，就是整个项目所有的请求前都会先走这里
service.interceptors.request.use(config => {
    // console.log(config);
    let pathName = location.pathname;//可以打印看看location里是啥，就是一些路由信息。
    var token = store.state.token;//从vuex里获取到token.
    if (token) {
    //现在很多项目后端都会要求，在请求接口的时候将token添加的请求头中，这里就是统一在请求头中添加token.
        // 如果token存在，并且不是在登录页面，则在header中加上token;登录接口肯定不需要token。所以要判断不是在登录页面。
        if (pathName !== '/' || pathName !== 'login') {
            config.headers['token'] = store.state.token//添加token
            config.headers['app_key'] = 'aaaa'//这是请求头中添加的另一个参数，后端要求的写的固定的值
            // 下面的是进行长时间没有操作的判断，用户如果离开了长时间没操作了。再次操作时会给它跳转到登录页重新登录。
            var sessTime = sessionStorage.getItem('tokenTime');//获取到登录时session里存的时间戳
            var nowTime = new Date().getTime();//然后再获取到当前的时间戳
            var mime = (nowTime - sessTime) / 1000 / 60;//然后获取到当前时间-登录时存的时间戳，再获取到分钟数。
            if (mime > 20) {//然后设置个时间，如果超过时间，就给返回登录页面
                store.dispatch('removeInfo')//先将vuex里保存的用户信息全部删除掉再跳转到登录页
                router.replace('/login')
            } else {//如果没有超过时间，则把当前时间戳重新保存起来，用于下次比较
                sessionStorage.setItem('tokenTime', nowTime)
            }
        }
    } else {//没有token就简单了，直接回到登录页去
        store.dispatch('removeInfo')
        router.replace('/login')
    }
    return config
}, error => {
    return Promise.reject(error)
})

//下面的就是 响应拦截了，主要是处理错误的情况
service.interceptors.response.use(
    response => {//请求成功，正常返回请求的数据
        return response;//要把请求回来的结果返回去啊，不然接口文件里接收不到的
    },
    error => {//这下面的都是请求出现错误的处理，主要是集中处理请求错误的情况，也就是.catch的情况，省的每个接口都得写catch。好多接口的错误情况都一样，除非需要特殊处理的。
        let originalRequest = error.config
        if (error.code === 'ECONNABORTED' && error.message.indexOf('timeout') !== -1 && !originalRequest._retry) {
    //这里就是请求超时的判断，用elementUI的提示，在上面引用了。这样所有的接口都有判断了，超时了就给用户提示
            Message.error('请求超时')
            return;
        }
        // 这里可以判断一下回来的错误状态码  ，然后进行统一处理跳转，和后端商量好状态码
        if (error.response) {//先判断下有没有状态码回来，因为还有其他的乱七八糟的错误情况。
            switch (error.response.status) {
                case 403:
                    Message.warning(error.response.data.message)
                    store.dispatch('removeInfo')
                    router.replace('/login')
                    break;
                case 404:
                    router.replace('/404')
                    break;
                case 400://报400的也是内部错误，弹出后端给返回的错误信息即可    
                    Message.warning(error.response.data.message)
                    break;
                case 500://报500的是内部错误，弹出后端给返回的错误信息即可
                    Message.warning(error.response.data.message)
                    break;
            }
        } else {//如果没有返回的状态码，则是出现一些其他错误，如服务器没开，或者跨域了等。。
        //如果是其他的不知道啥子的错误，反正报错了，就给个统一的提示，简单明了
            Message.error('服务器异常')
        }
        return Promise.reject(error)//错误信息返出去
    }
)

export default service  //然后将axios创建的这个变量default出去。这个service现在就是代表了axios了，名字叫啥随你自己了。想叫啥叫啥了

然后现在就是封装完毕了，开始如何使用了，下面的是登录和用户信息等方面的接口文件，分类好，方便找。其他都一样的。

import axios from '../axios' //首先先把刚才在axios.js里封装好的那个service引入进来。
//然后下面就是一个个具体的接口了。具体的.then后的数据操作是在组件中操作了。

// 登录接口
export const login = (userName, password) => {
    return axios({
        url: 'login/login.do?username=' + userName + '&password=' + password,
        methos: 'post',
    })
}

// 上传图片的接口
export const unloadImg = function (formdata) {
    return axios({
        url: 'sysimg/uploadImg.do',
        method: 'post',
        data: formdata,
        headers: { "Content-Type": "multipart/form-data" },
    })
}

// 修改密码接口
export const resetPassword = function (oldPwd, newPwd) {
    return axios({
        url: 'login/changePwd.do?oldPwd=' + oldPwd + '&newPwd=' + newPwd,
        method: 'post',
    })
}
//根据不同的字段获取不同的下拉数据，当然也可以直接在这里进行数据的处理和过滤了。但是要记得return
export const getTypeByEntity = function (key) {
    return axios({
        url: 'dictionaryType/getTypeByEntity.do?key=' + key
    }).then(d => {
        var arr = d.data.data;
        arr.map(item => {
            for (var aa in item) {
                item.label = item[aa]
                item.val = aa;
            }
        })
        return arr;
    }).catch(err => {
        return err
    })
}

然后在组件中调用使用。就拿登录接口来说。

<script>
import md5 from 'js-md5';//引入md5加密方式
import { login } from '@/request/apis/user'//在登录的这个组件页面中线引入这个接口
export default {
  data() {
    return {
      password: "111111", //密码
      username: "sysadmin", //账号
    };
  },
  methods: {
  	 // 登录事件
    userLogin(){
    //直接调用上面的接口传参
      login(password,username).then(data=>{
      //然后就可以开心的处理数据了。页面中是不是很简洁明了。
        console.log(data);     
      })
    },
  }
}

到此就axios从封装到使用就结束了。