rexttp

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 rexttp --save-dev
# npm安装完后，在入口文件比如'src/main.js'中配置引用
import rexttp from 'rexttp';
Vue.use(rexttp)
Vue.prototype.$ajax=Vue.ajax=rexttp
#设置ajax全局请求拦截器
Vue.ajax.interceptors.setRequest(function(config){return config;})
Vue.ajax.interceptors.setResponse(function(data,config){return data;})
#设置ajax全局前缀路径
Vue.ajax.config.baseUrl="http://localhost:8080"
#设置ajax全局是否启用mock,默认`false`
Vue.ajax.config.mockMode=false
#成功的status码
Vue.ajax.config.successStatus=function(status){return status==200;}
#修改默认配置
Vue.ajax.config.default={type:"get",headers:{"Content-type":"application/json;charset=UTF-8",validateStatus:function(status){return status>=200 && status<300;},timeout:60000}
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,"get","../static/file.json")
Vue.ajax.addMock(
  {
    "/url1":function(param){return {code:0,data:param};},
    "/url2":"../static/file.json",
    "/url21":function(param){var req=()=>import("../static/file.json");return req().then(d=>return {code:0,data:d};)},
    "/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.callbackName="callback"
#全局配置发送socket未开启时数据延迟毫秒
Vue.ajax.config.webSocket.timeout=30
#全局配置发送socket的url前缀路径
Vue.ajax.config.webSocket.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配置如下

选项	说明	备注
type	类型	get post delete put jsonp webSocket
url	请求地址	必填
baseUrl	请求地址的前缀	boolean string 设置为false时，不使用全局配置url：Vue.ajax.config.baseUrl；设置为字符串时，优先级高于全局配置
headers	请求headers对象	例如{"Content-type":"application/json;charset=UTF-8"}
timeout	超时时间毫秒	毫秒数
withCredentials	跨域响应设置cookie	默认false
data	请求发送的数据	Object/Array
dataType	表明要发送的数据格式	json form formData(使用formdata表单发送数据，通常用于文件上传)
responseType	返回的数据类型	json blob text arraybuffer document
transform	自定义格式化请求前数据的函数	参数为当前配置的data数据 例如function(data){return JSON.stringify(data);}
mock	mock模拟数据请求	true(需调用Vue.ajax.addMock(url,function)来拦截本次请求) function(data){//模拟请求，参数data为option的data} String请求的json文件地址 {url:'/newurl',type:'get',data:{},complete:function(){},success:function(d){},error:function(err){}}
mock	严格使用指定的mock模式	Boolean Function String Object
success	请求成功的回调	function(data,req){}
error	请求失败的回调	function(err,req){}
complete	请求完成的回调	function(){}
progress	文件下载的进度事件	function(d){}
uploadProgress	文件上传的进度事件	function(d){}
cancel	取消请求函数，若要取消该请求时在函数内部调用cb()来执行取消	function(config,request){if(someCondition){return true;}}
onabort	请求取消事件	function(e){}
ontimeout	请求超时事件	function(e){}
callbackName	jsonp使用的函数key	默认callback

#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
this.$ajax.send({
    url:"ws://123.207.136.134:9010/ajaxchattest",
    type:"webSocket",
    dataType:"json",
    data:{name:"望你"},
    success:function(d){
      console.log("success",d)
    }
  })

For detailed explanation on how things work, consult the docs for rexttp.