ArkTS - 网络请求

这篇具有很好参考价值的文章主要介绍了ArkTS - 网络请求。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、Axios请求 

应用通过HTTP发起一个数据请求,支持常见的GET、POST、OPTIONS、HEAD、PUT、DELETE、TRACE、CONNECT方法。

前端开发肯定都使用过一个叫axios第三方库,它是是一个基于 promise 的网络请求库,可以用于浏览器和 node.js,它是前端最流行的发送ajax请求的第三方库。

如果你不知道什么是promise,推荐看看我的上一篇博客  网络请求 - 异步编程详解-CSDN博客

1、ohpm包管理器

OHPM CLI 作为鸿蒙生态三方库的包管理工具,支持OpenHarmony共享包的发布、安装和依赖管理。

  1. 下载ohpm工具包,点击链接获取。
  2. 解压文件,进入“ohpm/bin”目录,打开命令行工具,执行如下指令初始化ohpm。

arkts怎么下载axios,ArkTS,鸿蒙,axios

arkts怎么下载axios,ArkTS,鸿蒙,axios

安装完成之后,执行如下命令:

ohpm -v

终端输出为版本号(如:0.6.10),则表示成功

arkts怎么下载axios,ArkTS,鸿蒙,axios

2、axios快速使用

进入项目目录,然后输入下面命令

1、下载axios

ohpm install @ohos/axios

arkts怎么下载axios,ArkTS,鸿蒙,axios

2、开放网络权限

使用该功能需要申请ohos.permission.INTERNET权限。

{
    "module" : {
        "requestPermissions":[
           {
             "name": "ohos.permission.INTERNET"
           }
        ]
    }
}

此时我们再次看向项目的目录,其中的oh-package.json5就是管理依赖的文件,类似于spring的pom.xml

在我们安装完axios依赖之后就可以在dependecies中看到我们安装的依赖

arkts怎么下载axios,ArkTS,鸿蒙,axios

示例

arkts怎么下载axios,ArkTS,鸿蒙,axios

其中有三个常用属性

名称 类型 描述
status number 响应状态码
headers Object 响应头
data any 服务器返回的响应体

现在我们随便搭建一个后端服务器,我这里是使用了springboot实现了一个简单的接口返回一个json数据

arkts怎么下载axios,ArkTS,鸿蒙,axios

创建一个TypeScript文件,写数据api(为什么不使用ArkTS是因为还要写entry、build等东西,对于数据api来说是没有意义的,所以直接创建一个typescript文件来写)

import axios from "@ohos/axios";

class MoreModel {
  baseURL: string = "http://localhost:8888/"

    getMore(): any {
    return axios.get(
      `${this.baseURL}boiler/status`,
      {
        params: {}
      }
    )
      .then(response => {
        if (response.status == 200) {
          console.log("请求成功,数据格式为", response.data)
          console.log("由于data是一个json对象格式,所以想看数据的信息要先给他转成一个字符串")
          console.log(JSON.stringify(response.data))

          return response.data;
        } else {
          console.log("请求失败")
        }
      })
      .catch(err => {
        console.log(err);
      })
  }
}

const moreModel = new MoreModel();

export default moreModel as MoreModel

在ArkTS中调用TS的函数

arkts怎么下载axios,ArkTS,鸿蒙,axios

查看控制台日志

arkts怎么下载axios,ArkTS,鸿蒙,axios

成功接收后端接口数据

注意事项

1、使用模拟器发送请求时baseURL不可以直接写localhost

以上的操作都是在预览页中直接发起的请求,但是使用模拟器去执行同样的程序却发现后端接受不到数据。这是因为模拟器的ip与后端服务器子网不一样。 "localhost" 通常映射到本地回环地址 127.0.0.1,而在模拟器环境中,这个地址可能被映射为模拟器的地址。

arkts怎么下载axios,ArkTS,鸿蒙,axiosarkts怎么下载axios,ArkTS,鸿蒙,axios

比如我的模拟器ip为10.0.2.15,而是springboot所在的ip为192.168.1.168

这时再习惯性的使用localhost去请求后端服务器(http://localhost:8888)就会解析为http://10.0.2.15:8888,但是很明显你的鸿蒙模拟器什么都没有,自然也就无法发起与springboot服务成功通信。

因此要写清楚ip(http://192.168.1.168:8888)这样就可以成功互通了。

2、post请求参数格式

发送http网络请求是,默认的参数格式是application/www-form-urlencoded,这个时候参数要使用param

arkts怎么下载axios,ArkTS,鸿蒙,axios

如果你想要发送json格式的参数,首先要在header中表明你要使用json格式,其次参数要使用data

arkts怎么下载axios,ArkTS,鸿蒙,axios


二、代码优化

1、axios拦截器

拦截器,顾名思义就是在你发起axios请求或是得到响应时先统一拦截一下,在这里做出一些逻辑处理,如判断状态码,获取token等等。文章来源地址https://www.toymoban.com/news/detail-820658.html

import axios, { AxiosError, AxiosResponse, InternalAxiosRequestConfig } from '@ohos/axios'

//请求地址的公共前缀
const baseURL: string = "http://192.168.1.168:8888";
//创建实例
const instance = axios.create({ baseURL })

//请求拦截器
instance.interceptors.request.use((config: InternalAxiosRequestConfig) => {

  console.log("testTag","我是请求拦截器,我把每一个请求都拦截了一下哦");
  console.log("testTag",config.url)

  return config;
  // config.headers.Authorization =
})


//响应拦截器
instance.interceptors.response.use((response: AxiosResponse) => {
  console.log("testTag","我是响应拦截器,我把每一个响应都拦截了一下哦");
  if (response.status == 200){

    console.log("testTag","请求成功,数据为", JSON.stringify(response.data));
    if (response.data.code == 0){
      console.log("testTag",`token为${response.data.data}`)
      return response.data;
    }

    console.log("testTag",`${response.data.message}`)
    return Promise.reject(response.data.message);

  }else {
    console.log("testTag","请求失败")
    Promise.reject("请求失败,结束异步")
  }

},(error: AxiosError) => {
  Promise.reject(error)
})

export default instance;

到了这里,关于ArkTS - 网络请求的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 第一个ArkTS项目实践-鸿蒙ArkTS

    本篇文章是官网上视频对ArkTS开发实践的第一个视频,主要是引导大家对ArkTS的一个了解。 开发文档官网 ArkTS通过struct声明组件名,并通过@Component和@Entry装饰器,来构成一个自定义组件。 使用@Entry和@Component装饰的自定义组件作为页面的入口,会在页面加载时首先进行渲染。

    2024年02月12日
    浏览(39)
  • 【HarmonyOS】【ArkTS】如何使用HTTP网络请求获取动态数据刷新UI界面

    【】 HttpRequest、ArkTS、网络数据请求、@ohos.net.http 【前言】 在使用ArkTS开发HarmonyOS应用时,需要调用HTTP网络请求 @ohos.net.http 动态获取数据,进行UI列表刷新,这想必是应用开发最常见的功能。但是根据官网网络请求的示例代码进行功能开发时,封装方法进行HTTP请求后

    2024年02月08日
    浏览(44)
  • 鸿蒙实战:ArkTs 开发一个鸿蒙应用

    学习过的 ArkTs 知识点,一步一步开发一个小的鸿蒙应用示例,涉及到  ArkTs 语法、注解 @Entry 、 @Component 、 @state 、路由、生命周期、 @Prop 、 @Link 、常用组件的使用等等知识点。 要开发一个鸿蒙应用,首先我们需要知道 系统是如何找到页面的启动入口 。 鸿蒙如何启动应用

    2024年02月22日
    浏览(51)
  • 鸿蒙tabbar ArkTS

    做了仿照现在应用的做了一个tabbar。 官方文档地址 参考文档 其中有个比较重要的点是,对image资源的引用问题。 资源相关说明 图片是resources目录下的base目录下的。 media目录下的图片的资源不能添加文件夹,只能是文件,而且文件的命名规则是只能包含字母大小写和下划线

    2024年02月08日
    浏览(37)
  • 鸿蒙开发已解决-arkts编译报错-arkts-limited-stdlib错误

    arkts编译报错-arkts-limited-stdlib错误。 我用Deveco studio4.0 beta2开发应用,报arkts-limited-stdlib错误 报错内容为:

    2024年02月02日
    浏览(35)
  • 鸿蒙ArkTS的起源和简介

    Mozilla创造了JS,Microsoft创建了TS,Huawei进一步推出了ArkTS。 从最初的基础的逻辑交互能力,到具备类型系统的高效工程开发能力,再到融合声明式UI、多维状态管理等丰富的应用开发能力,共同组成了相关的演进脉络。 ArkTS是HarmonyOS优选的主力应用开发语言。它在TypeScript(简

    2024年01月18日
    浏览(36)
  • 鸿蒙基础开发实战-(ArkTS)像素转换

    主要功能包括: 展示了不同像素单位的使用。 展示了像素单位转换相关API的使用。 在像素单位介绍页面,介绍了系统像素单位的概念,并在页面中为Text组件的宽度属性设置不同的像素单位,fp像素单位则设置为Text组件的字体大小。 为组件设置具体的宽高时,可以不加“v

    2024年01月23日
    浏览(45)
  • 鸿蒙HarmonyOS(ArkTS)语法数据类型

    上文 鸿蒙HarmonyOS(ArkTS)语法 声明变量及注意事项 我们简述了变量声明的几种形式 那么 今天我们就来说说数据类型 上文我们也说过 ArkTS 是ts的优化版 那么 我们数据类型大部分是跟着TS走的 number 数字类型 声明变量为一个数值 js中的 number 即可是正数也可以是小数 0 又或者 负

    2024年02月05日
    浏览(42)
  • 【鸿蒙系统学习笔记】ArkTS开发语言

    ArkTS 是 HarmonyOS 优选的主力应用开发语言。ArkTS围绕应用开发在TypeScript(简称TS)生态基础上做了进一步扩展,继承了TS的所有特性,是TS的超集。 ArkTS的基本组成,资料来自官网:文档中心 说明: ①装饰器:用来装饰类结构、方法、变量 @Component表示自定义组件,@Entry表示该

    2024年02月20日
    浏览(40)
  • arkts编译报错-arkts-limited-stdlib错误【Bug已完美解决-鸿蒙开发】

    arkts编译报错-arkts-limited-stdlib错误。 我用Deveco studio4.0 beta2开发应用,报arkts-limited-stdlib错误 报错内容为:

    2024年02月05日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包