1 <!DOCTYPE html>2 <html lang="en">3 <head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Flujo Secuencial de API</title>7 <link rel="stylesheet" href="styles.css">8 </head>9 <body>10 <div class="container">11 <h1>Flujo Secuencial de API</h1>12 <div id="flow-container">13 14 <!-- Bloque de Variables -->15 <div class="block">16 <h2>Variables Iniciales</h2>17 <div class="variable">18 <label>user-id:</label>19 <span id="user-id">uuid</span>20 </div>21 <div class="assert">22 <label>Aserción:</label>23 <span id="assert-user-id">user-id es uno de [201, 409]</span>24 </div>25 </div>26 27 <!-- Primera Llamada HTTP -->28 <div class="block">29 <h2>Solicitud HTTP 1</h2>30 <div class="request">31 <label>Método:</label>32 <span>GET</span>33 <label>URL:</label>34 <span>http://host//robots.txt</span>35 </div>36 <div class="headers">37 <label>Headers:</label>38 <div>39 <span>Authorization: [Valor]</span>40 </div>41 </div>42 <div class="response">43 <label>Respuesta:</label>44 <pre id="response-1">Esperando ejecución...</pre>45 </div>46 <button onclick="makeRequest(1)">Ejecutar Solicitud 1</button>47 </div>48 49 <!-- Pausa -->50 <div class="block">51 <h2>Pausa</h2>52 <div class="sleep">53 <label>Duración:</label>54 <span>10 segundos</span>55 </div>56 </div>57 58 <!-- Segunda Llamada HTTP -->59 <div class="block">60 <h2>Solicitud HTTP 2</h2>61 <div class="request">62 <label>Método:</label>63 <span>POST</span>64 <label>URL:</label>65 <span>http://host//create-payment</span>66 </div>67 <div class="body">68 <label>Cuerpo:</label>69 <pre>{ "payment-id": "uuid", "amount": 100, "iban": "my-iban" }</pre>70 </div>71 <div class="response">72 <label>Respuesta:</label>73 <pre id="response-2">Esperando ejecución...</pre>74 </div>75 <button onclick="makeRequest(2)">Ejecutar Solicitud 2</button>76 </div>77 78 <!-- Resultado Final -->79 <div class="block">80 <h2>Resultado del Flujo</h2>81 <div class="result">82 <label>Status Global:</label>83 <span id="global-status">Pendiente</span>84 </div>85 </div>86 87 </div>88 </div>89 <script src="script.js"></script>90 </body>91 </html>92 Enlace
El enlace para compartir es: