在REST API请求中传递querystring时检测固定链接

时间:2019-03-08 作者:Filip Růžička

假设我正在使用wp_localize_script 要在Wordpress插件中将基本REST url传递给我的脚本,请执行以下操作:

wp_register_script( \'my-plugin\', plugin_dir_url( __FILE__ ) . \'../dist/admin-main.js\', [], \'0.9.2\' );
wp_localize_script( \'my-plugin\', \'MY_PLUGIN_WP_REST_API_CONFIG\', [
      \'baseUrl\' => esc_url_raw( rest_url() ),
    ] );
wp_enqueue_script( \'my-plugin\' );
在JS文件中,我需要使用GET请求中的查询字符串获取一些数据,如下所示:

const baseUrl = MY_PLUGIN_WP_REST_API_CONFIG.baseUrl;

fetch(baseUrl + \'wp/v2/custom_post_type?per_page=100&order=asc\').then(response => ...);
然而,当url解析为https://example.com/wp-json/wp/v2/custom_post_type?per_page=100&order=asc.

当不使用漂亮的永久链接时,这将转化为https://example.com/?rest_route=/wp/v2/custom_post_type?per_page=100&order=asc, 这是无效的,因为会有多个? 在querystring中签名,从而对请求抛出404错误。

是否有一种最佳实践是我所缺少的,即检测permalink结构并基于从后端传递的一些数据构造查询字符串?在我的例子中,显而易见的解决方案是解析baseUrl javascript中的变量,并添加某种条件,但对我来说,这似乎太粗糙且容易出错。

1 个回复
最合适的回答,由SO网友:Jacob Peattie 整理而成

在较新的浏览器中(基本上除了IE以外的所有浏览器),有一些有用的API用于处理URL,这将使操作更简单:

let url = new URL( MY_PLUGIN_WP_REST_API_CONFIG.baseUrl );

url.searchParams.append( \'per_page\', 100 );
url.searchParams.append( \'order\', \'asc\' );

fetch( url.toString() ).then();
使用这些方法per_pageorder 无论原始URL是否具有查询字符串,都将正确添加参数。但正如我所提到的,这些在IE中是不可用的,尽管有一种polyfill可用here. 您正在使用constfetch() 尽管如此,我不确定这是否是你关心的问题。

在任何浏览器中都可以使用的一个更直截了当的解决方案可能是只检查URL是否包含?, 如果有,请使用& 字符添加参数,否则使用?:

var baseUrl = MY_PLUGIN_WP_REST_API_CONFIG.baseUrl;
var params  = \'per_page=100&order=asc\'

if ( baseUrl.indexOf( \'?\' ) > -1 ) {
    var url = baseUrl + \'&\' + params;
} else {
    var url = baseUrl + \'?\' + params;
}

fetch( url ).then();
axios或jQuery等库也可能有方法处理向URL添加参数的问题,这些方法比fetch, 除了将查询参数包含在URL字符串中之外,它没有添加查询参数的功能。