Skip to content

1139874527/vue-axios-mock

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

简介

基于vue2的一个插件,进行简单配置,在不修改业务代码的情况下,可以使原生axios返回自定义模拟数据。

安装

npm i vue-axios-mock -D

演示

正常请求

axios.get('/api/query').then(res=>{
  console.log(res)
})

//{ data:[{name:1,age:18}],success:true}

代理请求

axiosMock from 'vue-axios-mock'
Vue.use(axiosMock,{ "query":[1,2,3,4,5,6,7,8,9] )
                   
//query为需要代理的部分请求url,后面为自定义返回数据
axios.get('/api/query').then(res=>{
  console.log(res)
})

//[1,2,3,4,5,6,7,8,9]

使用

引入

axiosMock from 'vue-axios-mock'
Vue.use(axiosMock)

基础代理配置

实现一个axios请求的代理非常便捷,使用以下两种方法即可。

参数式代理

参数式代理使用时,向Vue.use(axiosMock,options)传入自定义代理选项即可。

axiosMock from 'vue-axios-mock'
let options = {
  "query":[1,2,3,4,5,6,7,8,9],
  "api/list":{data:[],success:false}
}
Vue.use(axiosMock,options )

options必须是一个配置对象,每一个配置项的属性名为需要代理的请求url(模糊匹配),其属性值为自定义的模拟数据。

配置式代理

使用配置式代理时,无需在Vue.use( )中传入options选项,但是,需要在项目根目录下提供一个aMock文件夹,并在里面创建config.js配置文件。config.js的配置项同options,使用export default导出即可。

├─ aMock
  ├─ config.js
├─ src 
├─ public 
└─ package.json

config.js配置如下

export default {
  "query":[1,2,3,4,5,6,7,8,9],
  "api/list":{data:[],success:false}
}

注:如果参数式代理和配置式代理均存在时,只使用参数式代理。

代理可选配置

每一个配置对象都是可以进行自定义设置的,您只需要在配置对象的属性名后面添加“|cus”,或 “|json”即可。

cus模式

参数式

axiosMock from 'vue-axios-mock'
let options = {
  "pms/bill/query|cus":{
    data:[1,2,3,4,5,6,7,8,9],
    timeout:1000,
    status:200
  },
  "queryItemInfo":{data:{data:[],success:false},success:true},
}
Vue.use(axiosMock,options )

配置式

export default {
    "pms/bill/query|cus":{data:[1,2,3,4,5,6,7,8,9],,timeout:1000,status:200},
    "queryItemInfo":{data:{data:[],success:false},success:true},
}

完成的可选配置项如下

参数名 默认值 释义
data null 自定义的返回数据内容
mock ture|Boolen 是否启用mock功能
fuzzy ture|Boolen 是否启用模糊查询
timeout 1000|number 自定义响应时间
mockId null|string/number 每个mock对象的唯一标识
method null|string 指定mock对象的请求方法
status 200|number 自定义返回对象的响应值
responseType axios|string 自定义返回数据的类型
tip true|Boolen 是否启用调试面板的请求提示url
callback nullFfunction 自定义返回数据的回调函数

data

自定义返回值,一个代理后的请求返回值结构如下
代理对象

"query":{data:[1,2,3,4,5,6,7,8,9]},

代理后的请求

axios.get('/api/query').then(res=>{
  console.log(res)
})

//实际返回结果
{
  config: {}
  data: {data:[1,2,3,4,5,6,7,8,9]}
  headers: {}
  request: {}
  status: 200
  statusText: "OK"
}

可以看见,自定义的返回值会模拟axios添加一些额外信息。如果您想单纯返回设定的值,配置中添加
responseType=false即可。

responseType

mock状态下,自定义的返回值的格式如下

"query":{data:[1,2,3,4,5,6,7,8,9]},
//实际返回结果
{
  config: {}
  data: {data:[1,2,3,4,5,6,7,8,9]}
  headers: {}
  request: {}
  status: 200
  statusText: "OK"
}

设置为false后

{data:[1,2,3,4,5,6,7,8,9]}

mock

设置为false后,本条请求代理会失效。

fuzzy

默认开启模糊匹配。如query的配置名可以匹配到 http://localhost:8080/pms/bill/query的请求。
关闭后,只有“pms/bill/query”配置名才能匹配到http://localhost:8080/pms/bill/query请求。

timeout

自定义的返回值响应时间,默认为1000,您可以按需设置。

status

自定义的返回状态,这再您模拟错误的时候有用。

"query|cus":{data:[1,2,3,4,5,6,7,8,9],status:400},
axios.post('/api/query',{id:1}).then(res=>{
  console.log(res)
})

//实际返回结果
{
  config: {}
  data: [1,2,3,4,5,6,7,8,9]
  headers: {}
  request: {}
  status: 400
  statusText: "OK"
}

tip

默认情况下,每一次mock请求都会在控制台打印如下的信息
image.png
如果需要关闭,将其设置为false即可。

mockId

对于同一个代理请求,如果在项目中多次使用,即使其body请求参数不同,匹配到的模拟返回值都是一样的。
代理配置

"query|cus":{
  data:{data:[{id:1,name:1},{id:2,name:2}],succees:true},
  timeout:1500,
  responseType:false
}

实际请求

axios.post('/api/query',{id:1}).then(res=>{
  console.log(res)  //{data:[{id:1,name:1},{id:2,name:2}],succees:true}
})

axios.post('/api/query',{id:2}).then(res=>{
  console.log(res)   //{data:[{id:1,name:1},{id:2,name:2}],succees:true}
})

这两种情况返回的结果是一样的,显示不满足我们的要求。axios的第三个参数是其配置对象,基于此特性,我们可以在其配置对象中,增加自定义配置对象:mockId。

axios.post('/api/query',{id:1},{mockId:1}).then(res=>{	})
axios.post('/api/query',{id:2},{mockId:2}).then(res=>{	})

然后,在配置对象中增加对应的mockId

"query|cus":{
  data:{data:[{id:1,name:1}],succees:true},
  timeout:1500,
  responseType:false
},
"query|cus":{
  data:{data:[{id:2,name:2}],succees:true},
  timeout:1500,
  responseType:false
}

mockId会精准的对请求进行匹配,使axios对象返回其 mockId所匹配到的值。(mockId是唯一的,设置此值时,其余所有匹配规则都会失效)

axios.post('/api/query',{id:1},{mockId:1}).then(res=>{
 console.log(res)  // {data:[{id:1,name:1}],succees:true}
})
axios.post('/api/query',{id:2},{mockId:2}).then(res=>{
 console.log(res)  // {data:[{id:2,name:2}],succees:true}
})

callback

对于一个代理请求,如果其入参不同时,除了使用mockId指定不同的返回值,我们也可以使用自定义calllback属性,更加灵活的获取返回值。
callback属性值是一个回调函数,其接受两个形参,mockData和resItem,返回处理后的值。

"query|cus":{
  data:[{id:1,name:1},{id:2,name:2},{id:3,name:3},{id:3,name:3}],
  responseType:false,
  callback:function(mockData,resItem){
    console.log(mockData)
    console.log(resItem)
    retrun mockData
  }
}

mockData是自定义的返回值,上述配置中是 [{id:1,name:1},{id:2,name:2},{id:3,name:3},{id:3,name:3}],
resItem是一个对象,包含实际请求的url、body、method和代理对象的部分配置信息。
对于不同入参的请求

axios.post('/api/query',{id:1}).then( res=>{		} )
axios.post('/api/query',{id:2}).then( res=>{		} )

我们可以使用如下方式返回自定义结果

"query|cus":{
  data:{data:[{id:1,name:1},{id:2,name:2}],succees:true},
  responseType:false,
  callback:function(mockData,resItem){
      let newData = mockData.filter(res => res.id === resItem.axiosBody.id)
      retrun newData
  }
}

json模式

当自定义的mock数据较多时,json模式能更快、更便捷的得到模拟返回值。
options配置示例

export default {
   "query|json":"query.json"
   "queryItemInfo|json":"queryItemInfo.json" 
}

使用json模式时,每一个配置项的属性值对应一个含模拟返回值的json文件名。此时我们需要在根目录创建aMock文件夹,并在里面放入用于储存模拟返回值的json文件。aMock文件内的json文件名应该与配置项的属性值一一对应。

├─ aMock
  ├─ config.js               //配置式代理的options配置文件
  ├─ query.json
  ├─ queryItemInfo.json
├─ src 
├─ public 
└─ package.json

注:配置项的属性值可以省去“.json”的文件后缀

同样的,json模式的每一个配置项也可以使用其他自定义配置,

{
   "query|json":{timeout:1500,tip:false,JsonName:"query.json"}
   "queryItemInfo|json":{timeout:1500,tip:false,JsonName:"queryItemInfo"}
}

与cus模式不同的是,此时配置对象不需要提供data属性,取而代之的是一个jsonName属性,jsonName的值为对应的json文件名。axios-hook-mock会将jsonName匹配到的文件内容转化为要返回的模拟值。

全局配置

默认的配置可以通过全局配置覆盖
参数式

export default {
   "query|json":{timeout:1500,tip:false,JsonName:"query.json"}
   "queryItemInfo|json":{timeout:1500,tip:false,JsonName:"queryItemInfo"}
}
export const config = {
    mock:false,
    timeout:2000,
    tip:false,
    fuzzy:false,
}
 

配置式

axiosMock from 'axios-hook-mock'
let options = {
   "query|json":{timeout:1500,tip:false,JsonName:"query.json"}
   "queryItemInfo|json":{timeout:1500,tip:false,JsonName:"queryItemInfo"}
}
let config = {
  mock:false,
  timeout:2000,
  tip:false,
  fuzzy:false,
}
Vue.use(axiosMock,options,config)

全局设置 mock 为 false,会关闭本插件的代理功能。
全局设置 tip 为 false,会关闭本插件的请求日志打印功能。

大佬们,都看完了,不妨给个star吧。https://github.com/1139874527/vue-axios-mock

About

基于axiso的mock插件

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published