developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
王士厅
26b173a5 1 parent 2c619617

图集请求网络图片方法修改

Inline Side-by-side
Showing 3 changed files with 140 additions and 67 deletions
@@ -62,25 +62,52 @@ export struct ImageDownloadComponent { @@ -62,25 +62,52 @@ export struct ImageDownloadComponent {
62 * 通过http的request方法从网络下载图片资源 62 * 通过http的request方法从网络下载图片资源
63 */ 63 */
64 async getPicture() { 64 async getPicture() {
65 - console.info(`cj2024 getPicture`)  
66 - http.createHttp()  
67 - .request(this.url,  
68 - (error: BusinessError, data: http.HttpResponse) => { 65 + // 每一个httpRequest对应一个HTTP请求任务，不可复用
  66 + let httpRequest = http.createHttp();
  67 + // 用于订阅HTTP响应头事件
  68 + httpRequest.on('headersReceive', (header: Object) => {
  69 + console.info('header: ' + JSON.stringify(header));
  70 + });
  71 + // 用于订阅HTTP流式响应数据接收事件
  72 + let res = new ArrayBuffer(0);
  73 + httpRequest.on('dataReceive', (data: ArrayBuffer) => {
  74 + const newRes = new ArrayBuffer(res.byteLength + data.byteLength);
  75 + const resView = new Uint8Array(newRes);
  76 + resView.set(new Uint8Array(res));
  77 + resView.set(new Uint8Array(data), res.byteLength);
  78 + res = newRes;
  79 + // console.info('dataReceive res length: ' + res.byteLength);
  80 + });
  81 + // 用于订阅HTTP流式响应数据接收完毕事件
  82 + httpRequest.on('dataEnd', () => {
  83 + this.transcodePixelMap(res);
  84 + // 判断网络获取到的资源是否为ArrayBuffer类型
  85 + console.info(`dataEnd getPicture ${res}`)
  86 + if (res instanceof ArrayBuffer) {
  87 + console.info(`dataEnd getPicture`)
  88 + this.imageBuffer = res as ArrayBuffer;
  89 + }
  90 + console.info('No more data in response, data receive end');
  91 + });
  92 + httpRequest.requestInStream(this.url,
  93 + (error: BusinessError, data: number) => {
69 if (error) { 94 if (error) {
70 // 下载失败时弹窗提示检查网络，不执行后续逻辑 95 // 下载失败时弹窗提示检查网络，不执行后续逻辑
71 promptAction.showToast({ 96 promptAction.showToast({
72 message: $r('app.string.image_request_fail'), 97 message: $r('app.string.image_request_fail'),
73 duration: 2000 98 duration: 2000
74 }) 99 })
  100 + console.error(`http reqeust failed with. Code: ${error.code}, message: ${error.message}`);
75 return; 101 return;
76 } 102 }
77 - this.transcodePixelMap(data);  
78 - // 判断网络获取到的资源是否为ArrayBuffer类型  
79 - console.info(`cj2024 getPicture ${data.result}`)  
80 - if (data.result instanceof ArrayBuffer) {  
81 - console.info(`cj2024 getPicture 222`)  
82 - this.imageBuffer = data.result as ArrayBuffer;  
83 - } 103 + // 取消订阅HTTP响应头事件
  104 + httpRequest.off('headersReceive');
  105 + // 取消订阅HTTP流式响应数据接收事件
  106 + httpRequest.off('dataReceive');
  107 + // 取消订阅HTTP流式响应数据接收完毕事件
  108 + httpRequest.off('dataEnd');
  109 + // 当该请求使用完毕时，调用destroy方法主动销毁
  110 + httpRequest.destroy();
84 } 111 }
85 ) 112 )
86 } 113 }
@@ -89,25 +116,22 @@ export struct ImageDownloadComponent { @@ -89,25 +116,22 @@ export struct ImageDownloadComponent {
89 * 使用createPixelMap将ArrayBuffer类型的图片装换为PixelMap类型 116 * 使用createPixelMap将ArrayBuffer类型的图片装换为PixelMap类型
90 * @param data：网络获取到的资源 117 * @param data：网络获取到的资源
91 */ 118 */
92 - transcodePixelMap(data: http.HttpResponse) {  
93 - console.info(`cj2024 transcodePixelMap ${data.responseCode}`)  
94 - if (http.ResponseCode.OK === data.responseCode) {  
95 - const imageData: ArrayBuffer = data.result as ArrayBuffer;  
96 - // 通过ArrayBuffer创建图片源实例。  
97 - const imageSource: image.ImageSource = image.createImageSource(imageData);  
98 - const options: image.InitializationOptions = {  
99 - 'alphaType': 0, // 透明度  
100 - 'editable': false, // 是否可编辑  
101 - 'pixelFormat': 3, // 像素格式  
102 - 'scaleMode': 1, // 缩略值  
103 - 'size': { height: 100, width: 100 }  
104 - }; // 创建图片大小 119 + transcodePixelMap(data: ArrayBuffer) {
  120 + const imageData: ArrayBuffer = data;
  121 + // 通过ArrayBuffer创建图片源实例。
  122 + const imageSource: image.ImageSource = image.createImageSource(imageData);
  123 + const options: image.InitializationOptions = {
  124 + 'alphaType': 0, // 透明度
  125 + 'editable': false, // 是否可编辑
  126 + 'pixelFormat': 3, // 像素格式
  127 + 'scaleMode': 1, // 缩略值
  128 + 'size': { height: 100, width: 100 }
  129 + }; // 创建图片大小
105 130
106 - // 通过属性创建PixelMap  
107 - imageSource.createPixelMap(options).then((pixelMap: PixelMap) => {  
108 - this.image = pixelMap;  
109 - });  
110 - } 131 + // 通过属性创建PixelMap
  132 + imageSource.createPixelMap(options).then((pixelMap: PixelMap) => {
  133 + this.image = pixelMap;
  134 + });
111 } 135 }
112 136
113 /** 137 /**
@@ -38,25 +38,52 @@ export struct MultiPictureDetailItemComponent { @@ -38,25 +38,52 @@ export struct MultiPictureDetailItemComponent {
38 * 通过http的request方法从网络下载图片资源 38 * 通过http的request方法从网络下载图片资源
39 */ 39 */
40 async getPicture() { 40 async getPicture() {
41 - console.info(`cj2024 getPicture`)  
42 - http.createHttp()  
43 - .request(this.imageUri,  
44 - (error: BusinessError, data: http.HttpResponse) => { 41 + // 每一个httpRequest对应一个HTTP请求任务，不可复用
  42 + let httpRequest = http.createHttp();
  43 + // 用于订阅HTTP响应头事件
  44 + httpRequest.on('headersReceive', (header: Object) => {
  45 + console.info('header: ' + JSON.stringify(header));
  46 + });
  47 + // 用于订阅HTTP流式响应数据接收事件
  48 + let res = new ArrayBuffer(0);
  49 + httpRequest.on('dataReceive', (data: ArrayBuffer) => {
  50 + const newRes = new ArrayBuffer(res.byteLength + data.byteLength);
  51 + const resView = new Uint8Array(newRes);
  52 + resView.set(new Uint8Array(res));
  53 + resView.set(new Uint8Array(data), res.byteLength);
  54 + res = newRes;
  55 + // console.info('dataReceive res length: ' + res.byteLength);
  56 + });
  57 + // 用于订阅HTTP流式响应数据接收完毕事件
  58 + httpRequest.on('dataEnd', () => {
  59 + this.transcodePixelMap(res);
  60 + // 判断网络获取到的资源是否为ArrayBuffer类型
  61 + console.info(`dataEnd getPicture ${res}`)
  62 + if (res instanceof ArrayBuffer) {
  63 + console.info(`dataEnd getPicture`)
  64 + this.imageBuffer = res as ArrayBuffer;
  65 + }
  66 + console.info('No more data in response, data receive end');
  67 + });
  68 + httpRequest.requestInStream(this.imageUri,
  69 + (error: BusinessError, data: number) => {
45 if (error) { 70 if (error) {
46 // 下载失败时弹窗提示检查网络，不执行后续逻辑 71 // 下载失败时弹窗提示检查网络，不执行后续逻辑
47 promptAction.showToast({ 72 promptAction.showToast({
48 message: $r('app.string.image_request_fail'), 73 message: $r('app.string.image_request_fail'),
49 duration: 2000 74 duration: 2000
50 }) 75 })
  76 + console.error(`http reqeust failed with. Code: ${error.code}, message: ${error.message}`);
51 return; 77 return;
52 } 78 }
53 - this.transcodePixelMap(data);  
54 - // 判断网络获取到的资源是否为ArrayBuffer类型  
55 - console.info(`cj2024 getPicture ${data.result}`)  
56 - if (data.result instanceof ArrayBuffer) {  
57 - console.info(`cj2024 getPicture 222`)  
58 - this.imageBuffer = data.result as ArrayBuffer;  
59 - } 79 + // 取消订阅HTTP响应头事件
  80 + httpRequest.off('headersReceive');
  81 + // 取消订阅HTTP流式响应数据接收事件
  82 + httpRequest.off('dataReceive');
  83 + // 取消订阅HTTP流式响应数据接收完毕事件
  84 + httpRequest.off('dataEnd');
  85 + // 当该请求使用完毕时，调用destroy方法主动销毁
  86 + httpRequest.destroy();
60 } 87 }
61 ) 88 )
62 } 89 }
@@ -65,14 +92,11 @@ export struct MultiPictureDetailItemComponent { @@ -65,14 +92,11 @@ export struct MultiPictureDetailItemComponent {
65 * 使用createPixelMap将ArrayBuffer类型的图片装换为PixelMap类型 92 * 使用createPixelMap将ArrayBuffer类型的图片装换为PixelMap类型
66 * @param data：网络获取到的资源 93 * @param data：网络获取到的资源
67 */ 94 */
68 - transcodePixelMap(data: http.HttpResponse) {  
69 - console.info(`cj2024 transcodePixelMap ${data.responseCode}`)  
70 - if (http.ResponseCode.OK === data.responseCode) {  
71 - const imageData: ArrayBuffer = data.result as ArrayBuffer;  
72 - // 通过ArrayBuffer创建图片源实例。  
73 - const imageSource: image.ImageSource = image.createImageSource(imageData);  
74 - this.initCurrentImageInfo(imageSource);  
75 - } 95 + transcodePixelMap(data: ArrayBuffer) {
  96 + const imageData: ArrayBuffer = data;
  97 + // 通过ArrayBuffer创建图片源实例。
  98 + const imageSource: image.ImageSource = image.createImageSource(imageData);
  99 + this.initCurrentImageInfo(imageSource);
76 } 100 }
77 101
78 /** 102 /**
@@ -38,25 +38,53 @@ export struct ImageItemView { @@ -38,25 +38,53 @@ export struct ImageItemView {
38 * 通过http的request方法从网络下载图片资源 38 * 通过http的request方法从网络下载图片资源
39 */ 39 */
40 async getPicture() { 40 async getPicture() {
41 - console.info(`cj2024 getPicture`)  
42 - http.createHttp()  
43 - .request(this.imageUri,  
44 - (error: BusinessError, data: http.HttpResponse) => { 41 + // 每一个httpRequest对应一个HTTP请求任务，不可复用
  42 + let httpRequest = http.createHttp();
  43 + // 用于订阅HTTP响应头事件
  44 + httpRequest.on('headersReceive', (header: Object) => {
  45 + console.info('header: ' + JSON.stringify(header));
  46 + });
  47 + // 用于订阅HTTP流式响应数据接收事件
  48 + let res = new ArrayBuffer(0);
  49 + httpRequest.on('dataReceive', (data: ArrayBuffer) => {
  50 + const newRes = new ArrayBuffer(res.byteLength + data.byteLength);
  51 + const resView = new Uint8Array(newRes);
  52 + resView.set(new Uint8Array(res));
  53 + resView.set(new Uint8Array(data), res.byteLength);
  54 + res = newRes;
  55 + // console.info('dataReceive res length: ' + res.byteLength);
  56 + });
  57 + // 用于订阅HTTP流式响应数据接收完毕事件
  58 + httpRequest.on('dataEnd', () => {
  59 + this.transcodePixelMap(res);
  60 + // 判断网络获取到的资源是否为ArrayBuffer类型
  61 + console.info(`dataEnd getPicture ${res}`)
  62 + if (res instanceof ArrayBuffer) {
  63 + console.info(`dataEnd getPicture`)
  64 + this.imageBuffer = res as ArrayBuffer;
  65 + }
  66 + console.info('No more data in response, data receive end');
  67 + });
  68 + httpRequest.requestInStream(this.imageUri,
  69 + (error: BusinessError, data: number) => {
45 if (error) { 70 if (error) {
46 // 下载失败时弹窗提示检查网络，不执行后续逻辑 71 // 下载失败时弹窗提示检查网络，不执行后续逻辑
47 promptAction.showToast({ 72 promptAction.showToast({
48 message: $r('app.string.image_request_fail'), 73 message: $r('app.string.image_request_fail'),
49 duration: 2000 74 duration: 2000
50 }) 75 })
  76 + this.getPicture()
  77 + console.error(`http reqeust failed with. Code: ${error.code}, message: ${error.message}`);
51 return; 78 return;
52 } 79 }
53 - this.transcodePixelMap(data);  
54 - // 判断网络获取到的资源是否为ArrayBuffer类型  
55 - console.info(`cj2024 getPicture ${data.result}`)  
56 - if (data.result instanceof ArrayBuffer) {  
57 - console.info(`cj2024 getPicture 222`)  
58 - this.imageBuffer = data.result as ArrayBuffer;  
59 - } 80 + // 取消订阅HTTP响应头事件
  81 + httpRequest.off('headersReceive');
  82 + // 取消订阅HTTP流式响应数据接收事件
  83 + httpRequest.off('dataReceive');
  84 + // 取消订阅HTTP流式响应数据接收完毕事件
  85 + httpRequest.off('dataEnd');
  86 + // 当该请求使用完毕时，调用destroy方法主动销毁
  87 + httpRequest.destroy();
60 } 88 }
61 ) 89 )
62 } 90 }
@@ -65,14 +93,11 @@ export struct ImageItemView { @@ -65,14 +93,11 @@ export struct ImageItemView {
65 * 使用createPixelMap将ArrayBuffer类型的图片装换为PixelMap类型 93 * 使用createPixelMap将ArrayBuffer类型的图片装换为PixelMap类型
66 * @param data：网络获取到的资源 94 * @param data：网络获取到的资源
67 */ 95 */
68 - transcodePixelMap(data: http.HttpResponse) {  
69 - console.info(`cj2024 transcodePixelMap ${data.responseCode}`)  
70 - if (http.ResponseCode.OK === data.responseCode) {  
71 - const imageData: ArrayBuffer = data.result as ArrayBuffer;  
72 - // 通过ArrayBuffer创建图片源实例。  
73 - const imageSource: image.ImageSource = image.createImageSource(imageData);  
74 - this.initCurrentImageInfo(imageSource);  
75 - } 96 + transcodePixelMap(data: ArrayBuffer) {
  97 + const imageData: ArrayBuffer = data;
  98 + // 通过ArrayBuffer创建图片源实例。
  99 + const imageSource: image.ImageSource = image.createImageSource(imageData);
  100 + this.initCurrentImageInfo(imageSource);
76 } 101 }
77 102
78 /** 103 /**