Compartir a través de

Respuestas simuladas

El uso de Dev Proxy es la manera más fácil de simular una API. Tanto si va a compilar el front-end como si la API aún no está lista, debe integrar el back-end con un servicio externo o desea probar la aplicación con respuestas diferentes, el proxy de desarrollo puede ayudarle a simular respuestas de API. Lo mejor de usar Dev Proxy es que no requiere realizar ningún cambio en el código de la aplicación. Defina respuestas ficticias para cualquier API con la que la aplicación interactúe y Dev Proxy intercepta las solicitudes y responde con las respuestas ficticias definidas.

Para simular respuestas de API, debe hacer dos cosas:

  1. Cree un archivo con respuestas ficticias.
  2. Configura el proxy de desarrollo para usar las respuestas simuladas.

Sugerencia

Si usa Visual Studio Code, considere la posibilidad de instalar la extensión Dev Proxy Toolkit . Simplifica significativamente el trabajo con archivos de configuración del proxy de desarrollo.

Creación de un archivo con respuestas ficticias

El proxy de desarrollo simula respuestas de API mediante MockResponsePlugin. El complemento le permite definir un conjunto de respuestas ficticias. Defina los simulacros en un archivo independiente. En el fragmento de código siguiente se muestra una respuesta ficticia simple para una GET solicitud a https://jsonplaceholder.typicode.com/posts/1.

{
  "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v0.29.2/mockresponseplugin.schema.json",
  "mocks": [
    {
      "request": {
        "url": "https://jsonplaceholder.typicode.com/posts/1",
        "method": "GET"
      },
      "response": {
        "statusCode": 200,
        "body": {
          "userId": 1,
          "id": 1,
          "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
          "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
        },
        "headers": [
          {
            "name": "Date",
            "value": "Wed, 19 Feb 2025 09:03:37 GMT"
          },
          {
            "name": "Content-Type",
            "value": "application/json; charset=utf-8"
          },
          {
            "name": "Content-Length",
            "value": "292"
          },
          // [...] trimmed for brevity
        ]
      }
    }
  ]
}

Sugerencia

En lugar de crear manualmente el archivo ficticio, puede usar MockGeneratorPlugin para generar el archivo ficticio en función de las solicitudes interceptadas.

Prioridad del orden

El proxy de desarrollo empareja los elementos ficticios en el orden en que los defina en el archivo ficticio. Si define varias respuestas con la misma dirección URL y el mismo método, El proxy de desarrollo usa la primera respuesta coincidente.

Cuando se usa la siguiente configuración, el proxy responde a todas las GET solicitudes a https://graph.microsoft.com/v1.0/me/photo con 500 Internal Server Error.

{
  "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v0.29.2/mockresponseplugin.schema.json",
  "mocks": [
    {
      "request": {
        "url": "https://graph.microsoft.com/v1.0/me/photo",
        "method": "GET"
      },
      "response": {
        "statusCode": 500
      }
    },
    {
      "request": {
        "url": "https://graph.microsoft.com/v1.0/me/photo",
        "method": "GET"
      },
      "response": {
        "statusCode": 404
      }
    }
  ]
}

Compatibilidad con carácter genérico

El proxy de desarrollo admite el uso de caracteres comodín en la propiedad URL. Puede usar el carácter asterisco (*) para que coincida con cualquier serie de caracteres de la dirección URL.

Cuando se usa la siguiente configuración, Dev Proxy responde a todas las solicitudes para obtener el perfil de cualquier usuario con la misma respuesta.

{
  "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v0.29.2/mockresponseplugin.mocksfile.schema.json",
  "mocks": [
    {
      "request": {
        "url": "https://graph.microsoft.com/v1.0/users/*"
      },
      "response": {
        "body": {
          "@odata.context": "https://graph.microsoft.com/v1.0/$metadata#users/$entity",
          "businessPhones": ["+1 425 555 0109"],
          "displayName": "Adele Vance",
          "givenName": "Adele",
          "jobTitle": "Product Marketing Manager",
          "mail": "AdeleV@M365x214355.onmicrosoft.com",
          "mobilePhone": null,
          "officeLocation": "18/2111",
          "preferredLanguage": "en-US",
          "surname": "Vance",
          "userPrincipalName": "AdeleV@M365x214355.onmicrosoft.com",
          "id": "87d349ed-44d7-43e1-9a83-5f2406dee5bd"
        }
      }
    }
  ]
}

Cuando se usa la siguiente configuración, Dev Proxy devuelve la misma imagen del disco cuando se solicita obtener el binario de la foto de cualquier usuario.

{
  "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v0.29.2/mockresponseplugin.mocksfile.schema.json",
  "mocks": [
    {
      "request": {
        "url": "https://graph.microsoft.com/v1.0/users/*/photo/$value"
      },
      "response": {
        "body": "@picture.jpg",
        "headers": [
          {
            "name": "content-type",
            "value": "image/jpeg"
          }
        ]
      }
    }
  ]
}

Cuando se usa la siguiente configuración, el proxy de desarrollo devuelve la misma respuesta cuando se solicita el perfil del usuario actual con cualquier parámetro de cadena de consulta.

{
  "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v0.29.2/mockresponseplugin.mocksfile.schema.json",
  "mocks": [
    {
      "request": {
        "url": "https://graph.microsoft.com/v1.0/me?*"
      },
      "response": {
        "body": {
          "@odata.context": "https://graph.microsoft.com/v1.0/$metadata#users/$entity",
          "businessPhones": [
            "+1 412 555 0109"
          ],
          "displayName": "Megan Bowen",
          "givenName": "Megan",
          "jobTitle": "Auditor",
          "mail": "MeganB@M365x214355.onmicrosoft.com",
          "mobilePhone": null,
          "officeLocation": "12/1110",
          "preferredLanguage": "en-US",
          "surname": "Bowen",
          "userPrincipalName": "MeganB@M365x214355.onmicrosoft.com",
          "id": "48d31887-5fad-4d73-a9f5-3c356e68a038"
        }
      }
    }
  ]
}

Respuesta con contenido de un archivo

Para mantener el archivo ficticio limpio y organizado, puede almacenar el contenido de la respuesta en un archivo independiente y hacer referencia a él en el archivo ficticio. Para indicar al proxy de desarrollo que cargue el cuerpo de respuesta ficticio desde un archivo, establezca la propiedad body en @ seguida de la ruta del archivo relativa al archivo ficticio.

Por ejemplo, la siguiente configuración de respuesta simulada indica a Dev Proxy que responda a cualquier solicitud a https://graph.microsoft.com/v1.0/me con el contenido del response.json archivo ubicado en la misma carpeta que el archivo ficticio.

{
  "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v0.29.2/mockresponseplugin.mocksfile.schema.json",
  "mocks": [
    {
      "request": {
        "url": "https://graph.microsoft.com/v1.0/me",
        "method": "GET"
      },
      "response": {
        "body": "@response.json",
        "headers": [
          {
            "name": "content-type",
            "value": "application/json; odata.metadata=minimal"
          }
        ]
      }
    }
  ]
}

El uso de @-token funciona con archivos binarios y de texto.

Configuración del proxy de desarrollo para usar las respuestas ficticias

Después de crear el archivo ficticio, debe configurar el proxy de desarrollo para usar las respuestas ficticias. Para configurar el proxy de desarrollo para simular respuestas, agregue MockResponsePlugin a la lista de complementos en el archivo devproxyrc.

{
  "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v0.29.2/rc.schema.json",
  "plugins": [
    {
      "name": "MockResponsePlugin",
      "enabled": true,
      "pluginPath": "~appFolder/plugins/DevProxy.Plugins.dll",
      "configSection": "mockResponsePlugin"
    }
  ],
  "urlsToWatch": [
    "https://jsonplaceholder.typicode.com/*"
  ],
  "mockResponsePlugin": {
    "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v0.29.2/mockresponseplugin.schema.json",
    "mocksFile": "mocks.json"
  },
  "logLevel": "information",
  "newVersionNotification": "stable",
  "showSkipMessages": true
}

Primero, agregue MockResponsePlugin a la lista de complementos. Incluye una referencia a su sección de configuración donde se especifica la ruta de acceso al archivo ficticio.

Al iniciar el proxy de desarrollo, lee el archivo ficticio y usa las respuestas ficticias para responder a las solicitudes que coinciden con los simulacros definidos.

Compatibilidad con solicitudes no ficticias

El proxy de desarrollo admite el inicio de un error cuando el proxy intercepta una solicitud no ficticia. La capacidad de error de solicitudes no ficticias es útil para identificar las solicitudes que no incluyó en el archivo ficticio.

Para habilitar esta característica, agregue y habilite el ajuste blockUnmockedRequests en la sección de configuración de MockResponsePlugin en el archivo devproxyrc.

{
  "mocksPlugin": {
    "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v0.29.2/mockresponseplugin.schema.json",
    "mocksFile": "mocks.json",
    "blockUnmockedRequests": true
  }
}

Cuando Dev Proxy intercepta una solicitud que no puede imitar, devuelve una respuesta 502 Bad Gateway.

Paso siguiente

Obtenga más información sobre MockResponsePlugin.

MockResponsePlugin

Muestras

Vea también los ejemplos relacionados del proxy de desarrollo: