华为HarmonyOS NEXT 原生应用开发：使用 Http 和 axios三方库与服务器网络数据请求交互 && 原生鸿蒙项目开发中 axios 的二次封装和配置

2025-04-26 11:51:58 2 阅读

原生鸿蒙中的网络数据请求

一、使用内置的 http - 数据交互

第一步：引入

import { http } from '@kit.NetworkKit'

第二步：创建 http 对象

// 创建 http 请求对象
const req = http.createHttp()

第三步：通过 http对象中的 request 方法发送请求

et result = await req.request("服务器后台 url 地址")

第四步：调用方法发送请求

 // 调用请求方法获取后端数据！
this.requestData()

- 完整代码示例：

// 1. 导包
import { http } from '@kit.NtworkKit'

// 2. 封装内置的 请求数据 的方法
  async requestData() {
    // 创建 http 请求对象
    const req = http.createHttp()
    // 通过 http 中的 request 方法 发送网络数据请求
    let result = await req.request("https://zhousg.atomgit.net/harmonyos-next/takeaway.json")
    // 获取返回结果中的数据包
    let data = result.result
    return data
  }

// 3. 触发事件， 调用请求方法
  Button("获取数据")
    .onClick(async () => {
      // 调用请求方法获取后端数据！
      let result = await this.requestData()
    })

二、实际开发中常见的请求方法 - 增删改查

get 、 put、 delete、 post方法的使用如下代码所示，下面分别展示了这四种常见方法的使用。
请求头配置和携带的请求参数配置都展示在下方，自己根据项目需求进行配置即可

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

// 定义数据结构
interface bookStructure {
  bookname: string;
  author: string;
  publisher: string;
  creator: string;
}

// 携带的参数
const bookParams: bookStructure = {
  bookname: "鸿蒙开发",
  author: "鸿蒙开发者",
  publisher: "华为出版社",
  creator: "小蒙"
};

const token = localStorage.getItem('user_token'); // 获取存储的token

@Entry
@Component
struct Index2 {

  build() {
    Column() {
      Text("内容")

      Button("新增图书")
        .onClick(async () => {
          try {
            const req = http.createHttp();
            const result = await req.request("https://hmajax.itheima.net/api/books", {
              method: http.RequestMethod.POST,
              header: {
                "Content-Type": "application/json",
                "Authorization": token
              },
              extraData: JSON.stringify(bookParams)
            });
            console.log("新增成功", JSON.stringify(result));
          } catch (err) {
            console.log("新增失败", err);
          }
        })

      Button("更新图书")
        .onClick(async () => {
          try {
            const updateBook = http.createHttp();
            const result = await updateBook.request("https://hmajax.itheima.net/api/books/123", {
              method: http.RequestMethod.PUT,
              header: {
                "Content-Type": "application/json",
                "Authorization": token
              },
              extraData: JSON.stringify(bookParams)
            });
            console.log("更新成功", JSON.stringify(result));
          } catch (err) {
            console.log("更新失败", err);
          }
        })

      Button("删除图书")
        .onClick(async () => {
          try {
            const deleteBook = http.createHttp();
            const result = await deleteBook.request("https://hmajax.itheima.net/api/books/123", {
              method: http.RequestMethod.DELETE,
              header: {
                "Content-Type": "application/json",
                "Authorization": token}
              }
            });
            console.log("删除成功", JSON.stringify(result));
          } catch (err) {
            console.log("删除失败", err);
          }
        })

      Button("获取图书")
        .onClick(async () => {
          try {
            const getBook = http.createHttp();
            const result = await getBook.request("https://hmajax.itheima.net/api/books?creator=余承东", {
              method: http.RequestMethod.GET,
              header: {
                "Authorization": token}
              }
            });
            console.log("获取成功", JSON.stringify(result));
          } catch (err) {
            console.log("获取失败", err);
          }
        })
    }
    .width("100%")
    .height("100%")
    .justifyContent(FlexAlign.Start)
  }
}

大家需要注意，服务器返回的是json字符串，我们需要通过序列化和反序列化对数据包进行预处理，然后再进行操作
还有一个注意事项，数据不能直接在UI组件中使用，需要循环遍历渲染UI使用，不然会造成页面UI渲染崩溃闪退（后续可能会修复）

三、使用 axios - 三方库 - 发送网络数据请求

// 准备好数据模型，用来过滤请求结果
export class AmbitionModel01 {
 message: string = ""
 data: string = ""
}


@State Ambition: AmbitionModel01 = new AmbitionModel01()
//页面展示
Text(this.Ambition.data)
// 点击按钮发送请求
Button("获取句子")
 .onClick( async () => {
   try {
     const result: AxiosResponse<AmbitionModel01> = await axios.get("https://hmajax.itheima.net/api/ambition",{
       method: "GET",
       params: {}
     })
     console.log("请求数据成功！", JSON.stringify(result))
     this.Ambition = JSON.parse(JSON.stringify(result.data) as string) as AmbitionModel01
     console.log("请求数据成功！", this.Ambition.message + this.Ambition.data)
     } catch (err) {
       console.log("数据请求失败！", err)
   }
 }

四、对 axios - 二次封装配置（请求、相应拦截器）

这是实际项目开发中最常见的一种方法，高效安全。

第一步：下载三方库

// 第一步： 下载 axios 三方库，配置好相应的网络请求权限

ohpm install @ohos/axios

第二步：创建 axios 示例对象

// 第二步： 创建axios实例，配置好项目服务器基地址及相关信息
export const instance = axios.create({
  baseURL: '这里写服务器基地址',  // 配置基地址
  timeout: 1000       // 请求超时响应时间
})

第三步：封装请求、响应拦截器

配置请求拦截器

instance.interceptors.request.use((config: InternalAxiosRequestConfig) => {
  // 通过AppStorage从 persistStorage 中获取 token
  const token: string | undefined = AppStorage.get('token')
  if (token) {
    // 若token存在，则将其添加到请求头
    config.headers['token'] = token
  }
  return config;
}, (error: AxiosError) => {
  //若出现异常，则提示异常信息
  promptAction.showToast({ message: error.message })
  return Promise.reject(error);
});

配置响应拦截器


instance.interceptors.response.use((response: AxiosResponse) => {
  // 若服务器返回的是正常数据，不做任何处理
  if (response.data.code === 200) {
    return response
  } else {
    //若服务器返回的是异常数据，则提示异常信息
    promptAction.showToast({ message: response.data.message })
    return Promise.reject(response.data.message)
  }
}, (error: AxiosError) => {
  //若出现异常，则提示异常信息
  promptAction.showToast({ message: error.message })
  return Promise.reject(error)
})

第四步：封装 api 接口方法

注意：
● get请求，我们不需要用接口去规范限制方法调用者传过来的参数数据类型
● post请求，调用者传递过来的参数我们需要使用接口进行规范限制，发送过去的就是我们传递过来的对象引用。

// 导入我们二次封装的工具类
import { instance } from "../http/Axios"


console.log("--------------- post 请求示例--------------------------")


// 登录接口 API
interface loginParams {
  phone: string
  code: string
}
export function login(params: loginParams) {
  return instance.post('/word/user/login', params)
}



interface PostData {
  rightCount: number
  answeredCount: number
  timeUsed: number
}
export function createPost(post: PostData) {
  return instance.post("/word/post/create", post)
}


console.log("--------------- get 请求示例--------------------------")


// 获取验证码 API
export function sendCode(phone: string) {
  return instance.get('/word/user/code', {params: {phone: phone}})
}

//获取全部打卡列表
export function getAllPost(page: number, size: number) {
  return instance.get('/word/post/getAll', { params: { page: page, size: size } })
}

//点赞
export function like(postId: number) {
  return instance.get('/word/like/create', { params: { postId: postId } })
}

//取消点赞
export function cancelLike(postId: number) {
  return instance.get('/word/like/cancel', { params: { postId: postId } })
}


//获取登录用户信息
export function info() {
  return instance.get('/word/user/info')
}

//获取我的登录打卡记录
export function getMyPost(page: number, size: number) {
  return instance.get('/word/post/getMine', { params: { page: page, size: size } })
}

第五步：调用 api 方法发送请求，获取数据

// 发送登录请求
let response: AxiosResponse = await login({phone: this.phone, code: this.code})

 // 发送打卡请求
let response: AxiosResponse = await createPost({rightCount: params.rightCount, answeredCount: params.answeredCount, timeUsed: params.timeUsed})


// 发送打卡记录请求, 将结果存储到容器列表中
let response: AxiosResponse<InterA> = await getMyPost(page, 10)
 response.data.data.records.forEach((item) => this.postInfoList.push(item))


// 获取所有打卡列表数据，并存储
let response: AxiosResponse<InterA> =  await getAllPost(this.page, 10)
response.data.data.records.forEach((item) => this.postList.push(item))