developOne / harmonyPool

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

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

Inline Side-by-side
Showing 3 changed files with 121 additions and 48 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,10 +116,8 @@ export struct ImageDownloadComponent { @@ -89,10 +116,8 @@ 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; 119 + transcodePixelMap(data: ArrayBuffer) {
  120 + const imageData: ArrayBuffer = data;
96 // 通过ArrayBuffer创建图片源实例。 121 // 通过ArrayBuffer创建图片源实例。
97 const imageSource: image.ImageSource = image.createImageSource(imageData); 122 const imageSource: image.ImageSource = image.createImageSource(imageData);
98 const options: image.InitializationOptions = { 123 const options: image.InitializationOptions = {
@@ -108,7 +133,6 @@ export struct ImageDownloadComponent { @@ -108,7 +133,6 @@ export struct ImageDownloadComponent {
108 this.image = pixelMap; 133 this.image = pixelMap;
109 }); 134 });
110 } 135 }
111 - }  
112 136
113 /** 137 /**
114 * 保存ArrayBuffer到图库 138 * 保存ArrayBuffer到图库
@@ -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,15 +92,12 @@ export struct MultiPictureDetailItemComponent { @@ -65,15 +92,12 @@ 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; 95 + transcodePixelMap(data: ArrayBuffer) {
  96 + const imageData: ArrayBuffer = data;
72 // 通过ArrayBuffer创建图片源实例。 97 // 通过ArrayBuffer创建图片源实例。
73 const imageSource: image.ImageSource = image.createImageSource(imageData); 98 const imageSource: image.ImageSource = image.createImageSource(imageData);
74 this.initCurrentImageInfo(imageSource); 99 this.initCurrentImageInfo(imageSource);
75 } 100 }
76 - }  
77 101
78 /** 102 /**
79 * 设置当前图片的相关信息：uri、whRatio、pixelMap、fitWH、defaultSize、maxScaleValue 103 * 设置当前图片的相关信息：uri、whRatio、pixelMap、fitWH、defaultSize、maxScaleValue
@@ -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,15 +93,12 @@ export struct ImageItemView { @@ -65,15 +93,12 @@ 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; 96 + transcodePixelMap(data: ArrayBuffer) {
  97 + const imageData: ArrayBuffer = data;
72 // 通过ArrayBuffer创建图片源实例。 98 // 通过ArrayBuffer创建图片源实例。
73 const imageSource: image.ImageSource = image.createImageSource(imageData); 99 const imageSource: image.ImageSource = image.createImageSource(imageData);
74 this.initCurrentImageInfo(imageSource); 100 this.initCurrentImageInfo(imageSource);
75 } 101 }
76 - }  
77 102
78 /** 103 /**
79 * 根据图片宽高比及窗口大小计算图片的默认宽高，即，图片最适配屏幕的大小 104 * 根据图片宽高比及窗口大小计算图片的默认宽高，即，图片最适配屏幕的大小