magento2 ajax机制 (customer-data)

magento2 front-end大量运用了KnockoutJS，大量的数据能即时更新并且不需要刷新页面，数据无疑是通过AJAX方式获取，但为了效率，AJAX下载后数据会保存到Storage，只有被通知数据过期时才会再次从AJAX更新数据。因此并不能仅仅使用传统的AJAX，需要把流程封装起来。magento2的确提供了一套方法，无奈并没有文档说明，只能自己研究。

magento2把AJAX数据分类打包，分成若干个section，而每个section对应一个能获取数据的PHP类。所以第一步应该声明一个section与定义一个类。

用di.xml声明section并指定PHP类

<!-- Vendor/Samples/etc/frontend/di.xml -->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Customer\CustomerData\SectionPoolInterface">
        <arguments>
            <argument name="sectionSourceMap" xsi:type="array">
                <item name="book" xsi:type="string">Vendor\Samples\CustomerData\Book</item>
            </argument>
        </arguments>
    </type>
</config>

创建PHP类，必须定义getSectionData并返回array数据，它会以JSON格式提交到前端

// Vendor/Samples/CustomerData/Book.PHP
namespace Vendor\Samples\CustomerData;

use Magento\Customer\CustomerData\SectionSourceInterface;

class Book extends \Magento\Framework\DataObject implements SectionSourceInterface
{
    /**
     * {@inheritdoc}
     */
    public function getSectionData()
    {
        return [
            'message' => 'hello world'
        ];
    }
}

完成以上两步并清除缓存，就可以在前端任意位置把数据读出来

require( [ 'Magento_Customer/js/customer-data' ],function( customerData ) {
    // 使名叫book的section失效，系统会自动通过ajax更新数据
    customerData.invalidate(['book']);
    // 获取数据是observe，不会马上得到值，需要等待被通知更新
    var book = customerData.get('book');
    setTimeout(function(){
        console.log(book().message);
    },3000);
} );

magento2 ajax机制 (customer-data)

相关文章