用apiFetch检索古腾堡的post数据
用apiFetch检索古腾堡的post数据
提问于 2021-05-28 11:53:21
在我正在开发的插件中，我注册了一个自定义REST路由，以获得一些传递post id的post数据：
function rest_api_init() {
register_rest_route( 'custombase/v1', '/post/(?P[\d]+)', array(
'methods' => 'GET',
'callback' => 'get_post_rest',
'permission_callback' => '__return_true',
'args' => array(
'id' => array(
'validate_callback' => function( $param, $request, $key ) {
return is_numeric( $param );
}
),
),
) );
}
function get_post_rest( WP_REST_Request $request ) {
$post = get_post( $request['id'] );
if ( is_wp_error( $post ) ) {
return $post;
}
$data = array(
'ID' => $post->ID,
'title' => $post->post_title,
);
$response = new WP_REST_Response( $data, 200 );
return $response;
}我检查并正确注册了路由，因为我可以获得信息访问，例如，以下URL：
https://example.com/wp-json/custombase/v1/post/1239其结果是：
{"ID":1239,"title":"My example post title"}据我所知，我需要使用apiFetch实用程序向Gutenberg中的自定义路由发出REST请求。这就是我要做的：
const mypost = apiFetch( { path: 'custombase/v1/post/1239' } ).then( ( post ) => {
return post;
} );但是，当我执行一个Promise时，而不是post对象，我得到了一个带有post对象的console.log( mypost )：
Promise { : "pending" }
: "fulfilled"
: Array [ {…} ]
0: Object { ID: 1239, title: "My example post title" }
length: 1
: Array []如何才能得到post对象呢？
回答 1
WordPress Development用户
回答已采纳
发布于 2021-05-28 17:49:52
当我做一个
Promise时，我会得到一个带有post对象的console.log( mypost )
是的，因为apiFetch()确实返回一个Promise对象，而且apiFetch()没有将从服务器接收到的响应分配给mypost常量，并且您的then()回调的返回值也不会分配给mypost变量。
如何才能得到post对象呢？
如反应所示，您可能希望在组件中添加mypost作为本地状态，然后在类组件的componentDidMount()方法中发出XHR/AJAX请求(使用apiFetch()、本机window.fetch()、Axios或其他什么)，或者在函数组件中使用useEffect钩子。
使用apiFetch()和useEffect的示例：
import { useState, useEffect } from '@wordpress/element';
import apiFetch from '@wordpress/api-fetch';
function MyComponent( { post_id } ) {
const [ error, setError ] = useState( null );
const [ mypost, setPost ] = useState( null );
const [ isLoaded, setIsLoaded ] = useState( false );
useEffect( () => {
apiFetch( { path: `custombase/v1/post/${ post_id }` } ).then(
( result ) => {
setIsLoaded( true );
setPost( result );
},
( error ) => {
setIsLoaded( true );
setError( error );
}
);
}, [ post_id ] );
if ( error ) {
return ERROR: { error.message };
} else if ( ! isLoaded ) {
return Loading post { post_id }..;
} else if ( mypost && mypost.id ) {
return Post { mypost.title || '#' + mypost.id } loaded!;
}
return No such post;
}
// Sample usage: 替代解决方案:将自定义端点的实体添加到块编辑器.
中的实体列表中
- 使用
addEntities()添加实体:从‘@wordpress/data’导入{调度}；使用分派( 'core‘).addEntities( )；//您可以在注册//块类型之前调用上面的内容(即添加实体)。 - 然后使用
getEntityRecord()从端点获取post数据: const = select( 'core‘).getEntityRecord( 'custombase/v1'，'post'，1239 )；//注意getEntityRecord()缓存结果。 - 请注意，要使
getEntityRecord()正确工作，端点回调必须使用小写的id，而不是在get_post_rest()函数中使用ID：//：$data =数组( ' id‘=> $post-> ID，// use ID和* not * ID 'title’=> $post->post_title，)；
例如，使用useSelect，上面的组件(MyComponent)现在可以如下所示：
import { useSelect } from '@wordpress/data';
function MyComponent( { post_id } ) {
const { mypost, isLoading } = useSelect( ( select ) => {
const args = [ 'custombase/v1', 'post', post_id ];
return {
mypost: select( 'core' ).getEntityRecord( ...args ),
isLoading: select( 'core/data' ).isResolving( 'core', 'getEntityRecord', args )
};
}, [ post_id ] );
if ( isLoading ) {
return Loading post { post_id }..;
} else if ( mypost && mypost.id ) {
return Post { mypost.title || '#' + mypost.id } loaded!;
}
return No such post;
}页面原文内容由WordPress Development提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://wordpress.stackexchange.com/questions/388822
复制相关文章
相似问题
腾讯云开发者
