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'
        ];
    }
}

完成以上两步并清除缓存，就可以在前端任意UI组件中调用

require( [ 'ko', uiComponent, 'Magento_Customer/js/customer-data' ], function( ko , Component, customerData ) {
    return Component.extend({
        initialize: function () {
            // 获取数据是observable
            var book = customerData.get('book');
            // 创建名为message的observable，当customerData被更新（如ajax返回）,会被同步到message
            this.message = ko.computed(function(){
                // 有data_id意味着数据已准备好
                if(book().data_id != undefined)
                    return book().message;
                else {
                    // reload即马上提取远程数据，更新本地缓存。在完成提取之前可先返回空值
                    customerData.reload(['book']);
                    return '';
                }
            }, this);
            
            // 使名叫book的section失效，在下次刷新页面时会自动reload
            // customerData.invalidate(['book']);
        }
    });
} );

常见问题

customer-data不会一直向后端提取数据，它会把数据放在Local Storage，如果Section改名，请求可能会一直出错，这是因为请求数据也放在Local Storage里，需要清空Local Storage才能得到更新，例如Local Storage的mage-cache-storage-section-invalidation。