【鸿蒙学习笔记】使用axios进行HTTP数据请求

官方文档:网络管理开发概述

目录标题

  • 访问淘宝公开接口(测试数据)
  • 第1步:module.json5 配置网络授权
  • 第2步:下载axios
  • 第3步:源码
  • 第4步:启动模拟器
  • 第5步:启动entry
  • 第6步:操作

访问淘宝公开接口(测试数据)

http://rap2api.taobao.org/app/mock/293606/api/chat/list

第1步:module.json5 配置网络授权

"requestPermissions": [{
  // 网络授权
  "name":'ohos.permission.INTERNET'
}]

第2步:下载axios

Alt+F12 → 执行 ohpm install @ohos/axios

在这里插入图片描述
在这里插入图片描述

第3步:源码

//1. 下载axios: Alt+F12 → 执行 ohpm install @ohos/axios
//2. 导入axios
import axios, { AxiosError, AxiosResponse } from '@ohos/axios'

class DataInfo {
  list: Array<DataItem> = new Array()
  // list: Array<DataItem> = []
}

class DataItem {
  originName: string = ''
  messageIconUrl: string = ''
  describe: string = ''
  remarkName: string = ''
  messageText: string = ''
}

// 淘宝公开接口,返回的数据读不懂(测试数据)
let url = 'http://rap2api.taobao.org/app/mock/293606/api/chat/list';

@Entry
@Component
struct Page_axios {
  @State mockDataList: Array<DataItem> = []
  url = 'http://rap2api.taobao.org/app/mock/293606/api/chat/list';

  build() {
    Row() {
      Column() {
        Button('get axiosData').margin(20)
          .onClick(() => {
            this.getAxiosData()
          })
        ForEach(this.mockDataList, (item: DataItem) => {
          Text(item.originName).fontColor(Color.Red)
        })

        Button('使用Axios获取网络数据').margin(20)
          .onClick(() => {
            this.axiosGetHttpData();
          })
        ForEach(this.mockDataList, (item: DataItem) => {
          Text(item.originName).fontColor(Color.Blue)
        })
      }.width('100%')
    }.height('100%')
  }

  getAxiosData() {
    //3. axios发起请求
    axios.get(this.url)
      .then((res: AxiosResponse) => {
        //4. axios获取结果
        // res.data
        AlertDialog.show({ message: JSON.stringify(res.data) })
        this.mockDataList = res.data.list
      })
  }

  axiosGetHttpData() {
    axios.get<DataInfo, AxiosResponse<DataInfo>, null>(url)
      .then((resp: AxiosResponse<DataInfo>) => { // 获取数据成功
        if (resp.status === 200) { // 获取正确网络数据
          AlertDialog.show({ message: JSON.stringify(resp.data.list) })
          this.mockDataList = resp.data.list
        } else {
          AlertDialog.show({ message: '获取失败' })
        }
      })
      .catch((err: AxiosError) => { // 网络异常或者接口异常回调
        AlertDialog.show({ message: '获取失败' })
      })
  }
}

第4步:启动模拟器

在这里插入图片描述

第5步:启动entry

在这里插入图片描述

在这里插入图片描述

第6步:操作

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/792054.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

ChIP项目文章CMI(IF=24.1)|IRF1激活可促进辐射诱导的细胞死亡和炎症反应

2024年6月7日&#xff0c;四川大学张舒羽教授团队在Cellular & Molecular Immunology&#xff08;IF24.1&#xff09;期刊上发表了题为“Chaperone-and PTM-mediated activation of IRF1 tames radiation-induced cell death and inflammation response”的文章&#xff0c…

专注于国产FPGA芯片研发的异格技术Pre-A+轮融资,博将控股再次投资

近日&#xff0c;苏州异格技术有限公司&#xff08;以下简称“异格技术”&#xff09;宣布成功完成数亿元的Pre-A轮融资&#xff0c;由博将控股在参与Pre-A轮投资后&#xff0c;持续投资。这标志着继2022年获得经纬中国、红点中国、红杉中国等机构数亿元天使轮融资后&#xff0…

FastAPI 学习之路(三十四)数据库多表操作

之前我们分享的是基于单个表的数据库表的操作&#xff0c;我们在设计数据库的时候也设计了跨表&#xff0c;我们可以看下数据库的设计 class User(Base):__tablename__ "users"id Column(Integer, primary_keyTrue, indexTrue)email Column(String(10), uniqueTr…

java线程锁synchronized的几种情况

一、对象方法锁 1、成员方法加锁 同一个对象成员方法有3个synchronized修饰的方法&#xff0c;通过睡眠模拟业务操作 public class CaseOne {public synchronized void m1(){try { TimeUnit.SECONDS.sleep(3); } catch (InterruptedException e) { e.printStackTrace()…

【机器学习】朴素贝叶斯算法详解与实战扩展

欢迎来到 破晓的历程的 博客 ⛺️不负时光&#xff0c;不负己✈️ 引言 朴素贝叶斯算法是一种基于概率统计的分类方法&#xff0c;它利用贝叶斯定理和特征条件独立假设来预测样本的类别。尽管其假设特征之间相互独立在现实中往往不成立&#xff0c;但朴素贝叶斯分类器因其计算…

vscode单独设置项目的字符集

vscode有个默认的字符集&#xff0c;直接修改这里的话将会修改整个vscode工具的字符集。如果不同的项目使用不同的字符集&#xff0c;就不能修改这个默认的设置了。而是需要针对每个项目进行修改。 修改方法&#xff1a; 使用shiftctrlp进入settings的菜单页面&#xff0c;点击…

Leetcode—236. 二叉树的最近公共祖先【中等】

2024每日刷题&#xff08;142&#xff09; Leetcode—236. 二叉树的最近公共祖先 实现代码 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode(int x) : val(x), left(NULL), right(NULL…

怎么把便签主面板置顶 便签主面板置顶方法

作为一名经常需要处理大量信息和任务的作家&#xff0c;我发现便签记事真的是我的救星。无论是临时灵感、会议要点还是待办事项&#xff0c;便签都能帮我快速记录&#xff0c;让我不再遗漏任何重要信息。而且&#xff0c;便签的应用场景也非常广泛&#xff0c;无论是在电脑前写…

王道计算机数据结构+插入排序、冒泡排序、希尔排序、快速排序、简单选择排序

本内容是基于王道计算机数据结构的插入排序、冒泡排序、希尔排序、快速排序、简单选择排序整理。 文章目录 插入排序算法性能代码 冒泡排序算法性能代码 希尔排序算法性能代码 快速排序算法性能代码 简单选择排序算法性能代码 插入排序 算法 算法思想&#xff1a;每次将一个…

LLM代理应用实战:构建Plotly数据可视化代理

如果你尝试过像ChatGPT这样的LLM&#xff0c;就会知道它们几乎可以为任何语言或包生成代码。但是仅仅依靠LLM是有局限的。对于数据可视化的问题我们需要提供一下的内容 描述数据:模型本身并不知道数据集的细节&#xff0c;比如列名和行细节。手动提供这些信息可能很麻烦&#…

zigbee笔记:七、zigbee系统电源管理与睡眠唤醒

zigbee的低功耗、近距离无线传输的特点使得其在一众近距离无线传输方案中备受青睐。而zigbee低功耗优势是通过根据不同工况选择运行在不同的运行模式&#xff08;供电模式&#xff09;实现的&#xff0c;因此&#xff0c;掌握zigbee的系统电源管理与睡眠唤醒的相关知识&#xf…

发挥储能系统领域优势,海博思创坚定不移推动能源消费革命

随着新发展理念的深入贯彻&#xff0c;我国正全面落实“双碳”目标任务&#xff0c;通过积极转变能源消费方式&#xff0c;大幅提升能源利用效率&#xff0c;实现了以年均约3.3%的能源消费增长支撑了年均超过6%的国民经济增长。这一成就的背后&#xff0c;是我国能源结构的持续…

c#调用c++ dll库报错System.BadImageFormatException

System.BadImageFormatException:“试图加载格式不正确的程序。 (异常来自 HRESULT:0x8007000B)” 1. dll需要选择release模式进行编译 2.选择相同位数&#xff0c;比如x64平台&#xff0c;c#也需要x64 3.不要设置c#不支持的函数供调用 比如&#xff1a; c可以输出到控制台…

昇思学习打卡-16-热门LLM及其他AI应用/K近邻算法实现红酒聚类

文章目录 算法原理距离定义模型构建 算法原理 K近邻算法可以用在分类问题和回归问题上&#xff0c;它的原理如下&#xff1a;要确定一个样本的类别&#xff0c;可以计算它与所有训练样本的距离&#xff0c;然后找出和该样本最接近的k个样本&#xff0c;统计出这些样本的类别并…

中职综合布线实训室

一、中职综合布线实训室建设背景 在数字化转型的大潮中&#xff0c;计算机网络技术作为支撑数字中国建设的基石&#xff0c;其重要性不言而喻。面对汹涌而来的数字时代&#xff0c;中等职业学校&#xff08;简称中职&#xff09;作为技术技能型人才培养的重要基地&#xff0c;…

如何使用Vger对已经过身份验证的Jupyter实例进行安全检测

关于Vger Vger是一款功能强大的交互式命令行应用程序&#xff0c;广大研究人员可以利用Vger与已经过身验证的Jupyter实例进行交互&#xff0c;并对其执行人工智能或机器学习方面的安全检测操作。 使用场景 1、作为红队研究人员&#xff0c;当我们寻找到了Jupyter凭证之后&…

单例模式的简单理解

单例模式 前言一、单例模式是什么二、单例模式的使用饿汉模式单线程下的懒汉模式多线程下的懒汉模式&#xff08;优化懒汉模式&#xff09;加锁 三、总结 前言 设计模式是将一些经典的问题场景进行整合归纳&#xff0c;并提供一些解决方案&#xff0c;相当于一种“套路”。 熟…

政企单位光纤资源高效管理与优化策略

引言 随着信息技术的飞速发展&#xff0c;政企单位对于通信基础设施的管理要求日益提高。然而&#xff0c;传统的管理模式&#xff0c;如Excel表格记录和纸质审批流程&#xff0c;已难以满足当前复杂多变的业务需求。在此背景下&#xff0c;我们实施了光纤管理的数字化转型项目…

LLMs的基本组成:向量、Tokens和嵌入

编者按&#xff1a;随着人工智能技术的不断发展&#xff0c;大模型&#xff08;语言、视觉&#xff0c;或多模态模型&#xff09;已成为当今AI应用的核心组成部分。这些模型具有处理和理解自然语言等模态输入的能力&#xff0c;推动了诸如聊天机器人、智能助手、自动文本生成等…

防火墙安全策略练习

实验拓扑 实验要求 1.DMZ区内的服务器&#xff0c;办公区仅能在办公时间内&#xff08;9&#xff1a;00 — 18&#xff1a;00&#xff09;可以访问&#xff0c;生产区的设备全天可以访问 2.生产区不允许访问互联网&#xff0c;办公区和游客区允许访问互联网 3.办公区设备10.…