鸿蒙Next网络请求和剖析

在鸿蒙sdk9之前，ets语法基本与ts/js一致，属于弱语言类型，若你之前，用vue或其它前端框架，写过同项目的小步伐，那么里面的逻辑代码部分（如网络请求等）可以直接复制粘贴进ets，稍作修改就可使用！
但在鸿蒙sdk10以后，ets逼迫使用静态类型，也就是变为类似java，kotlin如许的强语言类型，誊写变量时必须指定变量类型，否则报错（当然一些基础变量如 number string等可以直接初始化为对应类型，免写变量类型）！另外，新的sdk已不再支持var关键字，统一使用let！

1.     //指定变量类型
2.     let a:number=0
3.     let b:string="Hello World"
5.     //基础变量或已知变量类型时，可免写变量类型
6.     let c=0
7.     let d="Hello World"

复制代码

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

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

复制代码

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

以下如许才是对的：

• 先生成json对于的class类：
  

1. export class Test{
2.   id: number=0
3.   name: string=""
4. }

复制代码

• 再剖析json：
  

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

复制代码

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

1.   getData<T>(json: string): BaseBean<T> {
2.     let result: BaseBean<T> = JSON.parse(json)
3.     return result
4.   }
6.   ...
8.   let test = this.getData<TestBean>(json)
9.   console.log("test>>" + test.code + "," + test.msg + "," + test.data.id + "," + test.data.name)

复制代码

有了这个支持，那在誊写网络请求框架方面，体验将非常棒，堪比原生！
下面我就把网络请求部分代码直接贴出，并写一个简单的请求示例：
请求工具类request.ets：

1. import { http } from '@kit.NetworkKit';
2. import { BaseResult } from './bean/BaseResult';
3. import { RequestError } from './bean/RequestError';
5. function buildHeader(): Map<string, object> {
6.   let header: Map<string, object> = new Map<string, object>()
7.   header["Content-Type"] = "application/json"
8.   return header
9. }
11. export function get<T>(url: string): Promise<T> {
12.   return req<T>(http.RequestMethod.GET, url, undefined)
13. }
15. export function post<T>(url: string, params?: Map<string, object>): Promise<T> {
16.   return req<T>(http.RequestMethod.POST, url, params)
17. }
19. async function req<T>(method: http.RequestMethod, url: string, params?: Map<string, object>) {
20.   //每一个httpRequest对应一个http请求任务，不可复用
21.   let httpRequest = http.createHttp()
22.   let header = buildHeader()
23.   let paramsStr = JSON.stringify(params)
24.   return new Promise((resolve: (value: T) => void, reject: (reason?: RequestError) => void) => {
25.     httpRequest.request(url, {
26.       method: method,
27.       header: header,
28.       extraData: paramsStr,
29.       connectTimeout: 30000, // 可选，默认为60s
30.       readTimeout: 30000, // 可选，默认为60s
31.     }, (err, data) => {
32.       if (!err) {
33.         if (data.responseCode == 200) {
34.           let response = data.result.toString()
35.           let res: BaseResult<T> = JSON.parse(response)
36.           if (res.errorCode == 0) {
37.             resolve(res.data)
38.           } else {
39.             reject(new RequestError(res.errorCode, res.errorMsg))
40.           }
41.         } else {
42.           reject(new RequestError(data.responseCode, ""))
43.         }
44.       } else {
45.         reject(new RequestError(-1, JSON.stringify(err)))
46.       }
47.     })
48.   })
49. }

复制代码

BaseResult:

1. export interface BaseResult<T> {
2.   errorCode: 0,
3.   errorMsg: string,
4.   data: T
5. }

复制代码

RequestError：

1. export class RequestError {
2.   errorCode: number = 0
3.   errorMsg: string = ""
5.   constructor(errorCode: number, errorMsg: string) {
6.     this.errorCode = errorCode
7.     this.errorMsg = errorMsg
8.   }
9. }

复制代码

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

1. import { get, post } from '../request'
2. import { IndexModel } from './IndexModel'
3. import { LoginModel } from './LoginModel'
5. export default class TestApi {
6.   public static login(username: string, password: string): Promise<LoginModel> {
7.     let param: Map<string, object> = new Map<string, object>()
8.     param["username"] = username
9.     param["password"] = password
10.     return post("https://www.wanandroid.com/user/login", param)
11.   }
13.   public static getIndex(): Promise<IndexModel> {
14.     return get("https://www.wanandroid.com/article/list/1/json")
15.   }
17. }

复制代码

json对象：

1. export interface LoginModel {
2.   id: number
3.   username: string
4. }

复制代码

1. export interface IndexModel {
2.   curPage: number
3.   datas: Array<ItemModel>
4. }
6. export interface ItemModel {
7.   adminAdd: boolean;
8.   apkLink: string;
9.   audit: number;
10.   author: string;
11.   ...
12. }

复制代码

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

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

复制代码

返回结果：

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。