用于 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>
Logo

前往低代码交流专区

更多推荐