vue axios 请求简单实用的封装！

首先加载axios 

npm install axios -S

 

在src目录下创建network文件件，然后创建request.js文件

文件内容

// 配置API接口地址
var root = 'http://*****'//接口地址
// 引用axios
var axios = require('axios')
// 自定义判断元素类型JS
function toType (obj) {
    return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()
}
// 参数过滤函数
function filterNull (o) {
    for (var key in o) {
        if (o[key] === null) {
            delete o[key]
        }
        if (toType(o[key]) === 'string') {
            o[key] = o[key].trim()
        } else if (toType(o[key]) === 'object') {
            o[key] = filterNull(o[key])
        } else if (toType(o[key]) === 'array') {
            o[key] = filterNull(o[key])
        }
    }
    return o
}


function apiAxios (method, url, params, success, failure) {
    if (params) {
        params = filterNull(params)
    }
    axios({
        method: method,
        url: url,
        data: method === 'POST' || method === 'PUT' ? params : null,
        params: method === 'GET' || method === 'DELETE' ? params : null,
        baseURL: root,
        withCredentials: false
    })
        .then(function (res) {
            if (res.data.success === true) {
                if (success) {
                    success(res.data)
                }
            } else {
                if (failure) {
                    failure(res.data)
                } else {
                    //在这里写登录失败判断
                    success(res.data)
                }
            }
        })
        .catch(function (err) {
            let res = err.response
            if (err) {
                return res.status;
            }
        })
}

// 返回在vue模板中的调用接口
export default {
    get: function (url, params, success, failure) {
        return apiAxios('GET', url, params, success, failure)
    },
    post: function (url, params, success, failure) {
        return apiAxios('POST', url, params, success, failure)
    },
    put: function (url, params, success, failure) {
        return apiAxios('PUT', url, params, success, failure)
    },
    delete: function (url, params, success, failure) {
        return apiAxios('DELETE', url, params, success, failure)
    }
}

　　在main.js文件里挂载

import requests from './network/request.js'   // 记得改为你的路径
Vue.prototype.Apis = requests  // 请求接口命名

　　封装完毕了，下面就是直接使用

this.Apis.post('api/Api/ListComm',{type:'all'}, r => {
                    console.log(r)
                })

　　简单明了，有什么问题在下面留言！