通过FETCH/AJAX从第三方获取古登堡块数据

时间:2018-04-03 作者:jshwlkr

我想用fetch 从速率受限的第三方API获取信息。我尝试使用的不是前端的APIfetch 在edit函数中执行API调用。我似乎已经让fetch工作了,但似乎无法保存数据。有人能告诉我哪里出了问题吗?

属性如下所示:

    attributes: {
    url: {
        type: \'string\',
        selector: \'.o_microlink\',
        attribute: \'href\',
        default: \'\',
    },
    title: {
        type: \'string\',
        selector: \'.o_microlink\',
        default: \'\',
    },
}
编辑功能如下所示:

edit: props => {
    const onChangeURL = async value => {
        const response = await fetch( `https://api.microlink.io?url=${ value }`, {
            cache: \'no-cache\',
            headers: {
                \'user-agent\': \'WP Block\',
                \'content-type\': \'application/json\'
              },
            method: \'GET\', 
            redirect: \'follow\', 
            referrer: \'no-referrer\', 
        }).then(
            returned => {
                if (returned.ok) return returned;
                throw new Error(\'Network response was not ok.\');
            }
        );
        let data = await response.json();
        data = data.data;

        props.setAttributes( { url: value } );
        props.setAttributes( { title: data.title} );
    };
    return <div className={ props.className }>
            <RichText
                tagName="div"
                placeholder={ __( \'Add URL here.\' ) }
                value={ props.attributes.url }
                onChange={ onChangeURL }
            />
            { ! props.attributes.title ? __( \'Add URL\' ) : <div> { props.attributes.title } </div> }
            </div>;
}
保存功能非常标准:

save: props => {
    return (
        <div className={ [props.className, \'o_microlink\'].join( \' \' ) }>
            <a href={ props.url}> { props.title } </a>
        </div>
    );
}

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

嗯,我想出来了。虽然我的解决方案可能还远远不够优雅(我不会对超时或可用性/可访问性做出让步)。我的问题主要是过度配置、复制和粘贴错误,以及需要应用异步/等待关键字。

属性如下所示:

attributes: {
    url: {
        source: \'attribute\',
        type: \'string\',
        selector: \'.o_microlink\',
        attribute: \'href\',
    },
    title: {
        type: \'string\',
        source: \'text\',
        selector: \'.o_microlink\',
    }
编辑功能如下所示:

edit: ({ attributes, setAttributes, className })  => {

    const onChangeURL = async value => {

        const response = await fetch( `https://api.microlink.io?url=${ value }`, {
            cache: \'no-cache\',
            headers: {
                \'user-agent\': \'WP Block\',
                \'content-type\': \'application/json\'
              },
            method: \'GET\',
            redirect: \'follow\', 
            referrer: \'no-referrer\', 
        })
        .then(
            returned => {
                if (returned.ok) return returned;
                throw new Error(\'Network response was not ok.\');
            }
        );

        let data = await response.json();
        data = data.data;

        setAttributes( { url: value[0] } );
        setAttributes( { title: data.title} );
    };

    return <div className={className}>
                <RichText
                    tagName="div"
                    placeholder={__(\'Add URL here.\')}
                    value={attributes.url}
                    onChange={onChangeURL}
                />
                {!attributes.title ? __(\'Add URL\') : <div> {attributes.title} </div>}
             </div>;

}
值得注意的要求是箭头函数中的async关键字和赋值中的两个await关键字。(我没有在这里捕捉到错误,也没有将用户代理设置为任何有用的内容。)urlvalue 在里面onChangeURL 正在设置为一个项目的数组,我不知道为什么。

和保存功能:

save: ({ attributes, className }) => {
    return <div className={ className }>
            <a className="o_microlink" href={ attributes.url }> { attributes.title } </a>
        </div>;
}
这很标准,但我把自定义类放错了位置。

结束

相关推荐

显示admin-ajax.php中的PHP错误

我们已经设置了一些自定义端点,可以执行各种操作,我们可以通过/wp/wp-admin/admin-ajax.php?action=some_action然而,每当我们在开发过程中出现错误,如语法、逻辑、致命错误等,我们只会得到“500内部服务器错误”当站点上的其他页面出现错误时,它会向我们提供PHP错误。然后,我们必须打开PHP日志文件来查看错误。wordpress中是否有禁止在这些URL上显示错误的内容?如果是这样,我们如何防止这种情况发生,以便在浏览器上呈现错误?