{"id":233870,"date":"2023-02-25T18:05:00","date_gmt":"2023-02-25T15:05:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233870"},"modified":"2022-11-11T12:53:43","modified_gmt":"2022-11-11T09:53:43","slug":"guia-detallada-para-crear-y-obtener-puntos-finales-personalizados-de-la-api-rest-de-wp","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/guia-detallada-para-crear-y-obtener-puntos-finales-personalizados-de-la-api-rest-de-wp\/","title":{"rendered":"Gu\u00eda detallada para crear y obtener puntos finales personalizados de la API REST de WP"},"content":{"rendered":"\n<p>Esta publicaci\u00f3n mostrar\u00e1 c\u00f3mo crear puntos finales REST de WordPress personalizados y diferentes m\u00e9todos para realizar solicitudes a ellos. Habr\u00e1 ejemplos tanto en PHP, jQuery y Vanilla Javascript.<\/p>\n<p>Supongo que ya est\u00e1 familiarizado con lo que es la API REST de WP, pero aqu\u00ed hay un breve resumen. WordPress REST API es una interfaz JSON para enviar y recibir datos de su sitio de WordPress. Puede acceder a los puntos finales (rutas\/URL espec\u00edficas) tanto externa como internamente. WordPress ya tiene un mont\u00f3n de puntos finales disponibles, por ejemplo, para obtener publicaciones, categor\u00edas, buscar en el sitio y m\u00e1s. Vea una <a href=\"https:\/\/developer.wordpress.org\/rest-api\/reference\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">descripci\u00f3n general de los puntos finales predeterminados de WordPress<\/a> aqu\u00ed. Pero los desarrolladores son totalmente libres de crear sus propios puntos finales personalizados utilizando esta API, ya sea para realizar acciones o para obtener datos.<\/p>\n<p>Comenzaremos con el primer paso; que est\u00e1 creando puntos finales personalizados. Si solo te interesa c\u00f3mo hacer solicitudes, salta a la segunda parte.<\/p>\n<h2>Crear puntos finales personalizados<\/h2>\n<p>El registro de puntos finales personalizados se realiza en PHP. Puede agregar el c\u00f3digo al <code>functions.php<\/code>archivo de c\u00f3digo de su tema o de un complemento activo. Haga una funci\u00f3n enlazada <code>rest_api_init<\/code>y use la funci\u00f3n <code>[register_rest_route](https:\/\/developer.wordpress.org\/reference\/functions\/register_rest_route\/)()<\/code>para cada punto final que desee agregar.<\/p>\n<p>Como primer par\u00e1metro <code>register_rest_route()<\/code>, debe proporcionar un espacio de nombres \u00fanico para asegurarse de que sus puntos finales no entren en conflicto con ning\u00fan otro. Usa el slug de tu tema o plugin. Es una pr\u00e1ctica com\u00fan incluir un <code>\/<\/code>seguido de un n\u00famero de versi\u00f3n para su c\u00f3digo. Como ejemplo, usar\u00e9 el espacio de nombres <code>awhitepixel\/v1<\/code>. El segundo par\u00e1metro es la ruta (que sigue al espacio de nombres). Finalmente, puede proporcionar opcionalmente una matriz como tercer par\u00e1metro con opciones. En esta matriz, puede, por ejemplo, definir el m\u00e9todo de solicitud (GET, POST o cualquier otro), definir par\u00e1metros y, lo que es m\u00e1s importante, definir la funci\u00f3n que se ejecutar\u00e1 cuando se solicite ese punto final.<\/p>\n<p>Como m\u00ednimo, debe proporcionar los argumentos &#8216;m\u00e9todo&#8217; y &#8216;devoluci\u00f3n de llamada&#8217; (que es la funci\u00f3n para manejar los datos del punto final) como tercer par\u00e1metro. Para &#8216;m\u00e9todo&#8217; puede configurarlos como &#8216; <code>GET'<\/code>, <code>'POST'<\/code>, <code>'PUT'<\/code>o cualquier otro m\u00e9todo de solicitud v\u00e1lido (o una matriz de m\u00faltiples), pero recomiendo usar los valores predeterminados de WordPress para esto. Son los siguientes:<\/p>\n<ul>\n<li><code>WP_REST_Server::READABLE<\/code> m\u00e9todo &#8216; <code>GET<\/code>&#8216;<\/li>\n<li><code>WP_REST_Server::EDITABLE<\/code> m\u00e9todos &#8216; <code>POST<\/code>&#8216;, &#8216; <code>PUT<\/code>&#8216; y &#8216; <code>PATCH<\/code>&#8216;<\/li>\n<li><code>WP_REST_Server::DELETABLE<\/code> m\u00e9todo &#8216; <code>DELETE<\/code>&#8216;<\/li>\n<li><code>WP_REST_Server::ALLMETHODS<\/code> todos los m\u00e9todos anteriores<\/li>\n<\/ul>\n<p>Vamos a crear un punto final personalizado b\u00e1sico al que se pueda acceder mediante solicitudes GET:<\/p>\n<pre><code>add_action( 'rest_api_init', function() {\n    register_rest_route( 'awhitepixel\/v1', '\/getsomedata', [\n        'method'   =&gt; WP_REST_Server::READABLE,\n        'callback' =&gt; 'awhitepixel_rest_route_getsomedata',\n    ] );\n} );<\/code><\/pre>\n<p>En la l\u00ednea <code>#2<\/code>hemos definido nuestro punto final personalizado como &#8216; <code>awhitepixel\/v1\/getsomedata<\/code>&#8216;. La URL completa ser\u00eda la URL ra\u00edz de la API REST de WordPress con el prefijo, que es <code>&lt;yourdomain&gt;\/wp-json<\/code>. Por lo tanto, la URL completa del punto final anterior ser\u00eda &#8216; <code>&lt;yourdomain&gt;\/wp-json\/awhitepixel\/v1\/getsomedata<\/code>&#8216;. En l\u00ednea <code>#4<\/code>, proporcionamos un nombre de funci\u00f3n como devoluci\u00f3n de llamada, que agregaremos en breve.<\/p>\n<p>Al registrar (o cambiar) las rutas de la API REST usando <code>register_rest_route()<\/code>, deber\u00e1 <strong>vaciar sus enlaces permanentes<\/strong> para que funcione. Puede hacerlo visitando Configuraci\u00f3n&gt; Enlaces permanentes en el administrador y simplemente haga clic en Guardar.<\/p>\n<p>Todav\u00eda no hemos definido la funci\u00f3n de devoluci\u00f3n de llamada, que es la funci\u00f3n para el c\u00f3digo que maneja la reacci\u00f3n de usar este punto final. Debe devolver una respuesta v\u00e1lida de REST (en JSON), por lo que deber\u00e1 devolver algo aunque se supone que el punto final no debe devolver datos. Puede usar la funci\u00f3n <code>[rest_ensure_response](https:\/\/developer.wordpress.org\/reference\/functions\/rest_ensure_response\/)()<\/code>funci\u00f3n o crear una instancia de <code>WP_REST_Response<\/code>objeto como retorno de la devoluci\u00f3n de llamada. Como par\u00e1metro de la funci\u00f3n de devoluci\u00f3n de llamada, obtenemos un <code>WP_REST_Request<\/code>objeto que contiene toda la informaci\u00f3n sobre la solicitud, incluidos los par\u00e1metros. Vamos a crear una funci\u00f3n de devoluci\u00f3n de llamada simple que simplemente env\u00ede un texto como respuesta:<\/p>\n<pre><code>function awhitepixel_rest_route_getsomedata( $request) {\n    $response = 'Hello there!';\n    return rest_ensure_response( $response );\n}<\/code><\/pre>\n<p>Esta es la forma m\u00e1s b\u00e1sica de escribir una devoluci\u00f3n de llamada. La funci\u00f3n <code>rest_ensure_response()<\/code>se asegura de que cualquier dato que proporcionemos (la cadena) se convierta en una respuesta v\u00e1lida REST. Obviamente, querr\u00e1 agregar m\u00e1s c\u00f3digo aqu\u00ed, ya sea para hacer algo en WordPress o para obtener y enviar datos.<\/p>\n<p>Con el c\u00f3digo anterior (registrando el punto final y la funci\u00f3n de devoluci\u00f3n de llamada) puede intentar ir a la URL en su navegador y ver qu\u00e9 obtiene. (Recuerde vaciar sus enlaces permanentes). Ir a <code>&lt;domain&gt;\/wp-json\/awhitepixel\/v1\/getsomedata<\/code>en el navegador mostrar\u00e1 la cadena &quot;\u00a1Hola!&quot;.<\/p>\n<h3>Aceptar par\u00e1metros<\/h3>\n<p>Es muy com\u00fan y \u00fatil permitir que los puntos finales acepten par\u00e1metros. Por ejemplo, si su sitio tiene, por ejemplo, datos de productos, querr\u00e1 un punto final en el que pueda proporcionar una ID de producto para obtener los datos de ese producto. Hay dos maneras de hacerlo. La forma m\u00e1s com\u00fan es usar la cadena de consulta GET (que se agregan despu\u00e9s de la URL despu\u00e9s de un <code>?<\/code>, separados por <code>&amp;<\/code>el formato clave=valor. Por ejemplo, &#8216; <code>&lt;endpoint&gt;\/product\/?product_id=14<\/code>&#8216;). Alternativamente, puede definir un patr\u00f3n de URL &quot;m\u00e1s bonito&quot;, donde los par\u00e1metros son parte de la ruta. Por ejemplo &#8216; <code>&lt;endpoint&gt;\/product\/14\/<\/code>&#8216;. Sin embargo, este \u00faltimo m\u00e9todo requiere cierto conocimiento de las expresiones regulares. El m\u00e9todo que elija depende de usted, demostrar\u00e9 ambos a continuaci\u00f3n.<\/p>\n<h4>OBTENER par\u00e1metros<\/h4>\n<p>Definir posibles par\u00e1metros GET para su punto final es usar la <code>args<\/code>tecla &#8216; &#8216; en <code>register_rest_route()<\/code>el tercer par\u00e1metro. Para cada par\u00e1metro que desee permitir, defina el valor clave (en el ejemplo anterior &#8216; <code>product_id<\/code>&#8216;) y una serie de opciones para ese par\u00e1metro. Como opciones puedes definir el formato del par\u00e1metro (si espera por ejemplo un n\u00famero o una cadena) y tambi\u00e9n decidir si ese par\u00e1metro es requerido o no.<\/p>\n<p>Como ejemplo, queremos permitir que nuestro punto final acepte &#8216; <code>product_id<\/code>&#8216; como un n\u00famero no requerido.<\/p>\n<pre><code>add_action( 'rest_api_init', function() {\n    register_rest_route( 'awhitepixel\/v1', '\/getsomedata', [\n        'method'   =&gt; WP_REST_Server::READABLE,\n        'callback' =&gt; 'awhitepixel_rest_route_getsomedata',\n        'args'     =&gt; [\n            'product_id' =&gt; [\n                'required' =&gt; false,\n                'type'     =&gt; 'number',\n            ],\n        ],\n    ] );\n} );\n\u00a0\nfunction awhitepixel_rest_route_getsomedata( $request) {\n    $product_id = $request-&gt;get_param( 'product_id' );\n    if (! empty( $product_id)) {\n        $response = 'Return product data for ID '. $product_id;\n    } else {\n        $response = 'Hello there!';\n    }\n    return rest_ensure_response( $response );\n}<\/code><\/pre>\n<p>Si define un par\u00e1metro como verdadero en <code>required<\/code>, WordPress se encargar\u00e1 de devolver una respuesta de error 400. Del mismo modo, si pasa un formato no v\u00e1lido, por ejemplo, &quot;hola&quot; como valor a un par\u00e1metro que espera un n\u00famero.<\/p>\n<p>En la l\u00ednea <code>#15<\/code>de la funci\u00f3n de devoluci\u00f3n de llamada, ver\u00e1 c\u00f3mo obtener el valor del par\u00e1metro de la solicitud; usando el m\u00e9todo <code>get_param()<\/code>en el objeto pasado <code>WP_REST_Request<\/code>. Como ejemplo mostrar\u00e9 diferentes respuestas dependiendo de si <code>product_id<\/code>se proporcion\u00f3 o no (recuerda que lo hemos definido como opcional). La l\u00f3gica de modificar su c\u00f3digo de acuerdo con los par\u00e1metros provistos depende completamente de usted y su proyecto. Puede tener menos puntos finales que acepten muchos par\u00e1metros o muchos m\u00e1s puntos finales separados para cada caso espec\u00edfico.<\/p>\n<p>Con el c\u00f3digo anterior, obtendr\u00e9 &quot;\u00a1Hola!&quot; cuando visito <code>&lt;yourdomain&gt;\/awhitepixel\/v1\/getsomedata<\/code>y &quot;Devolver datos de producto para ID 14&quot; cuando voy a <code>&lt;yourdomain&gt;\/awhitepixel\/v1\/getsomedata\/?product_id=14<\/code>.<\/p>\n<h4>Par\u00e1metros como parte de la ruta<\/h4>\n<p>Si desea permitir que los par\u00e1metros formen parte de la ruta en lugar de la cadena de consulta GET, puede hacerlo. Luego proporcionar\u00e1 un patr\u00f3n de expresiones regulares en la ruta: el segundo par\u00e1metro para <code>register_rest_route()<\/code>.<\/p>\n<p>La creaci\u00f3n de patrones de expresiones regulares puede parecer bastante cr\u00edptica, pero dado que es un tema completo, encontrar\u00e1 f\u00e1cilmente ejemplos para casos espec\u00edficos si lo busca en Google. Mostrar\u00e9 un ejemplo de c\u00f3mo definir una expresi\u00f3n regular que acepta un n\u00famero de cualquier longitud;<\/p>\n<pre><code>add_action( 'rest_api_init', function() {\n    register_rest_route( 'awhitepixel\/v1', '\/getsomedata\/(?P&lt;product_id&gt;[d]+)', [\n        'method'   =&gt; WP_REST_Server::READABLE,\n        'callback' =&gt; 'awhitepixel_rest_route_getsomedata',\n    ] );\n} );\n\u00a0\nfunction awhitepixel_rest_route_getsomedata( $request) {\n    $product_id = $request-&gt;get_param( 'product_id' );\n    $response   = 'Return product data for ID '. $product_id;\n    return rest_ensure_response( $response );\n}<\/code><\/pre>\n<p>Como puede ver en la l\u00ednea n. \u00b0 2, agregu\u00e9 el patr\u00f3n de expresiones regulares <code>(?P&lt;product_id&gt;[d]+)<\/code>al final. Estos patrones significan que debemos recopilar un n\u00famero (<code>d<\/code>) de cualquier longitud (<code>+<\/code>) y asignar el valor recopilado a la clave del par\u00e1metro <code>product_id<\/code>. Y en nuestra funci\u00f3n de devoluci\u00f3n de llamada usamos exactamente el mismo m\u00e9todo que usamos cuando configuramos los par\u00e1metros GET; <code>get_param()<\/code>en el <code>WP_REST_Request<\/code>objeto proporcionado a la funci\u00f3n.<\/p>\n<p>Con el c\u00f3digo anterior (despu\u00e9s de vaciar los enlaces permanentes) podemos visitar la URL <code>&lt;yourdomain&gt;\/wp-json\/awhitepixel\/v1\/getsomedata\/14<\/code>para obtener nuestra respuesta. Este m\u00e9todo ciertamente da como resultado URL &quot;m\u00e1s bonitas&quot;, pero el c\u00f3digo puede volverse m\u00e1s dif\u00edcil de leer y corregir errores. Cualquiera que sea el m\u00e9todo que elija depende de usted.<\/p>\n<h3>Devolver la respuesta adecuada<\/h3>\n<p>Anteriormente mencion\u00e9 brevemente c\u00f3mo la funci\u00f3n de devoluci\u00f3n de llamada debe devolver una respuesta REST adecuada. Hasta ahora hemos usado el m\u00e1s simple <code>rest_ensure_response()<\/code>. Pero a veces es posible que desee tener m\u00e1s control sobre la devoluci\u00f3n de su punto final. Por ejemplo, es posible que desee controlar el <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/Status\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">c\u00f3digo de estado de respuesta HTTP<\/a>. Supongamos que est\u00e1 creando un punto final en el que puede proporcionar una identificaci\u00f3n de producto y obtener datos para ese producto. Pero si ese ID de producto no existe, o cualquier otro par\u00e1metro causa confusi\u00f3n, es posible que desee devolver un c\u00f3digo de estado de, por ejemplo, 400 (Solicitud incorrecta) o 404 (No encontrado). O tal vez 500 (error del servidor). Pasar siempre 200 (\u00c9xito) incluso si la solicitud fue incorrecta puede causar problemas al final del remitente.<\/p>\n<p>Entonces recomendar\u00eda su funci\u00f3n de devoluci\u00f3n de llamada que devuelve un <code>WP_REST_Response<\/code>objeto. Con este objeto puedes controlar varias cosas, incluido el c\u00f3digo de estado. \u00a1Es m\u00e1s f\u00e1cil de lo que piensas! En la forma m\u00e1s simple, crear\u00eda una nueva instancia de <code>WP_REST_Response<\/code>, proporcionar\u00eda una matriz de los datos para devolver como primer par\u00e1metro y el c\u00f3digo de estado como segundo par\u00e1metro. Como ejemplo:<\/p>\n<pre><code>function awhitepixel_rest_route_getsomedata( $request) {\n    $product_id = $request-&gt;get_param( 'product_id' );\n    \/\/ Do some external function call that returns product data or empty array on error\n    $product_data = awhitepixel_get_product( $product_id );\n    if (empty( $product_data)) {\n        return new WP_REST_Response( [\n            'message' =&gt; 'Product was not found',\n        ], 400 );\n    }\n    return new WP_REST_Response( $product_data, 200 );\n}<\/code><\/pre>\n<p>En el ejemplo anterior almacenamos el retorno de la <code>awhitepixel_get_product()<\/code>funci\u00f3n en una variable. Esta funci\u00f3n no existe y debe reemplazarla con la funci\u00f3n que debe obtener (o realizar) las acciones que desea en su proyecto. Pero digamos que la funci\u00f3n devuelve una matriz vac\u00eda y eso significa que algo sali\u00f3 mal (por ejemplo, el producto no exist\u00eda). Luego, podr\u00edamos devolver un <code>WP_REST_Response<\/code>objeto con el c\u00f3digo de estado 400 y, opcionalmente, un mensaje como datos que explican por qu\u00e9 fall\u00f3 (l\u00ednea <code>#5-9<\/code>). De lo contrario, devolvemos los datos con el c\u00f3digo de estado 200 \u00c9xito (l\u00ednea <code>#10<\/code>).<\/p>\n<h2>Env\u00edo de solicitudes a puntos finales (personalizados)<\/h2>\n<p>Pasemos al otro lado, la parte de env\u00edo: c\u00f3mo enviar solicitudes a nuestros puntos finales personalizados. Normalmente, enviar\u00eda solicitudes de API REST de WP usando Javascript y aqu\u00ed encontrar\u00e1 ejemplos del uso de jQuery, la biblioteca de WordPress y Javascript est\u00e1ndar. Es poco com\u00fan, pero posible, realizar una solicitud REST con PHP tambi\u00e9n, por lo que tambi\u00e9n he incluido un ejemplo de eso.<\/p>\n<p>Lo primero que debe tener en cuenta es que obviamente necesita conocer la URL completa para enviar una solicitud. No recomiendo codificar el dominio (antes del punto final), ya que hay varias formas de obtener esto si su Javascript est\u00e1 funcionando dentro de WordPress. En versiones anteriores de WordPress, necesitar\u00eda usar <code>[wp_localize_script](https:\/\/developer.wordpress.org\/reference\/functions\/wp_localize_script\/)()<\/code>PHP y pasar la URL REST principal como una variable global de Javascript. Pero los ejemplos a continuaci\u00f3n muestran una forma m\u00e1s nueva y mejor de obtener la URL ra\u00edz REST del sitio de WordPress.<\/p>\n<p>Otra cosa a tener en cuenta es que para su proyecto probablemente envolver\u00eda las solicitudes como resultado de alguna acci\u00f3n. Para simplificar las cosas, estoy preparando todas las solicitudes en DOM, por lo que debe asegurarse de incluir el c\u00f3digo de solicitud, por ejemplo, como resultado de que un visitante haga clic en un bot\u00f3n.<\/p>\n<h3>Usando jQuery<\/h3>\n<p>Si tiene y desea usar la biblioteca jQuery, puede usar su <code>[$.ajax](https:\/\/api.jquery.com\/jquery.ajax\/)()<\/code>funci\u00f3n.<\/p>\n<p>Pero primero una nota sobre las dependencias de su archivo Javascript. Obviamente, su script necesitar\u00eda una <code>'jquery'<\/code>dependencia para ponerlo en cola. Pero para acceder f\u00e1cilmente a la URL ra\u00edz REST de WordPress, agregue otra dependencia; &#8216;solicitud de wp-api&#8217;. Esto garantiza que la variable Javascript <code>wpApiSettings.root<\/code>est\u00e9 disponible y contenga la URL ra\u00edz de la API REST. Aqu\u00ed hay un ejemplo de c\u00f3mo pondr\u00eda en cola su secuencia de comandos para ilustrar esta dependencia;<\/p>\n<pre><code>add_action( 'wp_enqueue_scripts', function() {\n    wp_enqueue_script(\n        'awp-javascript-wp-rest', \n        get_stylesheet_directory_uri(). '\/assets\/js\/javascript_wp_rest.js', \n        [ 'jquery', 'wp-api-request' ], \n        null, \n        true\n    );\n} );<\/code><\/pre>\n<p>La l\u00ednea <code>#5<\/code>es la interesante; donde definimos tanto jQuery <code>wp-api-request<\/code>como dependencia. Luego, en nuestro archivo Javascript, podemos realizar una solicitud de API REST de WP de la siguiente manera:<\/p>\n<pre><code>( function( $) {\n    \/\/ Send request\n    $.ajax( {\n        url: wpApiSettings.root + 'awhitepixel\/v1\/getsomedata',\n        method: 'GET',\n        data: {\n            product_id: 14\n        },\n        success: function( data) {\n            console.log( data );\n        }\n    } );\n} )( jQuery );<\/code><\/pre>\n<p>Esto es tan b\u00e1sico como parece. Usamos <code>$.ajax()<\/code>para enviar una solicitud GET a la URL definida. Como URL, usamos <code>wpApiSettings.root<\/code>para obtener la URL ra\u00edz de la API REST y luego agregamos el punto final deseado despu\u00e9s de ella; en nuestro caso, el punto final personalizado que creamos anteriormente. Opcionalmente podemos pasar par\u00e1metros en &#8216;datos&#8217;. El ejemplo anterior pasa <code>product_id<\/code>con el valor 14 al punto final. Finalmente en la <code>success<\/code>funci\u00f3n recibimos la solicitud (exitosa) como par\u00e1metro y somos libres de hacer lo que queramos con ella. En el ejemplo anterior, simplemente lo imprimimos en la consola.<\/p>\n<h3>Uso de la biblioteca de WordPress (no jQuery)<\/h3>\n<p>Si su sitio de WordPress no tiene o puede usar la biblioteca jQuery, puede usar la biblioteca Javascript de WordPress para realizar f\u00e1cilmente una solicitud de API REST. La funci\u00f3n es la que est\u00e1 disponible en el espacio de nombres <code>apiFetch<\/code>global de WordPress. es un m\u00e9todo contenedor para la funci\u00f3n est\u00e1ndar del navegador (que se muestra a continuaci\u00f3n).<code>wp``wp.apiFetch()``fetch()<\/code><\/p>\n<p>Nuestro Javascript necesitar\u00e1 la dependencia &#8216;wp-api&#8217; para usar wp.apiFetch(). Por ejemplo, podr\u00edamos poner en cola el script de esta manera:<\/p>\n<pre><code>add_action( 'wp_enqueue_scripts', function() {\n    wp_enqueue_script(\n        'javascript-wp-rest', \n        get_stylesheet_directory_uri(). '\/assets\/js\/javascript_wp_rest.js', \n        [ 'wp-api' ], \n        null, \n        true\n    );\n} );<\/code><\/pre>\n<p>Encontrar\u00e1 la dependencia cr\u00edtica en la l\u00ednea <code>#5<\/code>. Con esto nos hemos asegurado de que nuestro archivo Javascript <code>wp.apiFetch()<\/code>est\u00e9 disponible. Aqu\u00ed hay un ejemplo b\u00e1sico en su uso:<\/p>\n<pre><code>function awpSendRequest() {\n    wp.apiFetch( {\n        path: 'awhitepixel\/v1\/getsomedata?product_id=14',\n    } ).then( data =&gt; {\n        console.log( data );\n    } );\n}\n\u00a0\nif (document.readyState != 'loading') {\n    awpSendRequest();\n} else {\n    document.addEventListener( 'DOMContentLoaded', awpSendRequest );\n}<\/code><\/pre>\n<p>Tenga en cuenta que la l\u00ednea <code>#9-13<\/code>es solo l\u00f3gica para ejecutar la funci\u00f3n despu\u00e9s de que DOM est\u00e9 listo.<\/p>\n<p>Un beneficio de usar <code>wp.apiFetch()<\/code>sobre lo normal <code>fetch()<\/code>es que podemos usar &#8216;ruta&#8217; que requiere solo el punto final, en lugar de &#8216;url&#8217; que requiere la URL completa. Otro beneficio es que la primera &quot;cadena&quot; <code>.then()<\/code>devuelve los datos ya formateados en JSON. Cuando usa el original <code>.fetch()<\/code>, necesita m\u00e1s cadenas &quot;.then()&quot;. Eche un vistazo al siguiente ejemplo (&quot;Uso de Javascript vainilla&quot;) para ver a qu\u00e9 me refiero.<\/p>\n<p>Tenga en cuenta que <code>fetch()<\/code>(y como consecuencia <code>wp.apiFetch()<\/code>) <a href=\"https:\/\/github.com\/github\/fetch\/issues\/256\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">no proporciona una forma &quot;limpia&quot; de pasar par\u00e1metros<\/a>. Tendremos que construir manualmente la cadena de consulta GET en &#8216;ruta&#8217;, como lo hice anteriormente: <code>'..\/getsomedata?product_id=14'<\/code>.<\/p>\n<p>Si est\u00e1 interesado en c\u00f3mo incorporar <code>wp.apiFetch<\/code>y personalizar puntos finales en un bloque de Gutenberg, he escrito un tutorial separado sobre esto:<\/p>\n<h3>Usando vainilla Javascript<\/h3>\n<p>Como ejemplo final de los m\u00e9todos de Javascript para enviar una solicitud a la API REST de WP, existe una forma pura y sencilla, que no es de WordPress, usando <code>fetch()<\/code>. Tenga en cuenta que uso la variable global de WordPress para obtener la URL ra\u00edz REST. Si est\u00e1 agregando este script fuera de WordPress, probablemente necesite codificar la URL completa.<\/p>\n<p>Como todav\u00eda quiero acceder a la variable global para la URL ra\u00edz de WP REST, agrego <code>'wp-api-request'<\/code>dependencia a mi funci\u00f3n de puesta en cola de Javascript, as\u00ed:<\/p>\n<pre><code>add_action( 'wp_enqueue_scripts', function() {\n    wp_enqueue_script(\n        'awp-javascript-wp-rest', \n        get_stylesheet_directory_uri(). '\/assets\/js\/javascript_wp_rest.js', \n        [ 'wp-api-request' ], \n        null, \n        true\n    );\n} );<\/code><\/pre>\n<p>Y luego, en nuestro archivo Javascript, un ejemplo m\u00e1s b\u00e1sico ser\u00eda:<\/p>\n<pre><code>function awpSendRequest() {\n    fetch( wpApiSettings.root + 'awhitepixel\/v1\/getsomedata?product_id=14', {\n        method: 'GET',\n    }) .then( data =&gt; data.json()) .then( data =&gt; {\n        console.log( data );\n    } );\n}\n\u00a0\nif (document.readyState != 'loading') {\n    awpSendRequest();\n} else {\n    document.addEventListener( 'DOMContentLoaded', awpSendRequest );\n}<\/code><\/pre>\n<p>Como se mencion\u00f3 anteriormente (&quot;Usar la biblioteca de WordPress&quot;) <code>.fetch()<\/code>no admite una forma agradable y limpia de proporcionar par\u00e1metros. Por lo tanto, deber\u00e1 crear manualmente la cadena de consulta (&quot;?product_id=14&quot;) en la URL.<\/p>\n<p>Tenga en cuenta que la solicitud de b\u00fasqueda no se devuelve directamente con los datos, sino que devuelve una promesa. Es por eso que necesitamos encadenar \u00bb <code>.then()<\/code>&quot; antes de que podamos manejar los datos. Si esto no le resulta familiar, le recomiendo que busque c\u00f3mo trabajar con <code>fetch()<\/code>: hay muchas explicaciones y ejemplos en Google que pueden explicarlo mejor que yo.<\/p>\n<p>Si desea verificar el c\u00f3digo de estado de respuesta REST a su solicitud, puede hacerlo as\u00ed;<\/p>\n<pre><code>fetch( wpApiSettings.root + 'awhitepixel\/v1\/getsomedata?product_id=14', {\n    method: 'GET',\n}) .then( data =&gt; {\n    if (data.status != 200) {\n        console.log( data.status + ' Error: ' + data.statusText );\n        return;\n    }\n    data.json().then( data =&gt; {\n        console.log( data );\n    } );\n} );<\/code><\/pre>\n<p>En el ejemplo anterior al registrar puntos finales personalizados, mencion\u00e9 c\u00f3mo podr\u00eda devolver diferentes c\u00f3digos de estado HTTP. El c\u00f3digo anterior muestra un ejemplo de c\u00f3mo verificar el c\u00f3digo de estado de la respuesta, que est\u00e1 disponible en la propiedad del objeto devuelto <code>.status<\/code>. En el ejemplo anterior, verifico si el c\u00f3digo de estado es diferente a 200 (\u00c9xito) en la l\u00ednea <code>#5<\/code>. Solo si el c\u00f3digo de estado era 200, convierto el retorno de datos de la promesa en JSON (l\u00ednea <code>#9<\/code>).<\/p>\n<h3>Usando PHP<\/h3>\n<p>Es menos com\u00fan, pero a\u00fan posible, realizar una solicitud REST internamente en WordPress usando PHP. As\u00ed es c\u00f3mo.<\/p>\n<p>Para enviar una solicitud de API REST de WP en PHP, creamos un <code>WP_REST_Request<\/code>objeto (exactamente como lo que se pasa a nuestra funci\u00f3n de devoluci\u00f3n de llamada anteriormente en esta publicaci\u00f3n). En esta instancia de objeto, definimos el m\u00e9todo (por ejemplo, GET) y la ruta del punto final. Opcionalmente tambi\u00e9n podemos a\u00f1adir par\u00e1metros. Luego usamos la funci\u00f3n de WordPress <code>[rest_do_request](https:\/\/developer.wordpress.org\/reference\/functions\/rest_do_request\/)()<\/code>con esta instancia de solicitud. Finalmente obtenemos la respuesta con la <code>[response_to_data](https:\/\/developer.wordpress.org\/reference\/classes\/wp_rest_server\/response_to_data\/)()<\/code>funci\u00f3n disponible en <code>WP_REST_Server'<\/code>la clase s.<\/p>\n<pre><code>function awp_do_php_rest_request( $product_id) {\n    $request = new WP_REST_Request( 'GET', '\/awhitepixel\/v1\/getsomedata' );\n    $request-&gt;set_query_params( [\n        'product_id' =&gt; $product_id\n    ] );\n    $response = rest_do_request( $request );\n    return rest_get_server()-&gt;response_to_data( $response, false );\n}<\/code><\/pre>\n<p>La llamada a la funci\u00f3n <code>set_query_params()<\/code>(l\u00ednea <code>#3-5<\/code>) es opcional y solo necesaria si desea pasar par\u00e1metros. Siguiendo el hilo rojo en esta publicaci\u00f3n, incluir\u00e9 un ejemplo de c\u00f3mo pasar el par\u00e1metro de la funci\u00f3n a la clave del par\u00e1metro REST <code>product_id<\/code>.<\/p>\n<p>La l\u00ednea <code>#6<\/code>es donde enviamos la solicitud. Y en l\u00ednea <code>#7<\/code>devolvemos los datos de la respuesta. Entonces, si tuvi\u00e9ramos que llamar a esta funci\u00f3n PHP, por ejemplo <code>awp_do_php_rest_request( 14 )<\/code>, obtendr\u00edamos la respuesta que definimos en ese punto final (una matriz con una cadena si todav\u00eda usa el mismo ejemplo que el comienzo de esta publicaci\u00f3n).<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fuente de grabaci\u00f3n:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/awhitepixel.com\" class=\"external external_icon\">awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>C\u00f3mo crear puntos finales REST de WordPress personalizados y diferentes m\u00e9todos para realizarles solicitudes. Ejemplos en PHP, jQuery y vanilla Javascript.<\/p>\n","protected":false},"author":1,"featured_media":151729,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[892,892,716,716,935,935,914,1110,914,840,840,861,861],"tags":[1172],"class_list":["post-233870","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo","category-desarrollador","category-gutenberg-2","category-otro","category-n-a","category-tutoriales","category-wordpress-2","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/233870","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/comments?post=233870"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/233870\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/151729"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=233870"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=233870"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=233870"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}