鸿蒙开发之http网络请求和axios模块及代码演示与封装HarmonyOS内置的HTTP模块：提供了基本的HTTP请求

站长

2024年10月01日 17:18 · 阅读数 281

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

HTTP协议概述

1. 基本概念

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

2. 请求报文结构

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

请求头：包含客户端的信息，如Accept-Language、User-Agent等。

Accept-Language: zh-CN,zh;q=0.9
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3

实体主体：可选部分，包含请求的具体内容，如表单数据或文件上传。
```
username=admin&password=123456
```

3. 响应报文结构

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

响应头：包含服务器的信息，如Content-Type、Date等。

Content-Type: text/html; charset=UTF-8
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. 导入

import { http } from '@kit.NetworkKit'

2. 创建请求对象

const req = http.createHttp()

3. 发送请求并获取响应

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

注意事项

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


{
  "module": {
    "name": "entry",
    "type": "entry",
    "description": "$string:module_desc",
    "mainElement": "EntryAbility",
    "deviceTypes": [
      "phone",
      "tablet",
      "2in1"
    ],
    "deliveryWithInstall": true,
    "installationFree": false,
    "pages": "$profile:main_pages",
    "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
    ],
    "abilities": [
      {
        "name": "EntryAbility",
        "srcEntry": "./ets/entryability/EntryAbility.ets",
        "description": "$string:EntryAbility_desc",
        "icon": "$media:icon",
        "label": "$string:EntryAbility_label",
        "startWindowIcon": "$media:startIcon",
        "startWindowBackground": "$color:start_window_background",
        "exported": true,
        "skills": [
          {
            "entities": [
              "entity.system.home"
            ],
            "actions": [
              "action.system.home"
            ]
          }
        ]
      }
    ],
    "extensionAbilities": [
      {
        "name": "EntryBackupAbility",
        "srcEntry": "./ets/entrybackupability/EntryBackupAbility.ets",
        "type": "backup",
        "exported": false,
        "metadata": [
          {
            "name": "ohos.extension.backup",
            "resource": "$profile:backup_config"
          }
        ]
      }
    ]
  }
}

// 代码示例
import { http } from '@kit.NetworkKit'

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

2. 主要方法

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

鸿蒙开发之http网络请求和axios模块及代码演示与封装HarmonyOS内置的HTTP模块：提供了基本的HTTP请求

完成效果

鸿蒙开发之http网络请求和axios模块及代码演示与封装HarmonyOS内置的HTTP模块：提供了基本的HTTP请求

3. 示例代码


export interface IBook{
  /**
   * 响应数组
   */
  data: iBook[];
  /**
   * 响应消息
   */
  message: string;

}


export interface IBookdetail{
  /**
   * 响应数组
   */
  data: iBook;
  /**
   * 响应消息
   */
  message: string;


}

export interface iBook {
  /**
   * 图书作者
   */
  author: string;
  /**
   * 图书名字
   */
  bookname: string;
  /**
   * 图书id
   */
  id: number;
  /**
   * 图书出版社
   */
  publisher: string;
}

export  const creator='艾宝宝'

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

import { IBook, iBook } from './databook'
import { http } from '@kit.NetworkKit'
import router from '@ohos.router'
import { promptAction } from '@kit.ArkUI'

@Entry
@Component
struct 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()
    // 发起网络请求，获取书籍信息
    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()
               // 向指定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()
            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


// 导入创建者
import { creator, IBook } from './databook'
import { promptAction, router } from '@kit.ArkUI'
import { http } from '@kit.NetworkKit'

/*
 * 步骤
 * 1. 非空验证 -> 轻提示用户
 * ✔️2. 获取表单的值 -> 已经使用了$$完成
 * 3. 发出POST请求将数据提交给服务器
 * 4. 返回图书列表页面
 *
 * */
@Entry
@Component
struct 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()
    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

import router from '@ohos.router'
import { creator, IBook, IBookdetail } from './databook'
import { http } from '@kit.NetworkKit'
import { promptAction } from '@kit.ArkUI'

interface BookId {
  id: number
}

@Entry
@Component
struct 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()
            // 发送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：

# 安装
ohpm i @ohos/axios

# 卸载
ohpm uninstall @ohos/axios

鸿蒙开发之http网络请求和axios模块及代码演示与封装HarmonyOS内置的HTTP模块：提供了基本的HTTP请求

使用示例

使用前在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类型。

import axios from '@ohos/axios'
interface userInfo{
  id: number
  name: string,
  phone: number
}

// 向给定ID的用户发起请求
axios.get<userInfo, AxiosResponse<userInfo>, null>('/user?ID=12345')
.then((response: AxiosResponse<userInfo>)=> {
  // 处理成功情况
  console.info("id" + response.data.id)
  console.info(JSON.stringify(response));
})
.catch((error: AxiosError)=> {
  // 处理错误情况
  console.info(JSON.stringify(error));
})
.then(()=> {
  // 总是会执行
});

// 上述请求也可以按以下方式完成（可选）
axios.get<userInfo, AxiosResponse<userInfo>, null>('/user', {
  params: {
    ID: 12345
  }
})
.then((response:AxiosResponse<userInfo>) => {
  console.info("id" + response.data.id)
  console.info(JSON.stringify(response));
})
.catch((error:AxiosError) => {
  console.info(JSON.stringify(error));
})
.then(() => {
  // 总是会执行
});

// 支持async/await用法
async function getUser() {
  try {
        const response:AxiosResponse = await axios.get<string, AxiosResponse<string>, null>(this.getUrl);
        console.log(JSON.stringify(response));
      } catch (error) {
    console.error(JSON.stringify(error));
  }
}

发送一个 POST 请求

interface user {
  firstName: string,
  lastName: string
}
   axios.post<string, AxiosResponse<string>, user>('/user', {
     firstName: 'Fred',
     lastName: 'Flintstone'
   })
   .then((response: AxiosResponse<string>) => {
     console.info(JSON.stringify(response));
   })
   .catch((error) => {
  console.info(JSON.stringify(error));
});

发起多个并发请求

 const getUserAccount = ():Promise<AxiosResponse> => {
      return axios.get<string, AxiosResponse<string>, null>('/user/12345');
    }

 const getUserPermissions = ():Promise<AxiosResponse> => {
      return axios.get<string, AxiosResponse<string>, null>('/user/12345/permissions');
    }

 Promise.all<AxiosResponse>([getUserAccount(), getUserPermissions()])
 .then((results:AxiosResponse[]) => {
        const acct = results[0].data as string;
        const perm = results[1].data as string;
      });

使用说明

axios API

通过向 axios 传递相关配置来创建请求

axios(config)

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

axios(url[, config])

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

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

为方便起见，为所有支持的请求方法提供了别名。

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

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

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

axios 实例

创建一个实例

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

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

实例方法

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

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


export interface iBookResponse {
  /**
   * 响应数组
   */
  data: iBookInfo[];
  /**
   * 响应消息
   */
  message: string;
}
export const  creator: string = 'baba'

// 按需导出
export interface iBookInfo {
  /**
   * 图书作者
   */
  author: string;
  /**
   * 图书名字
   */
  bookname: string;
  /**
   * 图书id
   */
  id: number;
  /**
   * 图书出版社
   */
  publisher: string;
}

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


import axios, { AxiosResponse } from '@ohos/axios'
import { iBookResponse, iBookInfo, creator } from './models'
import router from '@ohos.router'
import { promptAction } from '@kit.ArkUI'


const req = axios.create()

@Entry
@Component
struct Index {
  @State bookList: iBookInfo[] = []
  creator: string = creator

  //-------------------------
  onPageShow(): void {
    this.getList()
  }

  //-----------------请求数据渲染到列表
  async getList() {
    // 发起GET请求以获取图书数据
    let res: AxiosResponse<iBookResponse> =
      await req.request({
        url: 'https://hmajax.itheima.net/api/books',
        method: 'get',
        params: {
          creator: creator
        }
      })
    // 将请求响应中的图书数据赋值给bookList属性
    this.bookList = res.data.data
    //AlertDialog.show({message:JSON.stringify(res.data)})
  }

  // 1. 我的书架
  @Builder
  MyBook() {
    Row() {
      Image($r('app.media.ic_public_drawer_filled'))
        .height(20)//---------------点击全部删除
        .onClick(async () => {
          promptAction.showDialog({
            title: '提示',
            message: '确定删除吗？',
            buttons: [
              { text: '确定', color: '#ff164ae0' },
              { text: '取消', color: '#ff1c1919' }
            ]
          }) //根据点击结果，执行不同的操作
          //循环数组，每次根据id删除
         if (res.index == 0) {
          for (let i = 0; i < this.bookList.length; i++) {
            let res: AxiosResponse<iBookResponse> =
              await req.request({
                url: 'https://hmajax.itheima.net/api/books/' + this.bookList[i].id,
                method: 'delete'
              })
          }
          }
          //刷新列表 提示
          AlertDialog.show({ message: '全部删除成功' })
          this.getList()

        })
      Text('我的书架')
        .fontSize(20)
        .fontWeight(800)
      Image($r('app.media.ic_public_add'))
        .height(20)
        .onClick(() => {
          router.pushUrl({
            url: '/pages/Mbook/addPage'.slice(1),
          })
        })
    }
    .width('100%')
    .justifyContent(FlexAlign.SpaceBetween)
    .padding(10)
    .border({ width: { bottom: 1 }, color: { bottom: 'rgba(0,0,0,0.2)' } })
  }
  // 2. 书籍列表
  @Builder
  BookList() {
    List() {
      ForEach(this.bookList, (item: iBookInfo, index: number) => {
        ListItem() {
          // 布局
          Row({ space: 10 }) {
            Image($r('app.media.ic_public_cover'))
              .width(100)
            Column({ space: 25 }) {
              Column() {
                Text('书名：' + item.bookname)
                  .width('100%')
                  .fontSize(20)
                  .fontWeight(800)
                Text('作者:' + item.author)
                  .width('100%')
                  .fontSize(14)
                  .fontWeight(600)
                  .fontColor('rgba(0,0,0,0.4)')
                  .padding({ top: 5 })
              }
              Text('出版社:' + item.publisher)
                .width('100%')
                .fontWeight(600)
                .fontColor('rgba(0,0,0,0.4)')
            }
            .layoutWeight(1)
          }
          .padding(10)
          //-----------点击跳转编辑
          .onClick(() => {
            router.pushUrl({
              url: 'pages/Mbook/BjPage',
              params: {
                bookid: item.id
              }
            })
          })
        }
        .swipeAction({
          end: this.delBuilder(item.id)
        })
      })
    }
  }

  // 3. 删除书籍的构建函数
  @Builder
  delBuilder(id: number) {
    Column() {
      Text('删除')
        .backgroundColor(Color.Red)
        .fontColor(Color.White)
        .height('100%')
        .width(60)
        .textAlign(TextAlign.Center)
    }
    .padding(10)
    //点击提示确认删除
    .onClick(() => {
      promptAction.showDialog({
        title: '提示',
        message: '确定删除吗？',
        buttons: [
          { text: '确定', color: '#ff164ae0' },
          { text: '取消', color: '#ff1c1919' }
        ]
      })//根据点击结果，执行不同的操作
        .then(async (res) => {
          if (res.index == 0) {
            //删除
            let res: AxiosResponse<iBookResponse> =
              await req.request({
                url: 'https://hmajax.itheima.net/api/books/' + id,
                method: 'delete'
              })
            //删除成功，提示，刷新列表
            promptAction.showToast({
              message: '删除成功'
            })
            this.getList()
          }
        })
    })
  }
  build() {
    Column() {
      // 1. 我的书架
      this.MyBook()
      // 2. 书籍列表
      this.BookList()
    }
    .height('100%')
    .width('100%')
  }
}

新增-图书 POST

// 导入创建者
import axios, { AxiosResponse } from '@ohos/axios'
import { creator, iBookInfo, iBookResponse } from './models'
import { promptAction, router } from '@kit.ArkUI';

// POST请求体数据类型
export interface iReqeustBody {
  /**
   * 新增图书作者
   */
  author: string;
  /**
   * 新增图书名字
   */
  bookname: string;
  /**
   * 新增图书创建者，自己的外号，和获取图书时的外号相同
   */
  creator: string;
  /**
   * 新增图书出版社
   */
  publisher: string;
}
@Entry
@Component
struct addPage {
  @State bookname: string = ''
  @State author: string = ''
  @State publisher: string = ''
  creator: string = creator
  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(async () => {
          // 调用接口保存图书
          // 1. 创建一个请求对象
          let req = axios.create()
          // 2. 发送请求
          if (this.bookname == '' || this.author == '' || this.publisher == '') {
            promptAction.showToast({
              message: `请输入完整信息`,
              bottom: 350
            })
          } else {
            let res: AxiosResponse<iBookResponse> =
              await req.request({
                url: 'https://hmajax.itheima.net/api/books',
                method: 'post',
                data: {
                  bookname: this.bookname,
                  author: this.author,
                  publisher: this.publisher,
                  creator: creator
                } as iReqeustBody
              })
            // 提示  然后返回
            promptAction.showToast({
              message: `${res.data.message}`,
              bottom: 350
            })
            router.back()
          }
        })
      }
      .height('100%')
      .width('100%')
      .padding(10)
    }
    .title('新增图书')
    .titleMode(NavigationTitleMode.Mini)
  }
}

修改-图书 PUT

// 导入创建者
import { creator, iBookInfo, iBookResponse, } from './models'
import { router } from '@kit.ArkUI'
import axios, { AxiosResponse } from '@ohos/axios'

interface iRouterParams {
  bookid: number
}
interface iBookInfo1 {
  /**
   * 图书作者
   */
  author: string;
  /**
   * 图书名字
   */
  bookname: string;
  /**
   * 图书创建者，写上自己名字-管理自己的数据
   */
  creator: string;
  /**
   * 图书出版社
   */
  publisher: string;
}
export interface Putbook{
data:iBookInfo1
}

const req = axios.create()

@Entry
@Component
struct addPage {
  @State bookname: string = ''
  @State author: string = ''
  @State publisher: string = ''
  bookid: number = 0

  aboutToAppear(): void {
    //得到传过来的id
    let routerObj = router.getParams() as iRouterParams
    this.bookid = routerObj.bookid

    this.loadBook()
  }

  // 1. 回显图书数据
  async loadBook() {
    try {
      // 此处编写代码
      let res: AxiosResponse<Putbook> = await req.request({
        url: 'https://hmajax.itheima.net/api/books/' + this.bookid,
        method: 'get',

      })
      //AlertDialog.show({message:'获取图书数据成功'})
      this.bookname = res.data.data.bookname
      this.author = res.data.data.author
      this.publisher = res.data.data.publisher
    } catch (err) {
      console.error('err--->', JSON.stringify(err).slice(0,800))
    }
  }

  build() {
    Navigation() {
      Column({ space: 10 }) {
        Row() {
          Text('图书名称:')
          TextInput({ placeholder: this.bookname, text: $$this.bookname })
        }
        Row() {
          Text('图书作者:')
          TextInput({ placeholder: this.author, text: $$this.author })
        }
        Row() {
          Text('图书出版社:')
          TextInput({ placeholder: this.publisher, text: $$this.publisher })
        }
        Button({ type: ButtonType.Normal }) {
          Text('保存')
            .fontColor(Color.White)
            .fontWeight(800)
        }
        .width('100%')
        .height(40)
        .borderRadius(8)
//---------------点击修改并保存数据
        .onClick(async () => {
          let res: AxiosResponse<iBookResponse> =
            await req.request({
            url: 'https://hmajax.itheima.net/api/books/' + this.bookid,
            method: 'put',
            data: {
              bookname: this.bookname,
              author: this.author,
              publisher: this.publisher,
              creator: creator
            } as iBookInfo1
          })
          AlertDialog.show({message:'修改图书数据成功'})
          router.back()
        })
      }
      .height('100%')
      .width('100%')
      .padding(10)
    }
    .title('编辑  图书')
    .titleMode(NavigationTitleMode.Mini)
  }
}

5. 配置和拦截器

loding···

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

新建一个.ets文件，

import { promptAction } from '@kit.ArkUI'

// 实例化 通用配置
export const axiosInstance = axios.create({
  baseURL: 'https://meikou-api.itheima.net/',
  timeout: 20000
})

export class RequestAxios {
  static get<T>(url: string, params?: object): Promise<ResponseType<T>> {
    return axiosInstance.get<null, ResponseType<T>>(url, { params })
  }

  static post<T>(url: string, data?: object): Promise<ResponseType<T>> {
    return axiosInstance.post<null, ResponseType<T>>(url, data)
  }

  static delete<T>(url: string, data?: object): Promise<ResponseType<T>> {
    return axiosInstance.delete<null, ResponseType<T>>(url, data)
  }

  static put<T>(url: string, data?: object): Promise<ResponseType<T>> {
    return axiosInstance.put<null, ResponseType<T>>(url, data)
  }
}

使用示例

```
loading·····待更新···
```

总结

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

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

转载自:https://juejin.cn/post/7410987368344027190

鸿蒙开发之http网络请求和axios模块及代码演示与封装HarmonyOS内置的HTTP模块：提供了基本的HTTP请求

HTTP协议概述

1. 基本概念

2. 请求报文结构

3. 响应报文结构

4. 请求方法

5. 状态码

HTTP的工作原理

HTTP与HTTPS的区别

HarmonyOS HTTP模块

1. 概述

基本用法

1. 导入

2. 创建请求对象

3. 发送请求并获取响应

注意事项

2. 主要方法

3. 示例代码

Axios模块

1. 概述

2. 优点

3. 安装

使用示例

使用说明

axios API

通过向 axios 传递相关配置来创建请求

axios(config)

axios(url[, config])

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

axios 实例

创建一个实例

实例方法

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

5. 配置和拦截器

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

使用示例

总结

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