vue-http-rexsheng v1.2.4

vue-http-rexsheng

A Vue.js plugin for proving http request

Build Setup

# 调用方式一：页面直接引用（放在vue.js引用之后）
<script src="https://rexsheng.github.io/vue-http-rexsheng/latest/http.js"></script>
#页面引用之后，就可以使用全局Vue.ajax.send(...)或者页面实例中使用this.$ajax.send(...)了

# 调用方式二：npm安装
npm install vue-http-rexsheng --save-dev
# npm安装完后，在入口文件比如'src/main.js'中配置引用
import http from 'vue-http-rexsheng';
Vue.use(http,{instanceName:"$ajax",mockInstanceName:"$mock",wsInstanceName:"$socket",
  resultFormat:function(d){
    return d.data;
  },
  successFormat:function(d){
    return d.data;
  },errorFormat:function(d){
    return d.data;
  },defaultConfig:{}})

#设置ajax全局请求拦截器，option参数为当前请求option
Vue.ajax.interceptors.setRequest(function(option,request){return option;})
#设置ajax全局响应拦截器,option参数为全部响应对象
option={
  data:data,//响应数据
  status:req.status,//响应状态码
  statusText:req.statusText,//状态
  headers:headers,//响应头
  config:config,//配置option
  request:req//当前请求
}
Vue.ajax.interceptors.setResponse(function(option,request){return option;})
#1.2.0新增设置多个拦截器,使用addRequest或者addResponse,第二个参数为顺序数字，数字越小，优先级越高，默认为0
Vue.ajax.interceptors.addRequest(function(option,request){return option;},2)
Vue.ajax.interceptors.addResponse(function(option,request){return option;},2)
#1.2.0新增别名请求get,post,put,delete,options,patch,head,例如：
Vue.ajax.get(`String` url,`Object` data,`Function` success,`Function` error,`Object` scope)
#设置ajax全局前缀路径
Vue.ajax.config.baseUrl="http://localhost:8080"
#设置ajax全局是否启用mockserver,默认`false`
Vue.ajax.config.mockMode=false
#1.2.0新增设置全局mock策略,默认`scope`：局部优先，`global`:全局配置优先，忽略局部配置
Vue.ajax.config.mockStrategy="scope"
#成功的status码
Vue.ajax.config.successStatus=function(status){return status==200;}
#mock缺失时的自定义处理
Vue.ajax.config.missingMockCallback=(opt)=>{
    //false： 缺失mock配置时，不使用mock，使用真实url请求
    //true: 缺失mock配置时，会error终止
    return false; 
}
#修改默认配置
Vue.ajax.config.default={type:"get",headers:{"Content-type":"application/json;charset=UTF-8"}}
Vue.ajax.config.default=()=>{return {type:"get",headers:{"Content-type":"application/json;charset=UTF-8","Lang":localStorage.getItem("language")}}}
#设置mock请求方法或者指向的文件路径
Vue.ajax.addMock(`String` mockUrl,function(param){return xxx;})
Vue.ajax.addMock(`String` mockUrl,"../static/file.json")
#mock代理请求
Vue.ajax.addMock(`String` mockUrl,{url:"/api/newurl",data:{},type:"get",success:function(d){},error:function(err){},complete:function(){}})
#@get: @post: @delete: @put: 用于相同url但是不同请求类型的拦截
Vue.ajax.addMock(
  {
    "/url1":function(param){return {code:0,data:param};},
    "/url2":"../static/file.json",
    "/url3":{url:"/api/newurl",data:{},type:"get",success:function(d){},error:function(err){},complete:function(){}},
    //{url:"/user/3",type:"get"}的请求会匹配到
    "@get:/user/3":"../static/filedetail.json",
    //{url:"/user/3",type:"delete"}的请求会匹配到
    "@delete:/user/3":"../static/filedetail.json",
  }
)
#jsonp的回调函数key名称，http://xxx?callback=jsonp_123
Vue.ajax.config.jsonp="callback"
#全局配置发送socket未开启时数据延迟毫秒
Vue.socket.config.reconnectTimeout=30
#全局配置发送socket的url前缀路径
Vue.socket.config.baseUrl="ws://47.104.xx.xx:8701"

用法

<template>
   
</template>
<script>
import Vue from 'vue'
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted(){
    this.$ajax.send({
      url:"http://xxxxxxxxxxxxxxxxx/xxxxxxxxxx",
      type:"get"
    }).then((d)=>{
      console.log("success1",d,this.msg)
    }).catch((d)=>{
      console.log("error1",d)
    });
    Vue.ajax.send({
      url:"http://test.http.cn/user/{userId}",
      type:"post",
      data:{
          userId:12
      }
    }).then((d)=>{
      console.log("success2",d,this.msg)
    }).catch((d)=>{
      console.log("error2",d)
    });

  }
}
</script>

配置项

this.$ajax.send(option)

option配置如下

#socket配置

//调用listen方法返回值结构：
//{
//  instance：“socket实例”,
//  send:function(data,opt){//发送数据函数，返回promise,then参数为当前对象},
//  close:function(){//关闭当前socket实例}
//}
var pageInstance=this.$socket.listen({
      url:"/websocket",
      onmessage:function(e){
        console.log("msg"+new Date(),e)
      },
      onopen:function(e){
        console.log("open",e)
      },
      onerror:function(e){
        console.log("onerror",e)
      },
      onclose:function(e){
        console.log("onclose",e)
      },
      instanceId:'12'//设置全局id,不会重复创建
    },this)
//调用send方法，发送数据，返回promise
//send可选参数
//(message(消息String|Object),option(配置项),scope（作用域，一般为页面实例this）)
//(message(消息String|Object),option(配置项))
//(message(消息String|Object),url(路径String))
//(message(消息String|Object))
//(option(配置项))
this.$socket.send("测试"+new Date(),{
      url:"/websocket"
    }).then((a)=>{
      a.close()
    })

websocket option配置如下

For detailed explanation on how things work, consult the docs for vue-http-rexsheng.