{"id":233942,"date":"2023-02-25T18:29:00","date_gmt":"2023-02-25T15:29:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233942"},"modified":"2022-11-11T13:19:22","modified_gmt":"2022-11-11T10:19:22","slug":"guida-approfondita-alla-creazione-e-al-recupero-di-endpoint-api-rest-wp-personalizzati","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/guida-approfondita-alla-creazione-e-al-recupero-di-endpoint-api-rest-wp-personalizzati\/","title":{"rendered":"Guida approfondita alla creazione e al recupero di endpoint API REST WP personalizzati"},"content":{"rendered":"\n<p>Questo post mostrer\u00e0 come creare endpoint REST WordPress personalizzati e diversi metodi per eseguire le richieste. Ci saranno esempi in PHP, jQuery e vanilla Javascript.<\/p>\n<p>Presumo che tu abbia gi\u00e0 familiarit\u00e0 con cos&#8217;\u00e8 l&#8217;API REST di WP, ma ecco un breve riassunto. L&#8217;API REST di WordPress \u00e8 un&#8217;interfaccia JSON per inviare e ricevere dati dal tuo sito WordPress. \u00c8 possibile accedere agli endpoint (percorsi\/URL specifici) sia esternamente che internamente. WordPress ha gi\u00e0 un sacco di endpoint disponibili, ad esempio per recuperare post, categorie, cercare nel sito e altro ancora. Vedi una <a href=\"https:\/\/developer.wordpress.org\/rest-api\/reference\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">panoramica degli endpoint WordPress predefiniti<\/a> qui. Ma gli sviluppatori sono completamente liberi di creare i propri endpoint personalizzati utilizzando questa API, per eseguire azioni o recuperare dati.<\/p>\n<p>Inizieremo con il primo passaggio; che sta creando endpoint personalizzati. Se sei interessato solo a come fare richieste, passa alla seconda parte.<\/p>\n<h2>Crea endpoint personalizzati<\/h2>\n<p>La registrazione di endpoint personalizzati viene eseguita in PHP. Puoi aggiungere il codice al <code>functions.php<\/code>file di codice del tuo tema o di un plug-in attivo. Crea una funzione agganciata <code>rest_api_init<\/code>e usa la funzione <code>[register_rest_route](https:\/\/developer.wordpress.org\/reference\/functions\/register_rest_route\/)()<\/code>per ogni endpoint che desideri aggiungere.<\/p>\n<p>Come primo parametro <code>register_rest_route()<\/code>devi fornire uno spazio dei nomi univoco per assicurarti che i tuoi endpoint non siano in conflitto con altri. Usa lo slug del tuo tema o del plugin. \u00c8 pratica comune quindi includere un <code>\/<\/code>seguito da un numero di versione per il codice. Come esempio user\u00f2 lo spazio dei nomi <code>awhitepixel\/v1<\/code>. Il secondo parametro \u00e8 il percorso (che segue lo spazio dei nomi). Infine puoi opzionalmente fornire un array come terzo parametro con opzioni. In questo array puoi ad esempio definire il metodo di richiesta (GET, POST o qualsiasi altro), definire i parametri e, soprattutto, definire la funzione da eseguire quando viene richiesto quell&#8217;endpoint.<\/p>\n<p>Come terzo parametro dovresti fornire gli argomenti &#8216;method&#8217; e &#8216;callback&#8217; (che \u00e8 la funzione per gestire i dati dell&#8217;endpoint). Per &#8216;metodo&#8217; puoi impostarli come &#8216; <code>GET'<\/code>, <code>'POST'<\/code>, <code>'PUT'<\/code>, o qualsiasi altro metodo di richiesta valido (o un array di multipli), ma per questo consiglio di utilizzare le impostazioni predefinite di WordPress. Sono i seguenti:<\/p>\n<ul>\n<li><code>WP_REST_Server::READABLE<\/code> metodo &#8216; <code>GET<\/code>&#8216;<\/li>\n<li><code>WP_REST_Server::EDITABLE<\/code> metodi &#8216; <code>POST<\/code>&#8216;, &#8216; <code>PUT<\/code>&#8216; e &#8216; <code>PATCH<\/code>&#8216;<\/li>\n<li><code>WP_REST_Server::DELETABLE<\/code> metodo &#8216; <code>DELETE<\/code>&#8216;<\/li>\n<li><code>WP_REST_Server::ALLMETHODS<\/code> tutti i metodi di cui sopra<\/li>\n<\/ul>\n<p>Creiamo un endpoint personalizzato di base che pu\u00f2 essere raggiunto utilizzando le richieste 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>Alla riga <code>#2<\/code>abbiamo definito il nostro endpoint personalizzato come &#8216; <code>awhitepixel\/v1\/getsomedata<\/code>&#8216;. L&#8217;URL completo sarebbe l&#8217;URL radice dell&#8217;API REST di WordPress con prefisso, ovvero <code>&lt;yourdomain&gt;\/wp-json<\/code>. Quindi l&#8217;URL completo dell&#8217;endpoint sopra sarebbe &quot; <code>&lt;yourdomain&gt;\/wp-json\/awhitepixel\/v1\/getsomedata<\/code>&quot;. Alla riga <code>#4<\/code>abbiamo fornito un nome di funzione come callback, che aggiungeremo a breve.<\/p>\n<p>Quando registri (o modifichi) i percorsi dell&#8217;API REST utilizzando <code>register_rest_route()<\/code>, dovrai <strong>svuotare i tuoi permalink<\/strong> affinch\u00e9 funzionino. Puoi farlo visitando Impostazioni&gt; Permalink in amministratore e fai semplicemente clic su Salva.<\/p>\n<p>Non abbiamo ancora definito la funzione di callback, che \u00e8 la funzione per il codice che gestisce la reazione dell&#8217;utilizzo di questo endpoint. Deve restituire una risposta valida REST (in JSON), quindi dovrai restituire qualcosa anche se l&#8217;endpoint non dovrebbe restituire dati. \u00c8 possibile utilizzare la funzione <code>[rest_ensure_response](https:\/\/developer.wordpress.org\/reference\/functions\/rest_ensure_response\/)()<\/code>funzione o creare un&#8217;istanza di <code>WP_REST_Response<\/code>oggetto come ritorno del callback. Come parametro della funzione di callback otteniamo un <code>WP_REST_Request<\/code>oggetto che contiene tutte le informazioni sulla richiesta, inclusi eventuali parametri. Creiamo una semplice funzione di callback che invia semplicemente del testo come risposta:<\/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>Questo \u00e8 il modo pi\u00f9 semplice per scrivere una richiamata. La funzione <code>rest_ensure_response()<\/code>assicura che tutti i dati forniti (la stringa) vengano convertiti in una risposta valida REST. Ovviamente vorrai aggiungere pi\u00f9 codice qui, per fare qualcosa in WordPress o recuperare e inviare i dati.<\/p>\n<p>Con il codice sopra (registrazione dell&#8217;endpoint e della funzione di callback) puoi provare ad andare all&#8217;URL nel tuo browser e vedere cosa ottieni. (Ricordati di svuotare i tuoi permalink). Andando su <code>&lt;domain&gt;\/wp-json\/awhitepixel\/v1\/getsomedata<\/code>nel browser verr\u00e0 mostrata la stringa &quot;Hello there!&quot;.<\/p>\n<h3>Accettazione dei parametri<\/h3>\n<p>\u00c8 molto comune e utile consentire agli endpoint di accettare parametri. Ad esempio, se il tuo sito ha dati di prodotto, ad esempio, vorresti un endpoint in cui puoi fornire un ID prodotto per ottenere i dati di quel prodotto. Ci sono due modi per farlo. Il modo pi\u00f9 comune consiste nell&#8217;usare la stringa di query GET (che viene aggiunta dopo l&#8217;URL dopo un <code>?<\/code>, separata da <code>&amp;<\/code>nel formato chiave=valore. Ad esempio &#8216; <code>&lt;endpoint&gt;\/product\/?product_id=14<\/code>&#8216;). In alternativa puoi definire un pattern URL &quot;pi\u00f9 carino&quot;, in cui i parametri fanno parte del percorso. Ad esempio &quot; <code>&lt;endpoint&gt;\/product\/14\/<\/code>&quot;. Tuttavia, quest&#8217;ultimo metodo richiede alcune conoscenze per le espressioni regolari. Quale metodo sceglierai dipende da te, di seguito dimostrer\u00f2 entrambi.<\/p>\n<h4>OTTIENI i parametri<\/h4>\n<p>Definire possibili parametri GET per il tuo endpoint sta usando la <code>args<\/code>chiave &#8216; &#8216; nel <code>register_rest_route()<\/code>terzo parametro di &#8216;. Per ogni parametro che vuoi consentire, definisci il valore della chiave (nell&#8217;esempio sopra &#8216; <code>product_id<\/code>&#8216;) e una matrice di opzioni per quel parametro. Come opzioni puoi definire il formato del parametro (se prevede ad esempio un numero o una stringa) e anche decidere se quel parametro \u00e8 obbligatorio o meno.<\/p>\n<p>Ad esempio, vogliamo consentire al nostro endpoint di accettare &#8216; <code>product_id<\/code>&#8216; come numero non richiesto.<\/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>Se definisci un parametro come true in <code>required<\/code>, WordPress gestir\u00e0 il passaggio di una risposta di errore 400. Allo stesso modo se si passa un formato non valido, ad esempio &quot;ciao&quot; come valore a un parametro che si aspetta un numero.<\/p>\n<p>Alla riga <code>#15<\/code>nella funzione di callback si vede come ottenere il valore del parametro dalla richiesta; utilizzando il metodo nell&#8217;oggetto <code>get_param()<\/code>passato. <code>WP_REST_Request<\/code>A titolo di esempio mostrer\u00f2 risposte diverse a seconda che siano <code>product_id<\/code>state fornite o meno (ricordiamo che l&#8217;abbiamo definita opzionale). La logica di modificare il tuo codice in base ai parametri forniti dipende completamente da te e dal tuo progetto. Puoi avere meno endpoint che accettano molti parametri o molti pi\u00f9 endpoint separati per ogni caso specifico.<\/p>\n<p>Con il codice sopra, ricever\u00f2 &quot;Hello there!&quot; quando visito <code>&lt;yourdomain&gt;\/awhitepixel\/v1\/getsomedata<\/code>e &quot;Restituisci i dati del prodotto per l&#8217;ID 14&quot; quando vado a <code>&lt;yourdomain&gt;\/awhitepixel\/v1\/getsomedata\/?product_id=14<\/code>.<\/p>\n<h4>Parametri come parte del percorso<\/h4>\n<p>Se si desidera consentire ai parametri di far parte del percorso anzich\u00e9 GET stringa di query, \u00e8 possibile farlo. Fornirai quindi un modello regex nel percorso, il secondo parametro per <code>register_rest_route()<\/code>.<\/p>\n<p>La creazione di modelli regex pu\u00f2 sembrare piuttosto criptica, ma poich\u00e9 \u00e8 un argomento intero, troverai facilmente esempi per casi specifici se lo cerchi su Google. Mostrer\u00f2 un esempio di definizione di una regex che accetta un numero di qualsiasi lunghezza;<\/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>Come puoi vedere nella riga n. 2, ho aggiunto il pattern regex <code>(?P&lt;product_id&gt;[d]+)<\/code>alla fine. Questo pattern significa che dobbiamo raccogliere un numero( <code>d<\/code>) di qualsiasi lunghezza( <code>+<\/code>) e assegnare il valore raccolto nella chiave del parametro <code>product_id<\/code>. E nella nostra funzione di callback utilizziamo esattamente lo stesso metodo utilizzato durante l&#8217;impostazione dei parametri GET; <code>get_param()<\/code>nell&#8217;oggetto <code>WP_REST_Request<\/code>fornito alla funzione.<\/p>\n<p>Con il codice sopra (dopo aver scaricato i permalink) possiamo visitare l&#8217;URL <code>&lt;yourdomain&gt;\/wp-json\/awhitepixel\/v1\/getsomedata\/14<\/code>per ottenere la nostra risposta. Questo metodo si traduce sicuramente in URL &quot;pi\u00f9 belli&quot;, ma il codice pu\u00f2 facilmente diventare pi\u00f9 difficile da leggere e correggere i bug. Qualunque metodo tu scelga dipende da te.<\/p>\n<h3>Restituire una risposta adeguata<\/h3>\n<p>In precedenza ho menzionato brevemente come la funzione di callback debba restituire una risposta REST corretta. Finora abbiamo usato il pi\u00f9 semplice <code>rest_ensure_response()<\/code>. Ma a volte potresti volere un maggiore controllo sul ritorno del tuo endpoint. Ad esempio, potresti voler controllare il <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/Status\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">codice di stato della risposta HTTP<\/a>. Supponi di creare un endpoint in cui puoi fornire un ID prodotto e ottenere i dati per quel prodotto. Ma se l&#8217;ID prodotto non esiste o se altri parametri creano confusione, potresti voler restituire un codice di stato ad esempio 400 (Richiesta non valida) o 404 (Non trovato). O forse 500 (errore del server). Passare sempre 200 (Success) anche se la richiesta \u00e8 stata errata pu\u00f2 causare problemi alla fine del mittente.<\/p>\n<p>Consiglierei quindi la tua funzione di richiamata che restituisce un <code>WP_REST_Response<\/code>oggetto. Con questo oggetto puoi controllare diverse cose, incluso il codice di stato. \u00c8 pi\u00f9 facile di quanto pensi! Nella forma pi\u00f9 semplice dovresti creare una nuova istanza di <code>WP_REST_Response<\/code>, fornire una matrice dei dati da restituire come primo parametro e il codice di stato come secondo parametro. Come esempio:<\/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>Nell&#8217;esempio sopra memorizziamo il ritorno della <code>awhitepixel_get_product()<\/code>funzione in una variabile. Questa funzione non esiste e dovresti sostituirla con la funzione che dovrebbe recuperare (o eseguire) le azioni che desideri nel tuo progetto. Ma supponiamo che la funzione restituisca un array vuoto e ci\u00f2 significa che qualcosa \u00e8 andato storto (ad esempio il prodotto non esisteva). Potremmo quindi restituire un <code>WP_REST_Response<\/code>oggetto con codice di stato 400 e, facoltativamente, un messaggio come dati che spiegano il motivo per cui non \u00e8 riuscito (riga <code>#5-9<\/code>). Altrimenti restituiamo i dati con codice di stato 200 Success (riga <code>#10<\/code>).<\/p>\n<h2>Invio di richieste a endpoint (personalizzati).<\/h2>\n<p>Passiamo all&#8217;altro lato, la parte di invio: come inviare richieste ai nostri endpoint personalizzati. Normalmente invii richieste API REST WP usando Javascript e qui troverai esempi di utilizzo di jQuery, libreria WordPress e Javascript vanilla. \u00c8 raro, ma possibile, eseguire anche una richiesta REST con PHP, quindi ho incluso anche un esempio di questo.<\/p>\n<p>La prima cosa da tenere presente \u00e8 che ovviamente \u00e8 necessario conoscere l&#8217;URL completo per inviare una richiesta. Non consiglio di codificare il dominio (prima dell&#8217;endpoint) poich\u00e9 esistono diversi modi per ottenerlo se il tuo Javascript funziona all&#8217;interno di WordPress. Nelle versioni precedenti di WordPress \u00e8 necessario utilizzare <code>[wp_localize_script](https:\/\/developer.wordpress.org\/reference\/functions\/wp_localize_script\/)()<\/code>in PHP e passare l&#8217;URL REST principale come variabile Javascript globale. Ma gli esempi seguenti mostrano un modo pi\u00f9 nuovo e migliore per ottenere l&#8217;URL radice REST del sito WordPress.<\/p>\n<p>Un&#8217;altra cosa da notare \u00e8 che per il tuo progetto probabilmente avvolgeresti le richieste come risultato di qualche azione. Per semplificare le cose, sto preparando tutte le richieste al DOM, quindi dovresti assicurarti di racchiudere il codice della richiesta, ad esempio come risultato di un visitatore che fa clic su un pulsante.<\/p>\n<h3>Usando jQuery<\/h3>\n<p>Se hai e vuoi usare la libreria jQuery, puoi usare la sua <code>[$.ajax](https:\/\/api.jquery.com\/jquery.ajax\/)()<\/code>funzione.<\/p>\n<p>Ma prima una nota sulle dipendenze del tuo file Javascript. Ovviamente il tuo script avrebbe bisogno <code>'jquery'<\/code>di una dipendenza per accodarlo. Ma per accedere facilmente all&#8217;URL radice REST di WordPress, aggiungi un&#8217;altra dipendenza; &#8216;wp-api-richiesta&#8217;. Ci\u00f2 garantisce che la variabile Javascript <code>wpApiSettings.root<\/code>sia disponibile e contenga l&#8217;URL radice dell&#8217;API REST. Ecco un esempio di come accodare lo script per illustrare questa dipendenza;<\/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 linea <code>#5<\/code>\u00e8 quella interessante; dove definiamo sia jQuery che <code>wp-api-request<\/code>come dipendenza. Quindi nel nostro file Javascript possiamo eseguire una richiesta API REST WP in questo modo:<\/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>Questo \u00e8 il pi\u00f9 semplice possibile. Usiamo <code>$.ajax()<\/code>per inviare una richiesta GET all&#8217;URL definito. Come URL utilizziamo <code>wpApiSettings.root<\/code>per ottenere l&#8217;URL radice dell&#8217;API REST e quindi aggiungiamo l&#8217;endpoint desiderato dopo di esso; nel nostro caso l&#8217;endpoint personalizzato che abbiamo creato in precedenza. Facoltativamente possiamo passare i parametri in &#8216;dati&#8217;. L&#8217;esempio sopra passa <code>product_id<\/code>con il valore 14 all&#8217;endpoint. Infine nella <code>success<\/code>funzione riceviamo la richiesta (riuscita) come parametro e siamo liberi di farne quello che vogliamo. Nell&#8217;esempio sopra lo stampiamo semplicemente sulla console.<\/p>\n<h3>Utilizzo della libreria di WordPress (non jQuery)<\/h3>\n<p>Se il tuo sito WordPress non ha, o pu\u00f2, utilizzare la libreria jQuery, puoi utilizzare la libreria Javascript di WordPress per eseguire facilmente una richiesta API REST. La funzione \u00e8 <code>apiFetch<\/code>disponibile nello spazio dei <code>wp<\/code>nomi globale di WordPress. <code>wp.apiFetch()<\/code>\u00e8 un metodo wrapper per la <code>fetch()<\/code>funzione standard del browser (dimostrata di seguito).<\/p>\n<p>Il nostro Javascript avr\u00e0 bisogno della dipendenza &#8216;wp-api&#8217; per poter usare wp.apiFetch(). Ad esempio potremmo accodare lo script in questo modo:<\/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>Troverai la dipendenza critica alla riga <code>#5<\/code>. Con questo ci siamo assicurati che il nostro file Javascript fosse <code>wp.apiFetch()<\/code>disponibile. Ecco un esempio di base per usarlo:<\/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>Tieni presente che la linea <code>#9-13<\/code>\u00e8 solo logica per eseguire la funzione dopo che DOM \u00e8 pronto.<\/p>\n<p>Un vantaggio dell&#8217;utilizzo <code>wp.apiFetch()<\/code>rispetto al normale <code>fetch()<\/code>\u00e8 che possiamo usare &#8216;path&#8217; che richiede solo l&#8217;endpoint, invece di &#8216;url&#8217; che richiede l&#8217;URL completo. Un altro vantaggio \u00e8 che la prima &quot;catena&quot; di <code>.then()<\/code>restituisce i dati gi\u00e0 formattati JSON. Quando usi l&#8217;originale <code>.fetch()<\/code>hai bisogno di pi\u00f9 catene &quot;.then()&quot;. Dai un&#8217;occhiata al prossimo esempio (&quot;Using vanilla Javascript&quot;) per vedere cosa intendo.<\/p>\n<p>Tieni presente che <code>fetch()<\/code>(e di conseguenza <code>wp.apiFetch()<\/code>) <a href=\"https:\/\/github.com\/github\/fetch\/issues\/256\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">non fornisce un modo &quot;pulito&quot; per passare i parametri<\/a>. Avremo bisogno di costruire manualmente la stringa di query GET in &#8216;percorso&#8217;, come ho fatto sopra: <code>'..\/getsomedata?product_id=14'<\/code>.<\/p>\n<p>Se sei interessato a come incorporare <code>wp.apiFetch<\/code>e personalizzare gli endpoint in un blocco Gutenberg, ho scritto un tutorial separato su questo:<\/p>\n<h3>Utilizzo di Javascript vaniglia<\/h3>\n<p>Come ultimo esempio di metodi Javascript per inviare richieste all&#8217;API REST di WP esiste un modo puro, non WordPress, che utilizza <code>fetch()<\/code>. Tieni presente che utilizzo la variabile globale di WordPress per ottenere l&#8217;URL radice REST. Se stai aggiungendo questo script al di fuori di WordPress, probabilmente dovrai codificare l&#8217;URL completo.<\/p>\n<p>Dal momento che voglio ancora accedere alla variabile globale per l&#8217;URL radice WP REST, aggiungo <code>'wp-api-request'<\/code>dipendenza alla mia funzione di accodamento Javascript, in questo modo:<\/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>E poi nel nostro file Javascript un esempio pi\u00f9 semplice sarebbe:<\/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>Come accennato in precedenza (&quot;Utilizzo della libreria di WordPress&quot;) <code>.fetch()<\/code>non supporta un modo semplice e pulito di fornire parametri. Quindi dovrai creare manualmente la stringa di query (&quot;? product_id=14&quot;) nell&#8217;URL.<\/p>\n<p>Tieni presente che la richiesta di recupero non restituisce direttamente i dati, ma restituisce una promessa. Ecco perch\u00e9 dobbiamo concatenare &#8221; <code>.then()<\/code>&quot; prima di poter gestire i dati. Se questo ti suona sconosciuto, ti consiglio di cercare come lavorare <code>fetch()<\/code>: ci sono molte spiegazioni ed esempi su Google che possono spiegarlo meglio di me.<\/p>\n<p>Se vuoi controllare il codice di stato della risposta REST alla tua richiesta, puoi farlo in questo modo;<\/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>Nell&#8217;esempio sopra nella registrazione di endpoint personalizzati, ho menzionato come \u00e8 possibile restituire codici di stato HTTP diversi. Il codice precedente mostra un esempio su come controllare il codice di stato della risposta, disponibile nella <code>.status<\/code>propriet\u00e0 dell&#8217;oggetto restituito. Nell&#8217;esempio sopra, controllo se il codice di stato \u00e8 diverso da 200 (Success) at line <code>#5<\/code>. Solo se il codice di stato era 200 converto il ritorno dei dati della promessa in JSON (line <code>#9<\/code>).<\/p>\n<h3>Usando PHP<\/h3>\n<p>\u00c8 meno comune, ma \u00e8 comunque possibile, eseguire la richiesta REST internamente in WordPress utilizzando PHP. Ecco come.<\/p>\n<p>Per inviare una richiesta API REST WP in PHP, creiamo un <code>WP_REST_Request<\/code>oggetto (esattamente come quello passato alla nostra funzione di callback in precedenza in questo post). In questa istanza dell&#8217;oggetto definiamo il metodo (ad es. GET) e il percorso dell&#8217;endpoint. Opzionalmente possiamo anche aggiungere parametri. Quindi utilizziamo la funzione di WordPress <code>[rest_do_request](https:\/\/developer.wordpress.org\/reference\/functions\/rest_do_request\/)()<\/code>con questa istanza di richiesta. Infine otteniamo la risposta con la <code>[response_to_data](https:\/\/developer.wordpress.org\/reference\/classes\/wp_rest_server\/response_to_data\/)()<\/code>funzione disponibile nella <code>WP_REST_Server'<\/code>classe 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 chiamata di funzione <code>set_query_params()<\/code>(line <code>#3-5<\/code>) \u00e8 facoltativa e necessaria solo se si desidera passare parametri. Seguendo il thread rosso in questo post, includer\u00f2 un esempio di passaggio del parametro della funzione alla chiave del parametro REST <code>product_id<\/code>.<\/p>\n<p>La linea <code>#6<\/code>\u00e8 dove inviamo la richiesta. E alla riga <code>#7<\/code>restituiamo i dati della risposta. Quindi, se dovessimo chiamare questa funzione PHP, ad esempio <code>awp_do_php_rest_request( 14 )<\/code>, otterremmo la risposta che abbiamo definito in quell&#8217;endpoint (un array con una stringa se usi ancora lo stesso esempio dell&#8217;inizio di questo post).<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte di registrazione:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/awhitepixel.com\" class=\"external external_icon\">awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Come creare endpoint REST WordPress personalizzati e diversi metodi per eseguire le richieste ad essi. Esempi in PHP, jQuery e 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":[918,896,896,720,939,939,918,1110,720,844,844,865,865],"tags":[1168],"class_list":["post-233942","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-altro","category-codice","category-sviluppatore","category-gutenberg-6","category-n-a","category-tutorial","category-wordpress-6","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/233942","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/comments?post=233942"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/233942\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media\/151729"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media?parent=233942"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/categories?post=233942"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/tags?post=233942"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}