vue + axios 封装ajax，针对 form 提交和 application/json 提交的两种封装方式

用于 application/json 提交的 ajax 封装方式（）

vue完全是在工作中自学的，所以有哪里不对，或者更好的方法，请大家提出来希望一起进步

刚开始就为了找 axios 的 application/json 的支持方式，找了好多没有可行的解决方法，几经波折之后，后来参考了 axios的官方文档终于找到了可行方案。在此记录一下，供大家参考

import axios from 'axios'
export default {
    install(Vue, options) {
        Vue.prototype.$ajax = function (options) {
            let _this = this
            let data = {}
            //拼接请求参数对象
            for (let i in options.data) {
                data[i] = options.data[i]
            }
            axios({
                url: options.url,
                method: options.type || 'post',
                data: data,
                //如果请求中要用到 token 则在 header中 
                headers: {
                    //token 存储方式因人而异，我这里是用vuex 和 localStorage 统一管理的
                    'token': this.$store.state.Global.token
                },
                //关键是这一步，将Content-Type 改成 application/json 参照axios 官方文档只能用这种方式，
                //不同于jquery，jQuery可以直接在 header 中直接赋值就可以了
                transformRequest:[function (fData, headers) {
                    headers['Content-Type']='application/json'
                    return JSON.stringify(fData)
                }],
            }).then(res => {
                let body = res.data
                //这里可以做一层粗粒度的拦截（仅做参考）
                if(res.status==200 && body){
                    if(body.code == 401 && options.url.indexOf('/login') > 0){
                        this.$message({message:'您输入的用户名或密码错误，请重新输入！',type:'warning'})
                    }
                    if(body.code == 200){
                        options.success(body)
                    }
                    if(body.code==500){
                        this.$message({message:body.msg + '，请联系管理员！',type:'warning'})
                    }
                }

            }).catch(err => {
                 _this.$alert("出错了，无法连接服务器，请稍后重试", "出错了", {
                      type: 'error',
                      callback: () => {}
                 })
                 options.success(err)
            })
        }
    }
}

用于form表单提交的 ajax 封装方式

相比较 上一种提交方式，这个则更简单一些

import axios from 'axios'
export default {
    install(Vue, options) {
        Vue.prototype.$ajax = function (options) {
            let _this = this
            let data = {}
            //拼接请求参数对象
            for (let i in options.data) {
                data[i] = options.data[i]
            }
            axios({
                url: options.url,
                method: options.type || 'post',
                data: data,
                //如果请求中要用到 token 则在 header中 
                headers: {
                    //token 存储方式因人而异，我这里是用vuex 和 localStorage 统一管理的
                    'token': this.$store.state.Global.token
                },
            }).then(res => {
                let body = res.data
                //这里可以做一层粗粒度的拦截（仅做参考）
                if(res.status==200 && body){
                    if(body.code == 401 && options.url.indexOf('/login') > 0){
                        this.$message({message:'您输入的用户名或密码错误，请重新输入！',type:'warning'})
                    }
                    if(body.code == 200){
                        options.success(body)
                    }
                    if(body.code==500){
                        this.$message({message:body.msg + '，请联系管理员！',type:'warning'})
                    }
                }
            }).catch(err => {
                 _this.$alert("出错了，无法连接服务器，请稍后重试", "出错了", {
                      type: 'error',
                      callback: () => {}
                 })
                 options.success(err)
            })
        }
    }
}

说完封装，然后介绍一下使用方法

首先作为一个希望全局都在用的东西，那我们当然希望能将它注册成为全局的一个属性使用，那就是接下来的操作了

1. 在main.js 中 导入此文件（ import Ajax from ‘./services/ajax’ ）名字路径因人而异；
2. 将其注册到 vue中 （ Vue.use(Ajax) ）
3. 接下来就看怎么用了（这里只写一个片段了,仅做参考）

<script>
    data(){
        return{
            url:'/api/user/list',
            name:'',
            phone:''
        }
    },
    methods:{
        //getList
        getList(){
            //此处 $ajax 名字取决于封装方法中 Vue.prototype.$ajax = function (options) 注册名字
            this.$ajax({
                type:'post',
                url:this.url,
                data:{
                    name:this.name,
                    phone:this.phone
                },
                success: data => {
                    console.info(data)
                }
            })
        }
    }
</script>