当前位置：首页 > article >正文

鸿蒙Next网络请求和解析

article 2024/12/5 3:24:39

在鸿蒙sdk9之前，ets语法基本与ts/js一致，属于弱语言类型，若你之前，用vue或其它前端框架，写过同项目的小程序，那么里面的逻辑代码部分（如网络请求等）可以直接复制粘贴进ets，稍作修改就可使用！

但在鸿蒙sdk10以后，ets强制使用静态类型，也就是变为类似java，kotlin这样的强语言类型，书写变量时必须指定变量类型，否则报错（当然一些基础变量如 number string等可以直接初始化为对应类型，免写变量类型）！另外，新的sdk已不再支持var关键字，统一使用let！

在这里插入图片描述

    //指定变量类型
    let a:number=0
    let b:string="Hello World"

    //基础变量或已知变量类型时，可免写变量类型
    let c=0
    let d="Hello World"

什么情况下必须指定变量类型呢？
以往我们在js中，使用JSON.parse可以将一个json字符串转为对象，并直接调用对象里的变量：

  let obj = JSON.parse("{\"id\":1,\"name\":\"刘德华\"}")
  console.log(obj.id + "," + obj.name)

但在最新鸿蒙sdk中，已不再支持这种写法，会报错“Use explicit types instead of “any”, “unknown””，必须指定变量类型：

在这里插入图片描述

以下这样才是对的：

先生成json对于的class类：

export class Test{
  id: number=0
  name: string=""
}

再解析json：

    let obj: Test = JSON.parse("{\"id\":1,\"name\":\"刘德华\"}")
    console.log(obj.id + "," + obj.name)

并且，它还支持泛型，这对于原安卓/java开发者来说，就再熟悉不过了，非常实用：

  getData<T>(json: string): BaseBean<T> {
    let result: BaseBean<T> = JSON.parse(json)
    return result
  }

  ...

  let test = this.getData<TestBean>(json)
  console.log("test>>" + test.code + "," + test.msg + "," + test.data.id + "," + test.data.name)

有了这个支持，那在书写网络请求框架方面，体验将非常棒，堪比原生！

下面我就把网络请求部分代码直接贴出，并写一个简单的请求示例：

请求工具类request.ets：

import { http } from '@kit.NetworkKit';
import { BaseResult } from './bean/BaseResult';
import { RequestError } from './bean/RequestError';

function buildHeader(): Map<string, object> {
  let header: Map<string, object> = new Map<string, object>()
  header["Content-Type"] = "application/json"
  return header
}

export function get<T>(url: string): Promise<T> {
  return req<T>(http.RequestMethod.GET, url, undefined)
}

export function post<T>(url: string, params?: Map<string, object>): Promise<T> {
  return req<T>(http.RequestMethod.POST, url, params)
}

async function req<T>(method: http.RequestMethod, url: string, params?: Map<string, object>) {
  //每一个httpRequest对应一个http请求任务，不可复用
  let httpRequest = http.createHttp()
  let header = buildHeader()
  let paramsStr = JSON.stringify(params)
  return new Promise((resolve: (value: T) => void, reject: (reason?: RequestError) => void) => {
    httpRequest.request(url, {
      method: method,
      header: header,
      extraData: paramsStr,
      connectTimeout: 30000, // 可选，默认为60s
      readTimeout: 30000, // 可选，默认为60s
    }, (err, data) => {
      if (!err) {
        if (data.responseCode == 200) {
          let response = data.result.toString()
          let res: BaseResult<T> = JSON.parse(response)
          if (res.errorCode == 0) {
            resolve(res.data)
          } else {
            reject(new RequestError(res.errorCode, res.errorMsg))
          }
        } else {
          reject(new RequestError(data.responseCode, ""))
        }
      } else {
        reject(new RequestError(-1, JSON.stringify(err)))
      }
    })
  })
}

BaseResult:

export interface BaseResult<T> {
  errorCode: 0,
  errorMsg: string,
  data: T
}

RequestError：

export class RequestError {
  errorCode: number = 0
  errorMsg: string = ""

  constructor(errorCode: number, errorMsg: string) {
    this.errorCode = errorCode
    this.errorMsg = errorMsg
  }
}

每个模块对应一个Api请求类：

TestApi：

import { get, post } from '../request'
import { IndexModel } from './IndexModel'
import { LoginModel } from './LoginModel'

export default class TestApi {
  public static login(username: string, password: string): Promise<LoginModel> {
    let param: Map<string, object> = new Map<string, object>()
    param["username"] = username
    param["password"] = password
    return post("https://www.wanandroid.com/user/login", param)
  }

  public static getIndex(): Promise<IndexModel> {
    return get("https://www.wanandroid.com/article/list/1/json")
  }

}

json对象：

export interface LoginModel {
  id: number
  username: string
}

export interface IndexModel {
  curPage: number
  datas: Array<ItemModel>
}

export interface ItemModel {
  adminAdd: boolean;
  apkLink: string;
  audit: number;
  author: string;
  ...
}

注意，我这里对象类使用的是interface，而非class，两者的区别，可以自行百度一下，这里只说一点，interface不用初始化变量，而class中的变量必须初始化，否则报错！

请求示例：

    //登录（由于随便写的用户名和密码，报错是必然的，这里仅演示post请求）
    TestApi.login("liudehua", "123456").then(data => {
      if (data) {
        console.log("登录成功:" + data.username)
      }
    }).catch((error: RequestError) => {
      console.log("登录error:" + error.errorCode + "," + error.errorMsg)
    })
    
    //获取首页数据
    TestApi.getIndex().then(data => {
      if (data) {
        console.log("获取首页数据成功:" + data.curPage + "," + data.datas.length)
      }
    }).catch((error: RequestError) => {
      console.log("获取首页数据error:" + error.errorCode + "," + error.errorMsg)
    })

返回结果：

在这里插入图片描述

贴心小提示：json对象的生成，如果变量全部手敲的话，那就太费时费力了，在早期DevEcoSutdio中有一个JsonToTS的插件可以使用，将json转为ts类型，但新版本中这个插件不兼容了，需要等待作者更新！此时，可以在Vscode中，安装一个json to ts的插件，复制json代码，然后使用ctrl+shift+v快捷键，便直接生成ts代码了，还是很方便的！

在这里插入图片描述