Share via

Simulación de una API CRUD

  • Artículo

Al compilar aplicaciones, a menudo interactúa con las API de back-end. A veces, estas API aún no están disponibles u otros equipos los actualizan para cumplir los requisitos más recientes. Para evitar la espera, normalmente se crea una API ficticia que devuelve los datos que necesita. Aunque este enfoque le desbloquea, requiere que dedique tiempo a crear una API que finalmente reemplace por la real. Para evitar perder tiempo, puede usar dev Proxy para simular una API CRUD y acelerar el desarrollo.

CrudApiPluginCon , puede simular una API CRUD (Crear, Leer, Actualizar, Eliminar) con un almacén de datos en memoria. Con un archivo de configuración simple, puede definir qué direcciones URL admite la API ficticia y qué datos devuelve. El complemento también admite CORS para el uso entre dominios de las aplicaciones del lado cliente.

MockResponsePlugin Donde permite definir respuestas ficticias estáticas, CrudApiPlugin permite definir una API ficticia dinámica que puede usar para interactuar con los datos y ver los cambios reflejados en el conjunto de datos ficticio.

Escenario

Supongamos que va a crear una aplicación que permita a los usuarios administrar clientes. Para obtener los datos, debe llamar al /customers punto de conexión de la API de back-end. Para evitar esperar a que el equipo back-end finalice su trabajo, decide usar proxy de desarrollo para simular la API y devolver los datos que necesita.

Empiece por habilitar CrudApiPlugin y configurarlo para usar el customers-api.json archivo.

{
  "name": "CrudApiPlugin",
  "enabled": true,
  "pluginPath": "~appFolder/plugins/dev-proxy-plugins.dll",
  "configSection": "customersApi"
}

{
  "customersApi": {
    "apiFile": "customers-api.json"
  }
}

En el customers-api.json archivo, se define la API de clientes ficticios.

{
  "$schema": "https://raw.githubusercontent.com/microsoft/dev-proxy/main/schemas/v0.14.1/crudapiplugin.schema.json",
  "baseUrl": "https://api.contoso.com/v1/customers",
  "dataFile": "customers-data.json",
  "actions": [
    {
      "action": "getAll"
    },
    {
      "action": "getOne",
      "url": "/{customer-id}",
      "query": "$.[?(@.id == {customer-id})]"
    },
    {
      "action": "create"
    },
    {
      "action": "merge",
      "url": "/{customer-id}",
      "query": "$.[?(@.id == {customer-id})]"
    },
    {
      "action": "delete",
      "url": "/{customer-id}",
      "query": "$.[?(@.id == {customer-id})]"
    }
  ]
}

En la baseUrl propiedad , se define la dirección URL base de la API ficticia. En la dataFile propiedad , se define el archivo que contiene datos ficticios del cliente. En la actions propiedad , se definen las acciones admitidas y cómo se asignan a los métodos y direcciones URL HTTP. Quiere usar la API para:

  • obtener todos los clientes, llamando a GET /v1/customers
  • obtener un solo cliente mediante una llamada a GET /v1/customers/{customer-id}
  • agregue un nuevo cliente mediante una llamada a POST /v1/customers,
  • actualizar un cliente mediante una llamada a PATCH /v1/customers/{customer-id},
  • eliminar un cliente mediante una llamada a DELETE /v1/customers/{customer-id}

En las direcciones URL, se usa el {customer-id} parámetro , que el complemento reemplaza por el identificador de cliente real de la dirección URL. El complemento también usa el {customer-id} parámetro en una consulta JSONPath para buscar al cliente en el archivo de datos.

En el customers-data.json archivo, se definen los datos ficticios del cliente.

[
  {
    "id": 1,
    "name": "Contoso",
    "address": "4567 Main St Buffalo, NY 98052"
  },
  {
    "id": 2,
    "name": "Fabrikam",
    "address": "4567 Main St Buffalo, NY 98052"
  }
]

Inicie el proxy de desarrollo y llame al punto de https://api.contoso.com/v1/customers conexión. Dev Proxy intercepta la solicitud y devuelve los datos ficticios del cliente.

[
  {
    "id": 1,
    "name": "Contoso",
    "address": "4567 Main St Buffalo, NY 98052"
  },
  {
    "id": 2,
    "name": "Fabrikam",
    "address": "4567 Main St Buffalo, NY 98052"
  }
]

Paso siguiente

Obtenga más información sobre CrudApiPlugin.

CrudApiPlugin

Ejemplos

Consulte también los ejemplos relacionados de Dev Proxy: