Harmony OS 开发踩坑（一）

最近在研究Harmony OS开发，发现网络图片直接把地址搞进它的组件Image里面，居然显示不出来！！！资料给我一顿找啊。

官方给出的两个方法：
方法一：申请权限

"requestPermissions": [
  {
    "name": "ohos.permission.INTERNET"
  }
]

但我发现，还是毛用没有（也可能是我没搞对，哈哈哈）

方法二：通过图片的url转换一下：

import http from '@ohos.net.http'
import image from '@ohos.multimedia.image'

const httpRequest = http.createHttp()

export async function handleWebImage(poster: string) {
  const data = await httpRequest.request(poster)
  const {responseCode, result: res } = data

  if (http.ResponseCode.OK === responseCode) {
    const imgResource = image.createImageSource(<any> res)
    const options = {
      alphaType: 0,
      editable: false,
      pixelFormat: 3,
      scaleMode: 1
    }
    const pixelMap = await imgResource?.createPixelMap(options)
    return pixelMap
  }
  return undefined
}

这个确实方法有用！！！

因为数据是通过接口拿的嘛，需要把这个结果给到返回结果中，接下来。。。很烦的就来了！！！

import axios from '@ohos/axios'

struct Index {
    @State films: Array<IFilm> = []
    @State loading: boolean = false

   onPageShow() {
      this.getMovieList()
   }
   
   async getMovieList() {
      this.loading = true

      const params = {
          xxx
      }
      const headers={
          xxx
      }
  
      try {
        const res = await axios.get('xxx', { params, headers })
        if (res.status === 200) {
          const filmList = res.data.data.films
          for (const film of filmList) {
            film['posterUrl'] = await handleWebImage(film.poster)
          }
           
          // for(let i = 0; i < filmList.length; i++){
          //   filmList[i]['posterUrl'] = await handleWebImage(filmList[i].poster)
          // }
          
          // forEach和map居然没有把它加进去！！！
          // filmList.forEach(async film => {
          //   film['posterUrl'] = await handleWebImage(film.poster)
          // })

          // filmList.map(async film => {
          //   film['posterUrl'] = await handleWebImage(film.poster)
          // })

          this.films = filmList
        }
      } catch (e) {
        console.log(e)
      } finally {
        this.loading = false
      }
   }
  
    build() {
      Row() {
        Column() {
            List({ space: 10 }) {
              ForEach(this.films, (film) => {
                ListItem() {
                  Flex() {
                    Column() {
                      Image(film['posterUrl']).alt(film.name).objectFit(ImageFit.ScaleDown)
                    }
                    .width(66)
                    .height(94)
                    .flexShrink(0)
                    Column({ space: 5 }) {
                      // 其他内容
                    }
                    .flexGrow(1)
                    .flexShrink(1)
                    .flexBasis('0%')
                    .margin({ left: 10 })
                    .alignItems(HorizontalAlign.Start)
                  }
                }.width('100%').padding({ top: 5, bottom: 5, left: 10, right: 10 })
              }, item => item.filmId)
            }
            .width('100%')
            .divider({ strokeWidth: 2 })
            .scrollBar(BarState.Auto)
        }
        .height('100%')
      }
      .height('100%')
      .backgroundColor('#fefefe')
    }
}

我用forEach和map循环都试了，handleWebImage函数的返回结果居然没加进去！！！用了for...of或者for...i才有出现正常的结果。
目前暂时没确定是什么原因，因为这耽误了好长一段时间，各种方法都试遍，就没往这方面forEach和map想（也可能是什么地方写错了，哈哈哈）。