【鸿蒙HarmonyOS】网络哀求http代码实现

在网络开发中，HTTP哀求是必不可少的一部分。在鸿蒙（HarmonyOS）开发中，同样需要处置处罚网络哀求，无论是与后端服务器交互照旧获取外部API的数据。下面是对鸿蒙开发中涉及到的HTTP模块——http模块，以及一个常用的第三方库——axios模块的总结。
HTTP协议概述

1. 根本概念

• 哀求（Request）：客户端向服务器发送的消息。
  
• 响应（Response）：服务器接收到哀求后返回给客户端的消息。
  
• 消息格式：HTTP消息由报文头（Header）、状态行（Status Line）和可选的实体主体（Entity Body）构成。
  

2. 哀求报文结构

• 哀求行：包含哀求方法、哀求URI和协议版本。
  1. GET /index.html HTTP/1.1

  复制代码
• 哀求头：包含客户端的信息，如Accept-Language、User-Agent等。
  1. Accept-Language: zh-CN,zh;q=0.9
  2. User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3

  复制代码
• 实体主体：可选部分，包含哀求的具体内容，如表单数据或文件上传。
  1. username=admin&password=123456

  复制代码

3. 响应报文结构

• 状态行：包含HTTP版本、状态码及状态描述。
  1. HTTP/1.1 200 OK

  复制代码
• 响应头：包含服务器的信息，如Content-Type、Date等。
  1. Content-Type: text/html; charset=UTF-8
  2. Date: Thu, 01 Jan 2023 12:00:00 GMT

  复制代码
• 实体主体：可选部分，包含响应的具体内容，如HTML文档。
  

4. 哀求方法

• GET：哀求指定的资源。
  
• POST：向指定资源提交数据进行处置处罚哀求（比方提交表单大概注册用户）。
  
• PUT：更换目标资源。
  
• DELETE：删除指定资源。
  
• HEAD：雷同于GET哀求，但只返回头部信息。
  
• OPTIONS：查询目标资源的通讯选项。
  
• PATCH：对资源进行部分更新。
  

5. 状态码

• 1xx（信息响应类）：指示哀求已被担当，需要进一步处置处罚。
  
• 2xx（成功响应类）：哀求已成功被服务器接收、理解，并担当。
  
  
  
  • 200 OK：成功。
    
  • 201 Created：创建成功。
    
  
  
• 3xx（重定向类）：需要客户端接纳进一步的操作来完成哀求。
  
  
  
  • 301 Moved Permanently：永久重定向。
    
  • 302 Found：临时重定向。
    
  
  
• 4xx（客户端错误类）：哀求中有错误，或哀求无法被服务器理解。
  
  
  
  • 400 Bad Request：哀求无效。
    
  • 401 Unauthorized：未经授权。
    
  • 403 Forbidden：禁止访问。
    
  • 404 Not Found：找不到资源。
    
  
  
• 5xx（服务器错误类）：服务器在处置处罚哀求的过程中发生了错误。
  
  
  
  • 500 Internal Server Error：内部服务器错误。
    
  • 503 Service Unavailable：服务不可用。
    
  
  

HTTP的工作原理

• 建立连接：客户端与服务器之间建立TCP连接。
  
• 发送哀求：客户端发送HTTP哀求到服务器。
  
• 处置处罚哀求：服务器接收哀求，处置处罚哀求内容。
  
• 发送响应：服务器根据处置处罚效果构建响应，并发送给客户端。
  
• 关闭连接：完成响应后，默认情况下会关闭连接（HTTP/1.0），大概保持连接开放以供后续哀求使用（HTTP/1.1及以上版本）。
  

HTTP与HTTPS的区别

• 安全性：HTTPS是在HTTP的基础上参加了SSL/TLS协议，用于加密传输的数据，增强安全性。
  
• 端标语：HTTP默认端口为80，HTTPS默认端口为443。
  
• 证书：HTTPS需要服务器端有数字证书支持，确保数据的完备性和机密性。
  

通过以上概述，你应该对HTTP协议有了更深入的理解。在实际开发中，根据差别的场景选择合适的哀求方法和状态码，对于构建健壮的网络应用程序至关紧张。
HarmonyOS HTTP模块

官方文档传送门
1. 概述

HarmonyOS提供了内置的http模块来实现HTTP哀求。此模块答应开发者以异步的方式发起HTTP哀求，支持GET、POST等多种HTTP方法。
根本用法

1. 导入

1. import { http } from '@kit.NetworkKit'

复制代码

2. 创建哀求对象

1. const req = http.createHttp()

复制代码

3. 发送哀求并获取响应

1. req.request('请求地址url')
2.   .then((res: http.HttpResponse) => {
3.     AlertDialog.show({ message: JSON.stringify(res) })
4.   })

复制代码

注意事项

• 预览器：无需配置网络权限即可成功发送哀求。
  
• 模拟器：需要配置网络权限才能成功发送哀求。
  
• 真机：需要配置网络权限才能成功发送哀求。
  
• 在HarmonyOS中，你需要在module.json5文件中配置网络权限。以下是详细的配置示例：
  

2. {
3.   "module": {
4.     "name": "entry",
5.     "type": "entry",
6.     "description": "$string:module_desc",
7.     "mainElement": "EntryAbility",
8.     "deviceTypes": [
9.       "phone",
10.       "tablet",
11.       "2in1"
12.     ],
13.     "deliveryWithInstall": true,
14.     "installationFree": false,
15.     "pages": "$profile:main_pages",
16.     "requestPermissions": [
17.       {
18.         "name": "ohos.permission.INTERNET"
19.       }
20.     ],
21.     "abilities": [
22.       {
23.         "name": "EntryAbility",
24.         "srcEntry": "./ets/entryability/EntryAbility.ets",
25.         "description": "$string:EntryAbility_desc",
26.         "icon": "$media:icon",
27.         "label": "$string:EntryAbility_label",
28.         "startWindowIcon": "$media:startIcon",
29.         "startWindowBackground": "$color:start_window_background",
30.         "exported": true,
31.         "skills": [
32.           {
33.             "entities": [
34.               "entity.system.home"
35.             ],
36.             "actions": [
37.               "action.system.home"
38.             ]
39.           }
40.         ]
41.       }
42.     ],
43.     "extensionAbilities": [
44.       {
45.         "name": "EntryBackupAbility",
46.         "srcEntry": "./ets/entrybackupability/EntryBackupAbility.ets",
47.         "type": "backup",
48.         "exported": false,
49.         "metadata": [
50.           {
51.             "name": "ohos.extension.backup",
52.             "resource": "$profile:backup_config"
53.           }
54.         ]
55.       }
56.     ]
57.   }
58. }

复制代码

1. // 代码示例import { http } from '@kit.NetworkKit'
2. const req = http.createHttp()
3. req.request('请求地址url')
4.   .then((res: http.HttpResponse) => {
5.     AlertDialog.show({ message: JSON.stringify(res) })
6.   })

复制代码

2. 主要方法

   通过一个图书管理案例来详细了解一下http哀求数据的根本使用，因为需要用到接口，我使用的是黑马程序员提供的在线接口文档链接仅供学习
  

完成效果

3. 示例代码

2. export interface IBook{
3.   /**
4.    * 响应数组
5.    */
6.   data: iBook[];
7.   /**
8.    * 响应消息
9.    */
10.   message: string;
12. }
14. export interface IBookdetail{
15.   /**
16.    * 响应数组
17.    */
18.   data: iBook;
19.   /**
20.    * 响应消息
21.    */
22.   message: string;
23. }
24. export interface iBook {
25.   /**
26.    * 图书作者
27.    */
28.   author: string;
29.   /**
30.    * 图书名字
31.    */
32.   bookname: string;
33.   /**
34.    * 图书id
35.    */
36.   id: number;
37.   /**
38.    * 图书出版社
39.    */
40.   publisher: string;
41. }
43. export  const creator='艾宝宝'

复制代码

获取-图书列表 GET &&删除-图书 DELETE

1. import { IBook, iBook } from './databook'import { http } from '@kit.NetworkKit'
2. import router from '@ohos.router'import { promptAction } from '@kit.ArkUI'@Entry@Componentstruct MyBook {  @State ISfree: boolean = false  @State books: iBook[] = []  /**   * 页面显示时调用的方法   * 该方法在页面被显示时触发，用于获取书籍信息   */  onPageShow(): void {    // 调用getbook方法获取书籍信息    this.getbook()      // 将返回的效果分析为IBook对象      .then(res => {        let obj: IBook = JSON.parse(res.result.toString())        // 将分析后的书籍数据赋值给books属性        this.books = obj.data      })  }  /**   * 获取书籍信息的方法   * 该方法用于发起网络哀求，获取指定创建者的书籍信息   * @returns 返回一个Promise对象， resolve时携带HTTP响应   */  getbook() {    // 创建HTTP哀求对象    const req = http.createHttp()
3.     // 发起网络哀求，获取书籍信息    return req.request('https://hmajax.itheima.net/api/books?creator=' + encodeURIComponent('艾宝宝'))  }      //顶部  @Builder  top() {    Row() {      Image($r('app.media.ic_public_drawer_filled'))        .width(30)      //点击弹窗，点击确认全部删除        .onClick(()=>{           promptAction.showDialog({               title: '提示',               message: '确定全部删除吗？',               buttons: [                   { text: '取消', color: '#ff161616' },                   { text: '确认', color: '#ff2156c1' }               ]           }).then(res=>{             // 根据响应的索引实行差别的操作             if (res.index == 1) {               // 创建HTTP哀求对象               const req = http.createHttp()
4.                // 向指定URL发送DELETE哀求以删除数据               req.request('https://hmajax.itheima.net/api/books', {                 method: http.RequestMethod.DELETE               })                 .then(res => {                   // 分析响应效果，根据id数组中的每个id向服务器发送删除哀求                   this.books.map((item)=>{                     return  req.request('https://hmajax.itheima.net/api/books/' + item.id, {                         method: http.RequestMethod.DELETE                       })                       .then(res => {                         // 分析响应效果，显示提示信息                         let obj: IBook = JSON.parse(res.result.toString())                         promptAction.showToast({                           message: `${obj.message}`                         })                         // 重新获取数据                         this.getbook()                           .then(res => {                             let obj: IBook = JSON.parse(res.result.toString())                             // 更新当地数据                             this.books = obj.data                           })                       })                   })                 })             }           })        })      Text(`我的书架`).fontSize(25)        .fontWeight(FontWeight.Bold)      Image($r('app.media.ic_public_add'))        .width(30)        .onClick(() => {          router.pushUrl({            url: '/pages/addbook'.slice(1)          })        })    }.width('100%')    .padding(10)    .justifyContent(FlexAlign.SpaceBetween)    .border({ width: { bottom: 1 }, color: '#80000000' })  }  //图书列表  @Builder  list() {    List() {      ForEach(this.books, (item: iBook, index: number) => {        ListItem() {          Row({ space: 10 }) {            Image($r('app.media.ic_public_cover'))              .height(100)            Column({ space: 20 }) {              Column({ space: 10 }) {                Text(`书名:` + item.bookname).width('100%').fontWeight(FontWeight.Bold)                  .fontSize(18)                Text(`作者:` + item.author).width('100%')                  .fontSize(14)                  .fontColor('#666666')              }              Text(`出版社:` + item.publisher).width('100%')                .fontSize(14)                .fontColor('#666666')            }            .layoutWeight(1)          }.width('100%').height(100)        }.padding(10)        .swipeAction({ end: this.dle(item.id), })        .onClick(() => {          router.pushUrl({            url: '/pages/alterbook'.slice(1),            params: {              id: item.id            }          })        })      })    }.layoutWeight(1).scrollBar(BarState.Off)  }  //删除图标  @Builder  dle(id: number) {    Column() {      Text(`删除`)        .fontColor('#ffffff')        .fontWeight(FontWeight.Bold)    }.width(70)    .height('100%')    .backgroundColor('red')    .justifyContent(FlexAlign.Center)    .onClick(()=>{     promptAction.showDialog({    title: '提示',    message: '确定删除吗？',    buttons: [        { text: '确定', color: '#ff164ae0' },        { text: '取消', color: '#ff1c1919' }    ]})        .then(res=>{            //AlertDialog.show({message:JSON.stringify(res,null,2)})          //点击确定删除 ---索引次序从0开始 左边是0          if (res.index == 0) {            const req = http.createHttp()
5.             req.request('https://hmajax.itheima.net/api/books/' + id, {              method: http.RequestMethod.DELETE            })              .then(res => {                let obj: IBook = JSON.parse(res.result.toString())                promptAction.showToast({                  message: `${obj.message}`                })                this.getbook()                  .then(res => {                   let obj: IBook = JSON.parse(res.result.toString())                    this.books = obj.data                  })              })          }        })    })  }  build() {      Column() {        //        this.top()        //正在加载的动画        if (this.books.length == 0) {          this.loading()        }        //        this.list()      }      .padding(10)      .width('100%')      .height('100%')  }  //加载中占位图  @Builder  loading() {    Row() {      LoadingProgress()        .width(50)      Text(`加载中...`)    }  }}

复制代码

新增-图书 POST

1. // 导入创建者import { creator, IBook } from './databook'import { promptAction, router } from '@kit.ArkUI'import { http } from '@kit.NetworkKit'
2. /* * 步调 * 1. 非空验证 -> 轻提示用户 * ✔️2. 获取表单的值 -> 已经使用了$$完成 * 3. 发出POST哀求将数据提交给服务器 * 4. 返回图书列表页面 * * */@Entry@Componentstruct addPage {  @State bookname: string = ''  @State author: string = ''  @State publisher: string = ''  // 新增的  addSubmit() {    //  1. 非空验证 -> 轻提示用户    if (this.bookname == '' || this.author == '' || this.publisher == '') {      promptAction.showToast({ message: '图书名，作者，出版社均非空' })      return //阻止下面代码继续实行    }    // 3. 发出POST哀求将数据提交给服务器    const req = http.createHttp()
3.     req.request('https://hmajax.itheima.net/api/books', {      method: http.RequestMethod.POST,      header: {        'Content-Type': 'application/json'      },      extraData: {        bookname: this.bookname,        author: this.author,        publisher: this.publisher,        creator: creator      }    }).then(res => {      let obj: IBook = JSON.parse(res.result.toString())      // 提示用户新增的效果      promptAction.showToast({ message: obj.message })      // 4. 返回图书列表页面      // ✨✨注意：通过router.back()返回的页面是不会触发aboutToAppear这个函数的      // 需要将其改成 onPageShow ，所以我们需要改造 BookListPage.ets中的生命周期方法      // pushUrl -> 页面栈中每次都新增一个页面，最多只能32个，所以这里使用back方法来节省页面栈      router.back()    })  }  build() {    Navigation() {      Column({ space: 10 }) {        Row() {          Text('图书名称:')          TextInput({ placeholder: '请输入图书名字', text: $$this.bookname })        }        Row() {          Text('图书作者:')          TextInput({ placeholder: '请输入作者名字', text: $$this.author })        }        Row() {          Text('图书出版社:')          TextInput({ placeholder: '请输入出版社名字', text: $$this.publisher })        }        Button({ type: ButtonType.Normal }) {          Text('保存')            .fontColor(Color.White)            .fontWeight(800)        }        .width('100%')        .height(40)        .borderRadius(8)        .onClick(() => {          // 调用新增逻辑方法          this.addSubmit()        })      }      .height('100%')      .width('100%')      .padding(10)    }    .title('新增图书')    .titleMode(NavigationTitleMode.Mini)  }}

复制代码

修改-图书 PUT

1. import router from '@ohos.router'import { creator, IBook, IBookdetail } from './databook'import { http } from '@kit.NetworkKit'
2. import { promptAction } from '@kit.ArkUI'interface BookId {  id: number}@Entry@Componentstruct Alterbook {  req = http.createHttp()  @State bookid: number = 0  creator: string = creator  @State bookname: string = ''  @State author: string = ''  @State publisher: string = ''  // 页面加载时，获取图书id，通过id获取图书信息  id(路由传参)  aboutToAppear(): void {    let obj = router.getParams() as BookId    this.bookid = obj.id    this.req.request('https://hmajax.itheima.net/api/books/' + this.bookid, {})      .then(res => {        let book: IBookdetail = JSON.parse(res.result.toString())        this.bookname = book.data.bookname        this.author = book.data.author        this.publisher = book.data.publisher      })  }  // creator: string = creator  build() {    Navigation() {      Column({ space: 10 }) {        Row() {          Text(`图书名称：`)          TextInput({            placeholder: '请输入图书名称', text: $$this.bookname,          }).layoutWeight(1)            .backgroundColor('#fff')        }.border({ width: { bottom: 1 }, color: '#ccc' })        Row() {          Text(`图书作者：`)          TextInput({            placeholder: '请输入图书作者',            text: $$this.author,          }).layoutWeight(1).backgroundColor('#fff')            .backgroundColor('#fff')        }.border({ width: { bottom: 1 }, color: '#ccc' })        Row() {          Text(`图书出版社：`)          TextInput({            placeholder: '请输入出版社',            text: $$this.publisher,          }).layoutWeight(1).backgroundColor('#fff')        }.border({ width: { bottom: 1 }, color: '#ccc' })        Button({ type: ButtonType.Normal }) {          Text(`保存`)            .fontSize(18)            .fontColor('#fff')            .fontWeight(FontWeight.Bold)        }.width('100%').borderRadius(10)        //将页面数据重新发送哀求到服务器，修改完毕        .onClick(() => {          if (this.bookname == '' || this.author == '' || this.publisher == '') {            promptAction.showToast({              message: `请输入完备信息`,              bottom: 350            })          } else {            // 创建一个HTTP哀求对象            const req = http.createHttp()
3.             // 发送PUT哀求以更新书籍信息            req.request('https://hmajax.itheima.net/api/books/' + this.bookid, {              // 设置哀求方法为PUT              method: http.RequestMethod.PUT,              // 设置哀求头，指定内容类型为JSON              header: {                'content-type': 'application/json'              },              // 设置哀求体，包含需要更新的书籍信息              extraData: {                bookname: this.bookname,                author: this.author,                publisher: this.publisher,                creator: creator              }              // 哀求发送完成后实行的回调函数              // 这里可以处置处罚响应数据大概处置处罚错误            }).then(res => {              let obj: IBook = JSON.parse(res.result.toString())              promptAction.showToast({                message: `${obj.message}`,                bottom: 350              })              router.back()            })          }        })        .height(38)      }.padding(15)    }    .title('编辑图书')    .titleMode(NavigationTitleMode.Mini)  }}

复制代码

Axios模块

1. 概述

Axios 是一个基于Promise的HTTP客户端，可以在浏览器和Node.js中使用。虽然HarmonyOS不是直接支持Node.js环境，但是可以通过npm安装axios并在HarmonyOS的应用中使用。
参考链接
2. 优点

• 基于Promise：可以使用async/await语法编写更简洁的异步代码。
  
• 支持浏览器和Node.js：具有良好的跨平台本领。
  
• 易于使用：API简朴易懂，文档丰富。
  

3. 安装

在HarmonyOS应用开发环境中，可以使用npm来安装axios：

1. # 安装
2. ohpm i @ohos/axios
4. # 卸载
5. ohpm uninstall @ohos/axios

复制代码

使用示例

使用前在demo中entry–>src–>main–>ets–>common–>Common.ets文件中改为正确的服务器所在，在entry–>src–>main–>resources–>rawfile目录下添加正确的证书，才可正常的使用demo。
发起一个 GET 哀求
axios支持泛型参数，由于ArkTS不再支持any类型，需指定参数的具体类型。 如：axios.get<T = any, R = AxiosResponse, D = any>(url)

• T: 是响应数据类型。当发送一个 POST 哀求时，客户端大概会收到一个 JSON 对象。T 就是这个 JSON 对象的类型。默认情况下，T 是 any，这意味着可以接收任何类型的数据。
  
• R: 是响应体的类型。当服务器返回一个响应时，响应体通常是一个 JSON 对象。R 就是这个 JSON 对象的类型。默认情况下，R 是 AxiosResponse，这意味着响应体是一个 AxiosResponse 对象，它的 data 属性是 T 类型的
  
• D: 是哀求参数的类型。当发送一个 GET 哀求时，大概会在 URL 中添加一些查询参数。D 就是这些查询参数的类型。参数为空情况下，D 是 null类型。
  

1. import axios from '@ohos/axios'
2. interface userInfo{
3.   id: number
4.   name: string,
5.   phone: number
6. }
8. // 向给定ID的用户发起请求
9. axios.get<userInfo, AxiosResponse<userInfo>, null>('/user?ID=12345')
10. .then((response: AxiosResponse<userInfo>)=> {
11.   // 处理成功情况
12.   console.info("id" + response.data.id)
13.   console.info(JSON.stringify(response));
14. })
15. .catch((error: AxiosError)=> {
16.   // 处理错误情况
17.   console.info(JSON.stringify(error));
18. })
19. .then(()=> {
20.   // 总是会执行
21. });
23. // 上述请求也可以按以下方式完成（可选）
24. axios.get<userInfo, AxiosResponse<userInfo>, null>('/user', {
25.   params: {
26.     ID: 12345
27.   }
28. })
29. .then((response:AxiosResponse<userInfo>) => {
30.   console.info("id" + response.data.id)
31.   console.info(JSON.stringify(response));
32. })
33. .catch((error:AxiosError) => {
34.   console.info(JSON.stringify(error));
35. })
36. .then(() => {
37.   // 总是会执行
38. });
40. // 支持async/await用法
41. async function getUser() {
42.   try {
43.         const response:AxiosResponse = await axios.get<string, AxiosResponse<string>, null>(this.getUrl);
44.         console.log(JSON.stringify(response));
45.       } catch (error) {
46.     console.error(JSON.stringify(error));
47.   }
48. }

复制代码

发送一个 POST 哀求

1. interface user {
2.   firstName: string,
3.   lastName: string
4. }
5.    axios.post<string, AxiosResponse<string>, user>('/user', {
6.      firstName: 'Fred',
7.      lastName: 'Flintstone'
8.    })
9.    .then((response: AxiosResponse<string>) => {
10.      console.info(JSON.stringify(response));
11.    })
12.    .catch((error) => {
13.   console.info(JSON.stringify(error));
14. });

复制代码

发起多个并发哀求

1. const getUserAccount = ():Promise<AxiosResponse> => {
2.       return axios.get<string, AxiosResponse<string>, null>('/user/12345');
3.     }
5. const getUserPermissions = ():Promise<AxiosResponse> => {
6.       return axios.get<string, AxiosResponse<string>, null>('/user/12345/permissions');
7.     }
9. Promise.all<AxiosResponse>([getUserAccount(), getUserPermissions()])
10. .then((results:AxiosResponse[]) => {
11.         const acct = results[0].data as string;
12.         const perm = results[1].data as string;
13.       });

复制代码

使用说明

axios API

通过向 axios 传递相干配置来创建哀求

axios(config)

1. // 发送一个get请求
2. axios<string, AxiosResponse<string>, null>({
3.   method: "get",
4.   url: 'https://www.xxx.com/info'
5. }).then((res: AxiosResponse) => {
6.   console.info('result:' + JSON.stringify(res.data));
7. }).catch((error: AxiosError) => {
8.   console.error(error.message);
9. })

复制代码

axios(url[, config])

1. // 发送一个get请求（默认请求方式）
2. axios.get<string, AxiosResponse<string>, null>('https://www.xxx.com/info', { params: { key: "value" } })
3. .then((response: AxiosResponse) => {
4.   console.info("result:" + JSON.stringify(response.data));
5. })
6. .catch((error: AxiosError) => {
7.   console.error("result:" + error.message);
8. });

复制代码

哀求方法的 别名方式 来创建哀求

为方便起见，为全部支持的哀求方法提供了别名。

• axios.request(config)
  
• axios.get(url[, config])
  
• axios.delete(url[, config])
  
• axios.post(url[, data[, config]])
  
• axios.put(url[, data[, config]])
  

   注意: 在使用别名方法时， url、method、data 这些属性都不必在配置中指定。

1. // 发送get请求
2. axios.get<string, AxiosResponse<string>, null>('https://www.xxx.com/info', { params: { key: "value" } })
3. .then((response: AxiosResponse) => {
4.   console.info("result:" + JSON.stringify(response.data));
5. })
6. .catch((error: AxiosError) => {
7.   console.error("result:" + error.message);
8. });

复制代码

axios 实例

创建一个实例

您可以使用自界说配置新建一个实例。
axios.create([config])

1. const instance = axios.create({
2.   baseURL: 'https://www.xxx.com/info',
3.   timeout: 1000,
4.   headers: {'X-Custom-Header': 'foobar'}
5. });

复制代码

实例方法

• axios#request(config)
  
• axios#get(url[, config])
  
• axios#delete(url[, config])
  
• axios#post(url[, data[, config]])
  
• axios#put(url[, data[, config]])
  

4. 图书案例示例代码–Axios

2. export interface iBookResponse {
3.   /**
4.    * 响应数组
5.    */
6.   data: iBookInfo[];
7.   /**
8.    * 响应消息
9.    */
10.   message: string;
11. }
12. export const  creator: string = 'baba'
14. // 按需导出
15. export interface iBookInfo {
16.   /**
17.    * 图书作者
18.    */
19.   author: string;
20.   /**
21.    * 图书名字
22.    */
23.   bookname: string;
24.   /**
25.    * 图书id
26.    */
27.   id: number;
28.   /**
29.    * 图书出版社
30.    */
31.   publisher: string;
32. }

复制代码

获取-图书列表 GET &&
删除-图书 DELETE

2. import axios, { AxiosResponse } from '@ohos/axios'
3. import { iBookResponse, iBookInfo, creator } from './models'
4. import router from '@ohos.router'
5. import { promptAction } from '@kit.ArkUI'
8. const req = axios.create()
10. @Entry
11. @Component
12. struct Index {
13.   @State bookList: iBookInfo[] = []
14.   creator: string = creator
16.   //-------------------------
17.   onPageShow(): void {
18.     this.getList()
19.   }
21.   //-----------------请求数据渲染到列表
22.   async getList() {
23.     // 发起GET请求以获取图书数据
24.     let res: AxiosResponse<iBookResponse> =
25.       await req.request({
26.         url: 'https://hmajax.itheima.net/api/books',
27.         method: 'get',
28.         params: {
29.           creator: creator
30.         }
31.       })
32.     // 将请求响应中的图书数据赋值给bookList属性
33.     this.bookList = res.data.data
34.     //AlertDialog.show({message:JSON.stringify(res.data)})
35.   }
37.   // 1. 我的书架
38.   @Builder
39.   MyBook() {
40.     Row() {
41.       Image($r('app.media.ic_public_drawer_filled'))
42.         .height(20)//---------------点击全部删除
43.         .onClick(async () => {
44.           promptAction.showDialog({
45.             title: '提示',
46.             message: '确定删除吗？',
47.             buttons: [
48.               { text: '确定', color: '#ff164ae0' },
49.               { text: '取消', color: '#ff1c1919' }
50.             ]
51.           }) //根据点击结果，执行不同的操作
52.           //循环数组，每次根据id删除
53.          if (res.index == 0) {
54.           for (let i = 0; i < this.bookList.length; i++) {
55.             let res: AxiosResponse<iBookResponse> =
56.               await req.request({
57.                 url: 'https://hmajax.itheima.net/api/books/' + this.bookList[i].id,
58.                 method: 'delete'
59.               })
60.           }
61.           }
62.           //刷新列表 提示
63.           AlertDialog.show({ message: '全部删除成功' })
64.           this.getList()
66.         })
67.       Text('我的书架')
68.         .fontSize(20)
69.         .fontWeight(800)
70.       Image($r('app.media.ic_public_add'))
71.         .height(20)
72.         .onClick(() => {
73.           router.pushUrl({
74.             url: '/pages/Mbook/addPage'.slice(1),
75.           })
76.         })
77.     }
78.     .width('100%')
79.     .justifyContent(FlexAlign.SpaceBetween)
80.     .padding(10)
81.     .border({ width: { bottom: 1 }, color: { bottom: 'rgba(0,0,0,0.2)' } })
82.   }
83.   // 2. 书籍列表
84.   @Builder
85.   BookList() {
86.     List() {
87.       ForEach(this.bookList, (item: iBookInfo, index: number) => {
88.         ListItem() {
89.           // 布局
90.           Row({ space: 10 }) {
91.             Image($r('app.media.ic_public_cover'))
92.               .width(100)
93.             Column({ space: 25 }) {
94.               Column() {
95.                 Text('书名：' + item.bookname)
96.                   .width('100%')
97.                   .fontSize(20)
98.                   .fontWeight(800)
99.                 Text('作者:' + item.author)
100.                   .width('100%')
101.                   .fontSize(14)
102.                   .fontWeight(600)
103.                   .fontColor('rgba(0,0,0,0.4)')
104.                   .padding({ top: 5 })
105.               }
106.               Text('出版社:' + item.publisher)
107.                 .width('100%')
108.                 .fontWeight(600)
109.                 .fontColor('rgba(0,0,0,0.4)')
110.             }
111.             .layoutWeight(1)
112.           }
113.           .padding(10)
114.           //-----------点击跳转编辑
115.           .onClick(() => {
116.             router.pushUrl({
117.               url: 'pages/Mbook/BjPage',
118.               params: {
119.                 bookid: item.id
120.               }
121.             })
122.           })
123.         }
124.         .swipeAction({
125.           end: this.delBuilder(item.id)
126.         })
127.       })
128.     }
129.   }
131.   // 3. 删除书籍的构建函数
132.   @Builder
133.   delBuilder(id: number) {
134.     Column() {
135.       Text('删除')
136.         .backgroundColor(Color.Red)
137.         .fontColor(Color.White)
138.         .height('100%')
139.         .width(60)
140.         .textAlign(TextAlign.Center)
141.     }
142.     .padding(10)
143.     //点击提示确认删除
144.     .onClick(() => {
145.       promptAction.showDialog({
146.         title: '提示',
147.         message: '确定删除吗？',
148.         buttons: [
149.           { text: '确定', color: '#ff164ae0' },
150.           { text: '取消', color: '#ff1c1919' }
151.         ]
152.       })//根据点击结果，执行不同的操作
153.         .then(async (res) => {
154.           if (res.index == 0) {
155.             //删除
156.             let res: AxiosResponse<iBookResponse> =
157.               await req.request({
158.                 url: 'https://hmajax.itheima.net/api/books/' + id,
159.                 method: 'delete'
160.               })
161.             //删除成功，提示，刷新列表
162.             promptAction.showToast({
163.               message: '删除成功'
164.             })
165.             this.getList()
166.           }
167.         })
168.     })
169.   }
170.   build() {
171.     Column() {
172.       // 1. 我的书架
173.       this.MyBook()
174.       // 2. 书籍列表
175.       this.BookList()
176.     }
177.     .height('100%')
178.     .width('100%')
179.   }
180. }

复制代码

新增-图书 POST

1. // 导入创建者
2. import axios, { AxiosResponse } from '@ohos/axios'
3. import { creator, iBookInfo, iBookResponse } from './models'
4. import { promptAction, router } from '@kit.ArkUI';
6. // POST请求体数据类型
7. export interface iReqeustBody {
8.   /**
9.    * 新增图书作者
10.    */
11.   author: string;
12.   /**
13.    * 新增图书名字
14.    */
15.   bookname: string;
16.   /**
17.    * 新增图书创建者，自己的外号，和获取图书时的外号相同
18.    */
19.   creator: string;
20.   /**
21.    * 新增图书出版社
22.    */
23.   publisher: string;
24. }
25. @Entry
26. @Component
27. struct addPage {
28.   @State bookname: string = ''
29.   @State author: string = ''
30.   @State publisher: string = ''
31.   creator: string = creator
32.   build() {
33.     Navigation() {
34.       Column({ space: 10 }) {
35.         Row() {
36.           Text('图书名称:')
37.           TextInput({ placeholder: '请输入图书名字', text: $$this.bookname })
38.         }
40.         Row() {
41.           Text('图书作者:')
42.           TextInput({ placeholder: '请输入作者名字', text: $$this.author })
43.         }
45.         Row() {
46.           Text('图书出版社:')
47.           TextInput({ placeholder: '请输入出版社名字', text: $$this.publisher })
48.         }
50.         Button({ type: ButtonType.Normal }) {
51.           Text('保存')
52.             .fontColor(Color.White)
53.             .fontWeight(800)
54.         }
55.         .width('100%')
56.         .height(40)
57.         .borderRadius(8)
58.         //保存更新图书
59.         .onClick(async () => {
60.           // 调用接口保存图书
61.           // 1. 创建一个请求对象
62.           let req = axios.create()
63.           // 2. 发送请求
64.           if (this.bookname == '' || this.author == '' || this.publisher == '') {
65.             promptAction.showToast({
66.               message: `请输入完整信息`,
67.               bottom: 350
68.             })
69.           } else {
70.             let res: AxiosResponse<iBookResponse> =
71.               await req.request({
72.                 url: 'https://hmajax.itheima.net/api/books',
73.                 method: 'post',
74.                 data: {
75.                   bookname: this.bookname,
76.                   author: this.author,
77.                   publisher: this.publisher,
78.                   creator: creator
79.                 } as iReqeustBody
80.               })
81.             // 提示  然后返回
82.             promptAction.showToast({
83.               message: `${res.data.message}`,
84.               bottom: 350
85.             })
86.             router.back()
87.           }
88.         })
89.       }
90.       .height('100%')
91.       .width('100%')
92.       .padding(10)
93.     }
94.     .title('新增图书')
95.     .titleMode(NavigationTitleMode.Mini)
96.   }
97. }

复制代码

修改-图书 PUT

1. // 导入创建者
2. import { creator, iBookInfo, iBookResponse, } from './models'
3. import { router } from '@kit.ArkUI'
4. import axios, { AxiosResponse } from '@ohos/axios'
6. interface iRouterParams {
7.   bookid: number
8. }
9. interface iBookInfo1 {
10.   /**
11.    * 图书作者
12.    */
13.   author: string;
14.   /**
15.    * 图书名字
16.    */
17.   bookname: string;
18.   /**
19.    * 图书创建者，写上自己名字-管理自己的数据
20.    */
21.   creator: string;
22.   /**
23.    * 图书出版社
24.    */
25.   publisher: string;
26. }
27. export interface Putbook{
28. data:iBookInfo1
29. }
31. const req = axios.create()
33. @Entry
34. @Component
35. struct addPage {
36.   @State bookname: string = ''
37.   @State author: string = ''
38.   @State publisher: string = ''
39.   bookid: number = 0
41.   aboutToAppear(): void {
42.     //得到传过来的id
43.     let routerObj = router.getParams() as iRouterParams
44.     this.bookid = routerObj.bookid
46.     this.loadBook()
47.   }
49.   // 1. 回显图书数据
50.   async loadBook() {
51.     try {
52.       // 此处编写代码
53.       let res: AxiosResponse<Putbook> = await req.request({
54.         url: 'https://hmajax.itheima.net/api/books/' + this.bookid,
55.         method: 'get',
57.       })
58.       //AlertDialog.show({message:'获取图书数据成功'})
59.       this.bookname = res.data.data.bookname
60.       this.author = res.data.data.author
61.       this.publisher = res.data.data.publisher
62.     } catch (err) {
63.       console.error('err--->', JSON.stringify(err).slice(0,800))
64.     }
65.   }
67.   build() {
68.     Navigation() {
69.       Column({ space: 10 }) {
70.         Row() {
71.           Text('图书名称:')
72.           TextInput({ placeholder: this.bookname, text: $$this.bookname })
73.         }
74.         Row() {
75.           Text('图书作者:')
76.           TextInput({ placeholder: this.author, text: $$this.author })
77.         }
78.         Row() {
79.           Text('图书出版社:')
80.           TextInput({ placeholder: this.publisher, text: $$this.publisher })
81.         }
82.         Button({ type: ButtonType.Normal }) {
83.           Text('保存')
84.             .fontColor(Color.White)
85.             .fontWeight(800)
86.         }
87.         .width('100%')
88.         .height(40)
89.         .borderRadius(8)
90. //---------------点击修改并保存数据
91.         .onClick(async () => {
92.           let res: AxiosResponse<iBookResponse> =
93.             await req.request({
94.             url: 'https://hmajax.itheima.net/api/books/' + this.bookid,
95.             method: 'put',
96.             data: {
97.               bookname: this.bookname,
98.               author: this.author,
99.               publisher: this.publisher,
100.               creator: creator
101.             } as iBookInfo1
102.           })
103.           AlertDialog.show({message:'修改图书数据成功'})
104.           router.back()
105.         })
106.       }
107.       .height('100%')
108.       .width('100%')
109.       .padding(10)
110.     }
111.     .title('编辑  图书')
112.     .titleMode(NavigationTitleMode.Mini)
113.   }
114. }

复制代码

5. 配置和拦截器

1. loding···

复制代码

【http封装】 - 封装request泛型方法

我们发现网络哀求的代码许多，且有些相似之处，我们把GET,POST进行封装之后哀求就变得非常简朴了，我把封装的类放下面：
新建一个.ets文件
loading·····
（更新中···）

1. import axios, { AxiosResponse, AxiosError, AxiosRequestConfig } from '@ohos/axios'
2. import { iLoginUserModel, iResponseModel } from '../models/datamodel'
3. import { promptAction, router } from '@kit.ArkUI'
5. // 1. 准备一个axios的对象实例，同时设置好baseUrl
6. const req = axios.create({
7. baseURL: 'https://api-harmony-teach.itheima.net/'
8. })
10. export class HdHttp {
11. // 这个方法给外面专门做get请求调用的
12. static async Get<T>(url: string, paramsOrData?: object) {
13.   return await HdHttp.request<T>('GET', url, paramsOrData)
14. }
16. // 这个方法给外面专门做post请求调用的
17. static async Post<T>(url: string, paramsOrData?: object) {
18.   return await HdHttp.request<T>('POST', url, paramsOrData)
19. }
21. /*
22. method:表示服务器的请求方法，Get，POST，PUT，Delete
23. url:代表的是服务器的url路径（不包含基本域名地址） ,例如：hm/studyInfo
24. * paramsOrData：请求传参,可选
25. *
26. * T：代表的是服务器响应数据中的 data这个属性的类型
27. * */
28. private static async request<T>(method: string, url: string, paramsOrData?: object) {
29.   try {
30.     //   1. 使用req来发送请求
31.     let reqConfig: AxiosRequestConfig = {
32.       method: method,
33.       url: url, //是请求接口的url路径部分，并且不带有/
34.     }
35.     // 2. 分请求类型来决定传参参数是parmas还是data
36.     if (method == 'GET') {
37.       reqConfig.params = paramsOrData
38.     } else {
39.       reqConfig.data = paramsOrData
40.     }
42.     // 3. 在请求前在header中携带token
43.     // 获取token
44.     let user = AppStorage.get<iLoginUserModel>('user')
45.     if (user && user.token) {
46.       reqConfig.headers = {
47.         'Authorization': `Bearer ${user.token}`
48.       }
49.     }
51.     let res: AxiosResponse<iResponseModel<T>> = await req.request(reqConfig)
53.     // 4. 处理服务器响应体中的code值为非10000的情况
54.     if (res.data.code != 10000) {
55.       //  将服务器的逻辑问题信息提示给用户
56.       promptAction.showToast({ message: res.data.message })
57.       return Promise.reject(res.data.message) //传递给外部调用者的 catch()中的信息
58.     }
59.     //   3. 返回结果(返回的是服务器的响应报文体的数据)
60.     return res.data
62.   } catch (err) {
63.     //  当服务器的http状态码为非200，就会执行catch
64.     let errObj: AxiosError = err
65.     // 判断服务器的响应状态码如果是401，表示token失效，此时应该提示用户和跳转到登录页面
66.     if (errObj.response?.status == 401) {
67.       promptAction.showToast({ message: '登录已失效，请重新登录' })
68.       router.replaceUrl({ url: 'pages/LoginPage' })
69.     } else {
70.       //  提示用户是什么错误即可
71.       promptAction.showToast({ message: '网络异常:' + errObj.message })
72.     }
73.     // AlertDialog.show({ message: 'err:' + JSON.stringify(errObj.response?.status, null, 2) })
74.     return Promise.reject(errObj.message) //传递给外部调用者的 catch()中的信息 外面使用者使用try{}catch(err){}
75.   }
76. }
77. }

复制代码

调用封装好的类进行代码实现

1. loading·····

复制代码

总结

• HarmonyOS内置的HTTP模块：提供了根本的HTTP哀求功能，适合简朴的网络通讯需求。
  
• Axios：提供了更丰富的功能和更好的用户体验，尤其是对于需要更复杂哀求处置处罚的应用来说，是一个不错的选择。
  

选择哪个模块取决于你的具体需求和偏好。假如你的应用需要与Web服务细密集成并且需要更多的功能，那么axios大概是更好的选择；而对于简朴的HTTP哀求，HarmonyOS自带的HTTP模块就充足了。

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