用can-fixture攔截Ajax並模擬響應

時間 2019-12-13

標籤 fixture 攔截 ajax 模擬響應欄目 Ajax 简体版

原文原文鏈接

can-fixture是前端框架CanJS提供的一個插件，主要用來攔截Ajax請求並模擬響應數據，在先後端分離的開發模式中，用於前端的接口調試甚是好用。html

並且can-fixture能夠不依賴CanJS框架單獨使用。前端

準備工做

咱們先用webpack搭建一個react項目，項目路徑以下。react

├── app
│   ├── mian.js
│   └── Buttons.js    --- 用於請求的Button
└── public
    ├── index.html
    └── bundle.js     --- webpack打包後生成

main.js:webpack

import React from 'react';
import {render} from 'react-dom';
import Greeter from './Buttons';

render(<Greeter />, document.getElementById('container'));

Buttons.js:web

import React, {Component} from 'react'

class Buttons extends Component{

  render() {
    return (
      <button>Get</button>
    );
  }
}

export default Buttons

index.html:ajax

<!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()方法來配置要攔截的請求以及響應的返回值。npm

Responds with an array of data

* fixture(ajaxSettings, requestHandler(...))
     │
     ├──  ajaxSettings:攔截的請求
     │ 
     └──  requestHandler:請求響應requestHandler的返回值

咱們在app文件夾下建立一個fixtureSettings.js,添加要攔截的請求json

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
    });

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。