用can-fixture拦截Ajax并模拟响应
can-fixture是前端框架CanJS提供的一个插件，主要用来拦截Ajax请求并模拟响应数据，在前后端分离的开发模式中，用于前端的接口调试甚是好用。
而且can-fixture可以不依赖CanJS框架单独使用。
准备工作
我们先用webpack搭建一个react项目，项目路径如下。
├── app
│ ├── mian.js
│ └── Buttons.js --- 用于请求的Button
└── public
├── index.html
└── bundle.js --- webpack打包后生成
main.js:
import React from 'react';
import {render} from 'react-dom';
import Greeter from './Buttons';
render(<Greeter />, document.getElementById('container'));
Buttons.js:
import React, {Component} from 'react'
class Buttons extends Component{
render() {
return (
<button>Get</button>
);
}
}
export default Buttons
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id='container'>
</div>
<script src="bundle.js"></script>
</body>
</html>
安装can
$ npm install can@5 --save
can-fixture使用
can-fixture用fixture()方法来配置要拦截的请求以及响应的返回值。
Responds with an array of data
* fixture(ajaxSettings, requestHandler(...))
│
├── ajaxSettings:拦截的请求
│
└── requestHandler:请求响应requestHandler的返回值
我们在app文件夹下创建一个fixtureSettings.js,添加要拦截的请求
fixtureSettings.js:
import {fixture} from "can";
//{ method: "get", url: "/getList" } 也可以简写为:"GET /getList"
fixture( { method: "get", url: "/getList" },
( request, response, headers, ajaxSettings ) => {
return {
data: [
{ id: 1, name: "chenjy" },
{ id: 2, name: "tom" }
]
};
}
);
在Buttons.js添加事件触发请求
Buttons.js:
import React, {Component} from 'react'
import {ajax} from "can";
class Buttons extends Component{
getTest(){
ajax( {url: "/getList"} ).then( result => {
console.log( result.data );
} );
}
render() {
return (
<button onClick={this.getTest}>Get</button>
);
}
}
export default Buttons
运行webpack-dev-server点击页面上的get按钮
Responds with a Respond Object
我们可以将我们的返回值放在response对象的请求体(body)中，并根据需要设置请求头、状态码等
response( [status], body, [headers], [statusText] )
修改fixtureSettings.js:
fixture( "GET /getList",
( request, response, headers, ajaxSettings ) => {
response(200, {"data": [{
"id": 1,
"name": "chenjy"
},
{
"id": 3,
"name": "jerry"
}
]},{},"success");
}
);
Responds with a file
* fixture(ajaxSettings, url)
│
├── ajaxSettings:拦截的请求
│
└── url:请求响应文件
我们在fixtureSettings.js中添加一个新的请求getFile
fixture( { method: "get", url: "/getFile" }, "test.json");
然后我们在index.html所在路径添加test.json:
test.json:
{
"data": [{
"id": 1,
"name": "chenjy"
},
{
"id": 3,
"name": "jerry"
}
]
}
在Buttons.js添加新按钮
Buttons.js:
import React, {Component} from 'react'
import {ajax} from "can";
class Buttons extends Component{
getTest(){
ajax( {url: "/getList"} ).then( result => {
console.log( result.data );
} );
}
getFileTest(){
ajax( {url: "/getFile"} ).then( result => {
console.log( result.data);
} );
}
render() {
return (
<button onClick={this.getTest}>Get</button>
<button onClick={this.getFileTest}>GetFile</button>
);
}
}
export default Buttons
webpack-dev-server 会自动刷新我们改完以后，点击getFile按钮
Responds with data
* fixture(ajaxSettings, data)
│
├── ajaxSettings:拦截的请求
│
└── url:请求响应的数据
fixture( { method: "get", url: "/getData" }, {data: [{ id: 1, name: "chenjy" },{ id: 2, name: "tom" } ]});
Removes a fixture
我们可以通过fixture(ajaxSettings, null)方法移除对应的请求，使其返回404
我们在上面的fixture的下面添加一个
fixture( { method: "get", url: "/getData" }, null );
Responds with delay
同时我们也可以通过fixture(ajaxSettings, delay)模拟网络延时，通过delay设置请求响应延时。该方法并不会返回任何值。
fixture( { method: "get", url: "/getDelay" }, 3000 );
ajax( {url: "/getDelay"} );
- 如果需要在延时后再返回响应值可以使用
then()中使用settimeout
Create multiple fixtures at once
- 一次创建多个
fixtures
我们把上述所有的fixture整合在一起
fixtureSettings.js:
var listData = {
"data": [{
"id": 1,
"name": "chenjy"
},
{
"id": 3,
"name": "jerry"
}
]
};
fixture({
"GET /getList":(request, response) =>{
response(200, listData,{},"success");
},
"GET /getFile": "test.json",
"GET /getData": listData,
"GET /getData": null,
"GET /getDelay": 3000
});
