【HarmonyOS】Web组件使用setResponseIsReady+setResponseData实现异步自定义响应数据
【问题描述】
在web组件的自定义响应数据方法如下：
Web().onInterceptRequest((event) => {
…
})
如果需要在callbak中如果使用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>\n' +
'<html>\n'+
'<head>\n'+
'<title>intercept test</title>\n'+
'</head>\n'+
'<body>\n'+
'<h1>intercept ok</h1>\n'+
'</body>\n'+
'</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();
}
})
}
}
}
