{"id":233866,"date":"2023-02-25T18:09:00","date_gmt":"2023-02-25T15:09:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233866"},"modified":"2022-11-11T12:52:57","modified_gmt":"2022-11-11T09:52:57","slug":"foerdjupad-guide-i-att-skapa-och-haemta-anpassade-wp-rest-api-slutpunkter","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/foerdjupad-guide-i-att-skapa-och-haemta-anpassade-wp-rest-api-slutpunkter\/","title":{"rendered":"F\u00f6rdjupad guide i att skapa och h\u00e4mta anpassade WP REST API-slutpunkter"},"content":{"rendered":"\n<p>Det h\u00e4r inl\u00e4gget kommer att visa hur man skapar anpassade WordPress REST-slutpunkter och olika metoder f\u00f6r att utf\u00f6ra f\u00f6rfr\u00e5gningar till dem. Det kommer att finnas exempel i b\u00e5de PHP, jQuery och vanilla Javascript.<\/p>\n<p>Jag antar att du redan \u00e4r bekant med vad WP REST API \u00e4r, men h\u00e4r \u00e4r en kort sammanfattning. WordPress REST API \u00e4r ett JSON-gr\u00e4nssnitt f\u00f6r att skicka och ta emot data fr\u00e5n din WordPress-webbplats. Du kan komma \u00e5t slutpunkterna (specifika s\u00f6kv\u00e4gar\/URL:er) b\u00e5de externt och internt. WordPress har redan ett g\u00e4ng slutpunkter tillg\u00e4ngliga, t.ex. f\u00f6r att h\u00e4mta inl\u00e4gg, kategorier, s\u00f6ka p\u00e5 sajten och mer. Se en <a href=\"https:\/\/developer.wordpress.org\/rest-api\/reference\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">\u00f6versikt \u00f6ver standardslutpunkter f\u00f6r WordPress<\/a> h\u00e4r. Men utvecklare \u00e4r helt fria att skapa sina egna anpassade slutpunkter med detta API, f\u00f6r att antingen utf\u00f6ra \u00e5tg\u00e4rder eller h\u00e4mta data.<\/p>\n<p>Vi b\u00f6rjar med det f\u00f6rsta steget; som skapar anpassade slutpunkter. Om du bara \u00e4r intresserad av hur man g\u00f6r f\u00f6rfr\u00e5gningar, hoppa vidare till den andra delen.<\/p>\n<h2>Skapa anpassade slutpunkter<\/h2>\n<p>Registrering av anpassade slutpunkter g\u00f6rs i PHP. Du kan l\u00e4gga till koden till ditt temas <code>functions.php<\/code>eller en aktiv plugins kodfil. G\u00f6r en funktion kopplad till <code>rest_api_init<\/code>och anv\u00e4nd funktionen <code>[register_rest_route](https:\/\/developer.wordpress.org\/reference\/functions\/register_rest_route\/)()<\/code>f\u00f6r varje slutpunkt du vill l\u00e4gga till.<\/p>\n<p>Som den f\u00f6rsta parametern <code>register_rest_route()<\/code>m\u00e5ste du tillhandah\u00e5lla ett unikt namnomr\u00e5de f\u00f6r att se till att dina slutpunkter inte kommer i konflikt med n\u00e5gra andra. Anv\u00e4nd ditt temas eller plugins slug. Det \u00e4r vanligt att sedan inkludera ett <code>\/<\/code>f\u00f6ljt av ett versionsnummer f\u00f6r din kod. Som ett exempel kommer jag att anv\u00e4nda namnutrymmet <code>awhitepixel\/v1<\/code>. Den andra parametern \u00e4r s\u00f6kv\u00e4gen (som f\u00f6ljer namnomr\u00e5det). Slutligen kan du valfritt tillhandah\u00e5lla en array som tredje parameter med alternativ. I denna array kan du till exempel definiera f\u00f6rfr\u00e5gningsmetoden (GET, POST eller n\u00e5gon annan), definiera parametrar och viktigast av allt definiera funktionen som ska k\u00f6ras n\u00e4r den slutpunkten efterfr\u00e5gas.<\/p>\n<p>Som ett minimum b\u00f6r du ange argumenten &#8217;metod&#8217; och &#8217;\u00e5teruppringning&#8217; (vilket \u00e4r funktionen f\u00f6r att hantera slutpunktsdata) som tredje parameter. F\u00f6r &#8217;metod&#8217; kan du st\u00e4lla in dem som &#8217; <code>GET'<\/code>, <code>'POST'<\/code>, <code>'PUT'<\/code>, eller n\u00e5gon annan giltig beg\u00e4ranmetod (eller en upps\u00e4ttning av flera), men jag rekommenderar att du anv\u00e4nder WordPress&#8217; standardinst\u00e4llningar f\u00f6r detta. De \u00e4r f\u00f6ljande:<\/p>\n<ul>\n<li><code>WP_REST_Server::READABLE<\/code> metod &#8217; <code>GET<\/code>&#8217;<\/li>\n<li><code>WP_REST_Server::EDITABLE<\/code> metoderna &#8217; <code>POST<\/code>&#8217;, &#8217; <code>PUT<\/code>&#8217; och &#8217; <code>PATCH<\/code>&#8217;<\/li>\n<li><code>WP_REST_Server::DELETABLE<\/code> metod &#8217; <code>DELETE<\/code>&#8217;<\/li>\n<li><code>WP_REST_Server::ALLMETHODS<\/code> alla ovanst\u00e5ende metoder<\/li>\n<\/ul>\n<p>L\u00e5t oss skapa en grundl\u00e4ggande anpassad slutpunkt som kan n\u00e5s med GET-f\u00f6rfr\u00e5gningar:<\/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>P\u00e5 raden <code>#2<\/code>har vi definierat v\u00e5r anpassade slutpunkt som &#8217; <code>awhitepixel\/v1\/getsomedata<\/code>&#8217;. Den fullst\u00e4ndiga webbadressen skulle vara WordPress REST API rot-URL med prefix, vilket \u00e4r <code>&lt;yourdomain&gt;\/wp-json<\/code>. S\u00e5 den fullst\u00e4ndiga webbadressen till ovanst\u00e5ende slutpunkt skulle vara &#8217; <code>&lt;yourdomain&gt;\/wp-json\/awhitepixel\/v1\/getsomedata<\/code>&#8217;. P\u00e5 raden <code>#4<\/code>har vi tillhandah\u00e5llit ett funktionsnamn som callback, som vi kommer att l\u00e4gga till inom kort.<\/p>\n<p>N\u00e4r du registrerar (eller \u00e4ndrar) REST API-rutter med <code>register_rest_route()<\/code>, m\u00e5ste <strong>du spola dina permal\u00e4nkar<\/strong> f\u00f6r att det ska fungera. Du kan g\u00f6ra detta genom att g\u00e5 till Inst\u00e4llningar &gt; Permal\u00e4nkar i admin och klicka p\u00e5 Spara.<\/p>\n<p>Vi har \u00e4nnu inte definierat callback-funktionen \u2013 vilket \u00e4r funktionen f\u00f6r koden som hanterar reaktionen av att anv\u00e4nda denna slutpunkt. Den m\u00e5ste returnera ett REST-giltigt svar (i JSON), s\u00e5 du m\u00e5ste returnera n\u00e5got \u00e4ven om slutpunkten inte ska returnera data. Du kan anv\u00e4nda funktionsfunktionen <code>[rest_ensure_response](https:\/\/developer.wordpress.org\/reference\/functions\/rest_ensure_response\/)()<\/code>eller skapa en instans av <code>WP_REST_Response<\/code>objekt som \u00e5teruppringningens retur. Som parameter till callback-funktionen f\u00e5r vi ett <code>WP_REST_Request<\/code>objekt som inneh\u00e5ller all information om beg\u00e4ran \u2013 inklusive eventuella parametrar. L\u00e5t oss skapa en enkel \u00e5teruppringningsfunktion som helt enkelt skickar lite text som svar:<\/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>Detta \u00e4r det mest grundl\u00e4ggande s\u00e4ttet att skriva en \u00e5teruppringning. Funktionen <code>rest_ensure_response()<\/code>ser till att all data vi tillhandah\u00e5ller (str\u00e4ngen) omvandlas till ett REST-giltigt svar. Uppenbarligen kommer du att vilja l\u00e4gga till mer kod h\u00e4r, f\u00f6r att antingen g\u00f6ra n\u00e5got i WordPress eller h\u00e4mta och skicka tillbaka data.<\/p>\n<p>Med ovanst\u00e5ende kod (registrering av endpoint och callback-funktionen) kan du f\u00f6rs\u00f6ka g\u00e5 till URL:en i din webbl\u00e4sare och se vad du f\u00e5r. (Kom ih\u00e5g att spola dina permal\u00e4nkar). Om du g\u00e5r till <code>&lt;domain&gt;\/wp-json\/awhitepixel\/v1\/getsomedata<\/code>i webbl\u00e4saren visas str\u00e4ngen &quot;Hall\u00e5 d\u00e4r!&quot;.<\/p>\n<h3>Acceptera parametrar<\/h3>\n<p>Det \u00e4r mycket vanligt och anv\u00e4ndbart att till\u00e5ta endpoints att acceptera parametrar. Om din webbplats till exempel har produktdata, vill du ha en slutpunkt d\u00e4r du kan ange ett produkt-ID f\u00f6r att f\u00e5 produktens data. Det finns tv\u00e5 s\u00e4tt att g\u00e5 tillv\u00e4ga. Det vanligaste s\u00e4ttet \u00e4r att anv\u00e4nda GET fr\u00e5gestr\u00e4ng (som l\u00e4ggs till efter URL:en efter en <code>?<\/code>, separerade med <code>&amp;<\/code>i nyckel=v\u00e4rde-format. Till exempel &#8217; <code>&lt;endpoint&gt;\/product\/?product_id=14<\/code>&#8217;). Alternativt kan du definiera ett &quot;snyggare&quot; URL-m\u00f6nster, d\u00e4r parametrar \u00e4r en del av s\u00f6kv\u00e4gen. Till exempel &#8217; <code>&lt;endpoint&gt;\/product\/14\/<\/code>&#8217;. Denna sista metod kr\u00e4ver viss kunskap f\u00f6r regexes dock. Vilken metod du ska v\u00e4lja \u00e4r upp till dig, jag ska visa b\u00e5da nedan.<\/p>\n<h4>GET parametrar<\/h4>\n<p>Att definiera m\u00f6jliga GET-parametrar till din slutpunkt \u00e4r att anv\u00e4nda &#8217; <code>args<\/code>&#8217;-tangenten i <code>register_rest_route()<\/code>&#8217;s tredje parameter. F\u00f6r varje parameter du vill till\u00e5ta, definiera nyckelv\u00e4rdet (i exemplet ovan &#8217; <code>product_id<\/code>&#8217;) och en upps\u00e4ttning alternativ f\u00f6r den parametern. Som alternativ kan du definiera parameterns format (om den f\u00f6rv\u00e4ntar sig till exempel ett nummer eller en str\u00e4ng) och \u00e4ven best\u00e4mma om den parametern kr\u00e4vs eller inte.<\/p>\n<p>Som ett exempel vill vi till\u00e5ta att v\u00e5r slutpunkt accepterar &#8217; <code>product_id<\/code>&#8217; som ett icke-obligatoriskt nummer.<\/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>Om du definierar en parameter som sant i <code>required<\/code>, kommer WordPress att hantera att skicka tillbaka ett 400-felsvar. Likas\u00e5 om du skickar ett ogiltigt format, till exempel &quot;hej&quot; som v\u00e4rde till en parameter som f\u00f6rv\u00e4ntar sig ett tal.<\/p>\n<p>P\u00e5 rad <code>#15<\/code>i callback-funktionen ser du hur du f\u00e5r tag p\u00e5 parameterv\u00e4rdet fr\u00e5n beg\u00e4ran; med metoden <code>get_param()<\/code>i det skickade <code>WP_REST_Request<\/code>objektet. Som ett exempel kommer jag att visa olika svar beroende p\u00e5 om det <code>product_id<\/code>gavs eller inte (kom ih\u00e5g att vi har definierat det som valfritt). Logiken i att modifiera din kod enligt de angivna parametrarna \u00e4r helt upp till dig och ditt projekt. Du kan ha f\u00e4rre slutpunkter som accepterar m\u00e5nga parametrar, eller m\u00e5nga fler separata slutpunkter f\u00f6r varje specifikt fall.<\/p>\n<p>Med ovanst\u00e5ende kod f\u00e5r jag &quot;Hej d\u00e4r!&quot; n\u00e4r jag bes\u00f6ker <code>&lt;yourdomain&gt;\/awhitepixel\/v1\/getsomedata<\/code>och &quot;Returnera produktdata f\u00f6r ID 14&quot; n\u00e4r jag g\u00e5r till <code>&lt;yourdomain&gt;\/awhitepixel\/v1\/getsomedata\/?product_id=14<\/code>.<\/p>\n<h4>Parametrar som en del av s\u00f6kv\u00e4gen<\/h4>\n<p>Om du vill till\u00e5ta parametrar att vara en del av s\u00f6kv\u00e4gen snarare \u00e4n GET fr\u00e5gestr\u00e4ng, kan du g\u00f6ra det. Du kommer sedan att tillhandah\u00e5lla ett regexm\u00f6nster i s\u00f6kv\u00e4gen \u2013 den andra parametern till <code>register_rest_route()<\/code>.<\/p>\n<p>Att skapa regexm\u00f6nster kan se ganska kryptiskt ut, men eftersom det \u00e4r ett helt \u00e4mne hittar du enkelt exempel f\u00f6r specifika fall om du googlar det. Jag ska visa ett exempel p\u00e5 att definiera ett regex som accepterar ett antal av vilken l\u00e4ngd som helst;<\/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>Som du kan se p\u00e5 rad #2 har jag lagt till regexm\u00f6nstret <code>(?P&lt;product_id&gt;[d]+)<\/code>i slutet. Detta m\u00f6nster inneb\u00e4r att vi ska samla ett tal (<code>d<\/code>) av valfri l\u00e4ngd (<code>+<\/code>) och tilldela det insamlade v\u00e4rdet till parameternyckeln <code>product_id<\/code>. Och i v\u00e5r callback-funktion anv\u00e4nder vi exakt samma metod som vi gjorde n\u00e4r vi satte upp GET-parametrar; <code>get_param()<\/code>i <code>WP_REST_Request<\/code>objektet som tillhandah\u00e5lls f\u00f6r funktionen.<\/p>\n<p>Med ovanst\u00e5ende kod (efter spolning av permal\u00e4nkar) kan vi bes\u00f6ka webbadressen <code>&lt;yourdomain&gt;\/wp-json\/awhitepixel\/v1\/getsomedata\/14<\/code>f\u00f6r att f\u00e5 v\u00e5rt svar. Denna metod ger f\u00f6rvisso &quot;snyggare&quot; webbadresser, men koden kan l\u00e4tt bli sv\u00e5rare att l\u00e4sa och buggfixa. Vilken metod du \u00e4n v\u00e4ljer \u00e4r upp till dig.<\/p>\n<h3>\u00c5terkommer korrekt svar<\/h3>\n<p>Tidigare n\u00e4mnde jag kort hur callback-funktionen beh\u00f6ver returnera ett ordentligt REST-svar. Hittills har vi anv\u00e4nt det enklare <code>rest_ensure_response()<\/code>. Men ibland kanske du vill ha mer kontroll \u00f6ver din slutpunkts avkastning. Du kanske till exempel vill kontrollera <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/Status\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">HTTP-svarets statuskod<\/a>. S\u00e4g att du skapar en slutpunkt d\u00e4r du kan ange ett produkt-ID och f\u00e5 data f\u00f6r den produkten. Men om det produkt-ID:t inte fanns, eller om andra parametrar orsakar f\u00f6rvirring, kanske du vill returnera en statuskod p\u00e5 till exempel 400 (d\u00e5lig beg\u00e4ran) eller 404 (hittades inte). Eller kanske 500 (serverfel). Att alltid passera 200 (framg\u00e5ng) trots att beg\u00e4ran var d\u00e5lig kan orsaka problem i avs\u00e4ndarens slut.<\/p>\n<p>Jag skulle d\u00e5 rekommendera att din callback-funktion returnerar ett <code>WP_REST_Response<\/code>objekt. Med detta objekt kan du styra flera saker, inklusive statuskoden. Det \u00e4r l\u00e4ttare \u00e4n du tror! Du skulle i den enklaste formen skapa en ny instans av <code>WP_REST_Response<\/code>, tillhandah\u00e5lla en array av data som ska returneras som f\u00f6rsta parameter och statuskoden som andra parameter. Som ett exempel:<\/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>Ovanst\u00e5ende exempel lagrar vi returen av <code>awhitepixel_get_product()<\/code>funktionen i en variabel. Den h\u00e4r funktionen finns inte, och du b\u00f6r ers\u00e4tta den med funktionen som ska h\u00e4mta (eller g\u00f6ra) de \u00e5tg\u00e4rder du vill ha i ditt projekt. Men s\u00e4g att funktionen returnerar en tom array och det betyder att n\u00e5got gick fel (till exempel att produkten inte existerade). Vi kunde sedan returnera ett <code>WP_REST_Response<\/code>objekt med statuskod 400, och eventuellt ett meddelande som data som f\u00f6rklarar varf\u00f6r det misslyckades (rad <code>#5-9<\/code>). Annars returnerar vi data med statuskod 200 Success (rad <code>#10<\/code>).<\/p>\n<h2>Skicka f\u00f6rfr\u00e5gningar till (anpassade) slutpunkter<\/h2>\n<p>L\u00e5t oss g\u00e5 vidare till andra sidan, s\u00e4ndningsdelen: Hur man skickar f\u00f6rfr\u00e5gningar till v\u00e5ra anpassade slutpunkter. Normalt skulle du skicka WP REST API-f\u00f6rfr\u00e5gningar med Javascript och h\u00e4r hittar du exempel p\u00e5 anv\u00e4ndning av jQuery, WordPress-bibliotek och vanilla Javascript. Det \u00e4r ovanligt, men m\u00f6jligt, att utf\u00f6ra en REST-f\u00f6rfr\u00e5gan med PHP ocks\u00e5 \u2013 s\u00e5 jag har tagit med ett exempel p\u00e5 det ocks\u00e5.<\/p>\n<p>Det f\u00f6rsta du b\u00f6r vara medveten om \u00e4r att du sj\u00e4lvklart beh\u00f6ver k\u00e4nna till hela webbadressen f\u00f6r att kunna skicka en f\u00f6rfr\u00e5gan. Jag rekommenderar inte att h\u00e5rdkoda dom\u00e4nen (f\u00f6re slutpunkten) eftersom det finns flera s\u00e4tt att f\u00e5 detta om ditt Javascript fungerar inom WordPress. I \u00e4ldre versioner av WordPress skulle du beh\u00f6va anv\u00e4nda <code>[wp_localize_script](https:\/\/developer.wordpress.org\/reference\/functions\/wp_localize_script\/)()<\/code>i PHP och skicka vidare REST-webbadressen som en global Javascript-variabel. Men exemplen nedan visar ett nyare och b\u00e4ttre s\u00e4tt att f\u00e5 WordPress-webbplatsens REST-rot-URL.<\/p>\n<p>En annan sak att notera \u00e4r att f\u00f6r ditt projekt skulle du f\u00f6rmodligen avsluta f\u00f6rfr\u00e5gningarna som ett resultat av n\u00e5gon \u00e5tg\u00e4rd. F\u00f6r att g\u00f6ra det enkelt g\u00f6r jag alla f\u00f6rfr\u00e5gningar p\u00e5 DOM redo, s\u00e5 du b\u00f6r se till att packa in f\u00f6rfr\u00e5gningskoden i t.ex. som ett resultat av att en bes\u00f6kare klickar p\u00e5 en knapp.<\/p>\n<h3>Anv\u00e4nder jQuery<\/h3>\n<p>Om du har, och vill anv\u00e4nda, jQuery-biblioteket kan du anv\u00e4nda dess <code>[$.ajax](https:\/\/api.jquery.com\/jquery.ajax\/)()<\/code>funktion.<\/p>\n<p>Men f\u00f6rst en notering om din Javascript-fils beroenden. Uppenbarligen skulle ditt skript beh\u00f6va <code>'jquery'<\/code>som beroende f\u00f6r att st\u00e4lla det i k\u00f6. Men f\u00f6r att enkelt komma \u00e5t din WordPress REST-rot-URL, l\u00e4gg till ett annat beroende; &#8217;wp-api-request&#8217;. Detta s\u00e4kerst\u00e4ller att Javascript-variabeln <code>wpApiSettings.root<\/code>\u00e4r tillg\u00e4nglig och inneh\u00e5ller REST API-rotadressen. H\u00e4r \u00e4r ett exempel p\u00e5 hur du skulle st\u00e4lla ditt skript i k\u00f6 f\u00f6r att illustrera detta beroende;<\/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>Line <code>#5<\/code>\u00e4r den intressanta; d\u00e4r vi definierar b\u00e5de jQuery och <code>wp-api-request<\/code>som beroende. Sedan i v\u00e5r Javascript-fil kan vi utf\u00f6ra en WP REST API-f\u00f6rfr\u00e5gan s\u00e5 h\u00e4r:<\/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>Detta \u00e4r s\u00e5 grundl\u00e4ggande som det blir. Vi anv\u00e4nder <code>$.ajax()<\/code>f\u00f6r att skicka en GET-f\u00f6rfr\u00e5gan till den definierade webbadressen. Som URL anv\u00e4nder vi <code>wpApiSettings.root<\/code>f\u00f6r att f\u00e5 REST API root URL och sedan l\u00e4gger vi till den \u00f6nskade slutpunkten efter den; i v\u00e5rt fall den anpassade slutpunkten vi skapade tidigare. Valfritt kan vi skicka parametrar i &#8217;data&#8217;. Exemplet ovan passerar <code>product_id<\/code>med v\u00e4rdet 14 till slutpunkten. Slutligen i <code>success<\/code>funktionen f\u00e5r vi den (lyckade) beg\u00e4ran som parameter och vi \u00e4r fria att g\u00f6ra vad vi vill med den. I exemplet ovan skriver vi enkelt ut det till konsolen.<\/p>\n<h3>Anv\u00e4nda WordPress-biblioteket (icke-jQuery)<\/h3>\n<p>Om din WordPress-webbplats inte har, eller kan, anv\u00e4nda jQuery-biblioteket kan du anv\u00e4nda WordPress Javascript-bibliotek f\u00f6r att enkelt utf\u00f6ra en REST API-f\u00f6rfr\u00e5gan. Funktionen \u00e4r <code>apiFetch<\/code>som \u00e4r tillg\u00e4nglig i WordPress globala <code>wp<\/code>namnutrymme. <code>wp.apiFetch()<\/code>\u00e4r en omslagsmetod f\u00f6r webbl\u00e4sarens standardfunktion <code>fetch()<\/code>(som visas h\u00e4rn\u00e4st).<\/p>\n<p>V\u00e5rt Javascript kommer att beh\u00f6va beroendet &#8217;wp-api&#8217; f\u00f6r att kunna anv\u00e4nda wp.apiFetch(). Till exempel kan vi st\u00e4lla skriptet i k\u00f6 s\u00e5 h\u00e4r:<\/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>Du hittar det kritiska beroendet p\u00e5 raden <code>#5<\/code>. Med detta har vi s\u00e4kerst\u00e4llt att v\u00e5r Javascript-fil \u00e4r <code>wp.apiFetch()<\/code>tillg\u00e4nglig. H\u00e4r \u00e4r ett grundl\u00e4ggande exempel p\u00e5 hur du anv\u00e4nder det:<\/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>T\u00e4nk p\u00e5 att linje <code>#9-13<\/code>bara \u00e4r logik f\u00f6r att k\u00f6ra funktionen efter att DOM \u00e4r klart.<\/p>\n<p>En f\u00f6rdel med att anv\u00e4nda <code>wp.apiFetch()<\/code>\u00f6ver det normala <code>fetch()<\/code>\u00e4r att vi kan anv\u00e4nda &quot;s\u00f6kv\u00e4g&quot; som bara kr\u00e4ver slutpunkten, ist\u00e4llet f\u00f6r &quot;url&quot; som kr\u00e4ver hela URL:en. En annan f\u00f6rdel \u00e4r att den f\u00f6rsta &quot;kedjan&quot; <code>.then()<\/code>returnerar data som redan \u00e4r JSON-formaterad. N\u00e4r du anv\u00e4nder originalet <code>.fetch()<\/code>beh\u00f6ver du fler &quot;.then()-kedjor&quot;. Ta en titt p\u00e5 n\u00e4sta exempel (&quot;Att anv\u00e4nda vanilla Javascript&quot;) f\u00f6r att se vad jag menar.<\/p>\n<p>T\u00e4nk p\u00e5 att <code>fetch()<\/code>(och som en konsekvens <code>wp.apiFetch()<\/code>) <a href=\"https:\/\/github.com\/github\/fetch\/issues\/256\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">inte ger ett &quot;rent&quot; s\u00e4tt att skicka parametrar<\/a>. Vi kommer att beh\u00f6va konstruera GET-fr\u00e5gestr\u00e4ngen manuellt i &quot;s\u00f6kv\u00e4g&quot;, som jag har gjort ovan: <code>'..\/getsomedata?product_id=14'<\/code>.<\/p>\n<p>Om du \u00e4r intresserad av hur man integrerar <code>wp.apiFetch<\/code>och anpassar slutpunkter i ett Gutenberg-block, har jag skrivit en separat handledning om detta:<\/p>\n<h3>Anv\u00e4nder vanilj Javascript<\/h3>\n<p>Som ett sista exempel p\u00e5 Javascript-metoder f\u00f6r att skicka f\u00f6rfr\u00e5gningar till WP REST API finns det ett rent vanilj, icke-WordPress-s\u00e4tt, med <code>fetch()<\/code>. Observera att jag anv\u00e4nder WordPress global variabel f\u00f6r att f\u00e5 REST-rotadressen. Om du l\u00e4gger till det h\u00e4r skriptet utanf\u00f6r WordPress, skulle du f\u00f6rmodligen beh\u00f6va h\u00e5rdkoda hela webbadressen.<\/p>\n<p>Eftersom jag fortfarande vill ha tillg\u00e5ng till den globala variabeln f\u00f6r WP REST root URL, l\u00e4gger jag till <code>'wp-api-request'<\/code>beroende till min Javascript-k\u00f6funktion, s\u00e5 h\u00e4r:<\/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>Och sedan i v\u00e5r Javascript-fil skulle ett mest grundl\u00e4ggande exempel vara:<\/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>Som n\u00e4mnts ovan (&quot;Att anv\u00e4nda WordPress-biblioteket&quot;) <code>.fetch()<\/code>st\u00f6der inte ett snyggt, rent s\u00e4tt att tillhandah\u00e5lla parametrar. S\u00e5 du m\u00e5ste manuellt bygga in fr\u00e5gestr\u00e4ngen (&#8221;?product_id=14&quot;) i URL:en.<\/p>\n<p>T\u00e4nk p\u00e5 att h\u00e4mtningsf\u00f6rfr\u00e5gan inte direkt returneras med data \u2013 den returnerar ett l\u00f6fte. Det \u00e4r d\u00e4rf\u00f6r vi m\u00e5ste kedja &quot; <code>.then()<\/code>&quot; innan vi kan hantera data. Om detta l\u00e5ter obekant f\u00f6r dig rekommenderar jag att du letar upp hur du arbetar med <code>fetch()<\/code>\u2013 det finns gott om f\u00f6rklaringar och exempel p\u00e5 google som kan f\u00f6rklara det b\u00e4ttre \u00e4n jag.<\/p>\n<p>Om du vill kontrollera REST-svarsstatuskoden p\u00e5 din beg\u00e4ran kan du g\u00f6ra det s\u00e5 h\u00e4r;<\/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>I exemplet ovan vid registrering av anpassade slutpunkter n\u00e4mnde jag hur du kan returnera olika HTTP-statuskoder. Ovanst\u00e5ende kod visar ett exempel p\u00e5 hur man kontrollerar svarets statuskod, som \u00e4r tillg\u00e4nglig i det returnerade objektets <code>.status<\/code>egenskap. I exemplet ovan kontrollerar jag om statuskoden \u00e4r n\u00e5got annorlunda \u00e4n 200 (framg\u00e5ng) vid rad <code>#5<\/code>. Endast om statuskoden var 200 konverterar jag l\u00f6ftets dataretur till JSON (rad <code>#9<\/code>).<\/p>\n<h3>Anv\u00e4nder PHP<\/h3>\n<p>Det \u00e4r mindre vanligt, men fortfarande m\u00f6jligt, att utf\u00f6ra REST-beg\u00e4ran internt i WordPress med PHP. H\u00e4r \u00e4r hur.<\/p>\n<p>F\u00f6r att skicka en WP REST API-f\u00f6rfr\u00e5gan i PHP skapar vi ett <code>WP_REST_Request<\/code>objekt (exakt som det som skickas till v\u00e5r callback-funktion tidigare i detta inl\u00e4gg). I den h\u00e4r objektinstansen definierar vi metod (t.ex. GET) och slutpunktsv\u00e4g. Valfritt kan vi ocks\u00e5 l\u00e4gga till parametrar. Sedan anv\u00e4nder vi WordPress funktion <code>[rest_do_request](https:\/\/developer.wordpress.org\/reference\/functions\/rest_do_request\/)()<\/code>med denna beg\u00e4ran instans. \u00c4ntligen f\u00e5r vi tag i svaret med <code>[response_to_data](https:\/\/developer.wordpress.org\/reference\/classes\/wp_rest_server\/response_to_data\/)()<\/code>funktionen tillg\u00e4nglig i <code>WP_REST_Server'<\/code>s klass.<\/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>Funktionsanropet <code>set_query_params()<\/code>(linje <code>#3-5<\/code>) \u00e4r valfritt och endast n\u00f6dv\u00e4ndigt om du vill skicka parametrar. Efter den r\u00f6da tr\u00e5den i det h\u00e4r inl\u00e4gget kommer jag att inkludera ett exempel p\u00e5 att \u00f6verf\u00f6ra funktionens parameter till REST-parameternyckeln <code>product_id<\/code>.<\/p>\n<p>Linjen <code>#6<\/code>\u00e4r dit vi skickar f\u00f6rfr\u00e5gan. Och p\u00e5 raden <code>#7<\/code>returnerar vi svarets data. S\u00e5 om vi skulle anropa denna PHP-funktion, till exempel <code>awp_do_php_rest_request( 14 )<\/code>, skulle vi d\u00e5 f\u00e5 svaret vi definierade i den slutpunkten (en array med en str\u00e4ng om du fortfarande anv\u00e4nder samma exempel som b\u00f6rjan av det h\u00e4r inl\u00e4gget).<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Inspelningsk\u00e4lla:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/awhitepixel.com\" class=\"external external_icon\">awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hur man skapar anpassade WordPress REST-slutpunkter och olika metoder f\u00f6r att utf\u00f6ra f\u00f6rfr\u00e5gningar till dem. Exempel i PHP, jQuery och 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":[901,724,942,942,848,901,922,1110,922,848,724,868,868],"tags":[1173],"class_list":["post-233866","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-koda","category-utvecklaren","category-gutenberg-9","category-handledningar","category-oevrig","category-n-a","category-wordpress-9","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/233866","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/comments?post=233866"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/233866\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/151729"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=233866"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=233866"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=233866"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}