HarmonyOS 如何实现网络图片预缓存？

Question

新闻文章页内实现前三张图片需要添加预缓存逻辑，请问该如何处理。

Answer 1

1.关于图片下载可以使用requestInstream能力采用二进制数据传输能力，可参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/http-request-V5或者使用您工程中已经实现的下载模块代码应该也可以

2.关于怎样在Web中加载已经缓存的图片资源，请您重写Web组件的onInterceptRequest方法，当Web组件加载url之前会触发该回调，用于拦截url并返回响应数据。请在这里判断url中是否有图片等可以缓存的数据，如果数据可缓存，则可保存在应用的缓存目录下，这样等下次再有加载相同的url的时候就可以拿到缓存直接返回数据。参考伪代码：

Web.onInterceptRequest((event) => {
  if (event) {
    // 加载本地图片
    if ("xxxxxxx" == event.request.getRequestUrl()) {
      if(有缓存){
        const resourceMgr = getContext().resourceManager;
        // 模拟读取了应用的一张图片
        resourceMgr.getMediaContent($r("app.media.1")).then((picBytes) => {
          this.responseWeb.setResponseData(picBytes.buffer);
          this.responseWeb.setResponseEncoding('utf-8');
          this.responseWeb.setResponseMimeType('text/html');
          this.responseWeb.setResponseCode(200);
          this.responseWeb.setReasonMessage('OK');
          this.responseWeb.setResponseIsReady(true);
        })
      }else{
        // 1.利用fs.write缓存数据，

        // 2. 模拟读取了应用的一张图片并返回数据
        const resourceMgr = getContext().resourceManager;
        resourceMgr.getMediaContent($r("app.media.1")).then((picBytes) => {
          this.responseWeb.setResponseData(picBytes.buffer);
          this.responseWeb.setResponseEncoding('utf-8');
          this.responseWeb.setResponseMimeType('text/html');
          this.responseWeb.setResponseCode(200);
          this.responseWeb.setReasonMessage('OK');
          this.responseWeb.setResponseIsReady(true);
        })
      }

      this.responseWeb.setResponseIsReady(false);
      return this.responseWeb
    }
  }
  return null;
})

代码中一个重要的点是返回response的时候可先设置setResponseIsReady(false);代表资源还未准备好，等准备好之后再设置setResponseIsReady(true);