将请求接口定义成全局变量,挂载到vue实例上可以全局使用,

将请求接口定义定义成全局变量,挂载到vue实例上可以全局使用,
随便写一个文件放请求接口,并导出。
将请求接口定义成全局变量,挂载到vue实例上可以全局使用,_第1张图片
在 main.js 文件中导入,并挂载。这样就可以在项目里使用。
将请求接口定义成全局变量,挂载到vue实例上可以全局使用,_第2张图片
使用案例
this.GLOBAL.myhf 调用的接口
login:地址
参数
username:,
password:

 axios .post( this.GLOBAL.myhf + "/login",  qs.stringify({
               username: that.formData.user.username,
              password: that.formData.user.password
          }),  { withCredentials: true } ) .then(function(response) {
          输出数据
                   console.log(response)
        })

将请求接口定义成全局变量,挂载到vue实例上可以全局使用,_第3张图片
多参数拼接
前台拿到的数据
this.info.pageNumber
后台参数
pageNum
pageNum

 axios.get( this.GLOBAL.myhf +"/role/search?pageNum=" + this.info.pageNumber + "&pageNum=" + this.info.pageSize,
          { withCredentials: true } ).then(function(response) {
          输出数据
        })

es6模板字符串请求接口
模板字符,请求数据不用拼接数据

将请求接口定义成全局变量,挂载到vue实例上可以全局使用,_第4张图片

form(id){
       
       this.$axios.get(this.GLOBAL.myhf +`/caregis/search?pageNum=${this.pageNum}&pageSize=${this.pageSize}&recordId${id}`,
       {withCredentials: true}).then(res=>{
          if(res.data.info == "success"){
             this.regis = res.data.data.list
          }
       })
       
     }
   }

你可能感兴趣的:(vue,前端,web)