vue axios的封装

213 阅读1分钟
export default{
    data(){
        
    }
},
    methods:{
        _axios(url,params ,method){
            let _conf ={
                get: () =>({
                    method: 'get',
                    params
                }),
                post: () =>({
                    method: 'post',
                    data:params
                }),
                delete:() =>({
                    method:'delete',
                    data:params
                }),
                put:() =>({
                    method: 'put',
                    data:params
                })
            }
            return this.$axios({
                headers:{
                    "Access-Token":window.sessionStorage.getItem(key:"authKey"),
                    "Content-Type":
                    "application/json"
                },
                //url 地址
                url:this.global.pathPrefix + url, ..._conf[method](),
            })
        },
        /**
        *
        * @param {*} param@ url
        * @param {*} params 请求参数
        * @param {*} method 请求方式
        */
        _req({url,toast,msg} = {msg: 'cc', toast:false},params ={},method = 'get'){
            return new Promise((resolve,reject) =>{
                this._axios(url, params, method).then(res =>{
                    const result = res.data;
                    if(result.code === 1){
                        toast && this.$message({
                            message:msg || result.msg,
                            type: "success",
                            center: true
                        })
                        resolve(result.data)
                    }else{
                        this.$messgae({
                            message: result.msg,
                            type: "error",
                            center: true
                        })
                        reject(result.msg)
                    }
                })
            }).catch(err => console.error(err))
        },
        _req1({url,toast,msg} = { msg:'cc', toast: false },params = {},method = 'get'){
            return new Promise( (resolve, reject) =>{
                this._axios(url, params, method).then(res =>{
                    const result =res.data;
                    if( result.code === 1){
                        toast && this.$message({
                            message: msg || result.msg,
                            type: "success",
                            center: true
                        })
                        resolve(result.data)
                    }else{
                        this.$message({
                            message: result.msg,
                            type: "error",
                            center: true
                        })
                        reject(result.msg)
                    }
                })
            }).catch(err => console.error(err))
        },
        //get 请求
        reqGet(config, params){
            return this._req(config, params, 'get')
        },
        //post 请求
        reqPost(config, params){
            return this._req(config, params, 'post')
        },
        reqPost1(config, params){
            return this._req1(config, params, 'post')
        },
        // delete 请求
        reqDel(config, params){
            return this._req(config, params, 'delete')
        }
        //put 请求
        reqPut(config, params){
            return this._req(config,params, 'put')
            }
        }
    }
//封装axios的使用
 
  import CpMixin from '../mixins/CpMixin';
  import axios from 'axios',
  export default {
    mixins: [CpMixin]  
  }
  //Get
  async listtable(params){
    let _this = this
    const {
        reqGet
    } = this;
    //如果param 不等于undefind 否则?
    let param=params!=undefined?params:{
        //参数
    }
    try{
        const result = await this.reqGet({ url: '地址'},param)
        if(result == undefined)
        return
        this.tableData=result.contents
    } catch(error){
        console.error(error)
    }
  }
  //Post
  async added(){
      const 
      { reqPost} = this;
      let param = form
      try{
          const result = await this.reqPost( {url:"地址"},param)
          if(result == undefined)
          return
          this.$message({
              message:"保存成功",
              type:"success",
              center:true
          })
          this.listtable() 
      }catch(error){
        console.error(error);
      }
  }
  //put
  async xiu(){
      const {
        reqPut  
      } = this;
      let param = form
      try{
        const result = await this.reqPut({ url:"地址"},param)  
        if( result == undefined)
        return 
        this.$message({
            message: '保存成功',
            type: 'success',
            center:true
        })
        this.listTable()
      } catch(error){
          console.error(error);
      }
    } 
    //delete请求
    async handAdmin(id){
        const {reqDel} = this;
        try{
            const result = await this.reqDel( {url:"地址" +id},{} )
            if(result == undefined)
            return
            this.$message({
                message:"撤销成功",
                type:'success',
                center:true
            })
              this.listTable()
        }catch(error){
            console.error(error)
        }
    }