HarmonyOS鸿蒙Next中Web组件使用setResponseIsReady+setResponseData实现异步自定义响应数据

HarmonyOS鸿蒙Next中Web组件使用setResponseIsReady+setResponseData实现异步自定义响应数据 【问题描述】

在web组件的自定义响应数据方法如下：

Web().onInterceptRequest((event) => {
…
})

如果需要在callback中如果使用Promise等获取异步信息，并读取该如何操作

【解决方案】

通过setResponseIsReady + setResponseData的方式控制数据返回，先设置setResponseIsReady为false，此时Web内核不会去读取response的内容。当获取到数据后再将其改为true后，Web内核才会去响应数据，参考以下demo:

前端页面index.html代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<!-- 页面资源请求 -->
<a href="https://www.example.com/test.html">intercept test!</a>
</body>
</html>

应用侧代码：

// xxx.ets
import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  responseResource: WebResourceResponse = new WebResourceResponse()
  // 开发者自定义响应数据
  @State webData: string = `<!DOCTYPE html>
<html>
<head>
<title>intercept test</title>
</head>
<body>
<h1>intercept ok</h1>
</body>
</html>`
  build() {
    Column() {
      Web({ src: $rawfile('index.html'), controller: this.controller })
        .onInterceptRequest((event) => {
          if (event) {
            console.info('url:' + event.request.getRequestUrl());
            // 拦截页面请求
            if (event.request.getRequestUrl() !== 'https://www.example.com/test.html') {
              return null;
            }
          }
          try {
            //模拟异步请求
            new Promise((resolve) =>{
              setTimeout(() => {
                console.info('responseweb->setTimeout after wait');
                resolve('OK')
              }, 3000);
            }).then((result)=>{
              if(result==='OK'){
                this.responseResource.setResponseData(this.webData);
                this.responseResource.setResponseCode(200);
                this.responseResource.setReasonMessage('OK');
                this.responseResource.setResponseIsReady(true);
                console.info('responseweb->set true');
              }
            });

            console.info('responseweb-> start setTimeout');
            this.responseResource.setResponseMimeType('text/html');
            this.responseResource.setResponseIsReady(false);
            console.info('responseweb->set false');
            return  this.responseResource;
          } catch (error) {
            console.error('responseweb->' + `${error.message}`);
            return new WebResourceResponse();
          }
        })
    }
  }
}

更多关于HarmonyOS鸿蒙Next中Web组件使用setResponseIsReady+setResponseData实现异步自定义响应数据的实战教程也可以访问 https://www.itying.com/category-93-b0.html

11 回复

我是用本地资源直接白屏

更多关于HarmonyOS鸿蒙Next中Web组件使用setResponseIsReady+setResponseData实现异步自定义响应数据的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


同样的问题，图片之类的资源如何拦截返回？

建议您通过在线工单系统进行详细定位。
https://developer.huawei.com/consumer/cn/support/feedback/#/add/89?level2=9016

是的，我也遇到这个问题，想要通过WebResourceResponse 返回图片二进制数据，如何做到？

期待HarmonyOS能在未来带来更多创新的技术和理念。

请问解决了吗，我现在也想拦截返回一个图片，不知道该怎么弄。

找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：BV1S4411E7LY/?p=17

亲爱的楼主，我也遇到同样的问题。多谢你帮我解决了。

另外我还遇到一个问题，我希望通过 WebResourceResponse 回传一个二进制数据，比如字体，应当如何实现呢？我看 WebResourceResponse 里面只有 setResponseData(data: string | number)。对比安卓，可以直接设置一个流。

如果加载https://baidu.com/这个地址，如何实现通过onInterceptRequest 拦截之后能正常显示该页面？

在使用onInterceptRequest拦截请求时，可以通过修改请求的方式来实现正常显示页面。具体操作如下：

  1. 在onInterceptRequest方法中，判断请求的url是否为https://baidu.com/，如果是，则进行拦截。

  2. 在拦截的代码中，使用OkHttp或其他网络库重新发起请求，并将请求结果返回给WebView。

  3. 在WebViewClient的shouldOverrideUrlLoading方法中，判断请求的url是否为https://baidu.com/，如果是，则返回false，让WebView正常显示页面。

在HarmonyOS鸿蒙Next中，通过Web组件的setResponseIsReady和setResponseData方法可以实现异步自定义响应数据。首先，使用setResponseIsReady通知Web组件响应数据已准备就绪，随后通过setResponseData设置自定义的响应数据。这种方法适用于需要动态生成或修改响应内容的场景，如拦截并处理特定请求，返回自定义数据。确保在调用setResponseIsReady后，及时调用setResponseData以完成响应。

回到顶部