网站建设计入哪个明细科目/沈阳网站优化

网站建设计入哪个明细科目,沈阳网站优化,网站后台编辑器控件下载,设计包装公司使用axios开发网络请求是一个非常常见的任务,尤其是Web前端开发者,对它非常熟悉。axios是一个基于Promise的HTTP客户端,支持浏览器和Node.js环境,使用简单且功能强大。 在harmonyOS中,如果想使用axios,可以…

        使用axios开发网络请求是一个非常常见的任务,尤其是Web前端开发者,对它非常熟悉。axios是一个基于Promise的HTTP客户端,支持浏览器和Node.js环境,使用简单且功能强大。

        在harmonyOS中,如果想使用axios,可以通过ohpn工具包下载安装。

        接下来,将通过axios库,对其进行二次封装,并向后台发送请求,完成banner数据的获取。

一、基本使用

1.1 下载 ohpm工具包

        HarmonyOS开发工具DevEco Studio,最新版本DevEco Studio 5.0.1 Release安装时,ohpm工具已包含。如果是版本较低,需要手动进行安装,可以查看之前写的一篇关于这方面内容,地址:HarmonyOS开发 - ohpm环境变量配置-CSDN博客。

1.2 下载axios

        命令如下:

ohpm install @ohos/axios

        安装成功后,oh_modules目录则可以看到@ohos/axios。如下图:

1.3 导入模块

import axios from '@ohos/axios'

1.4 发送GET请求

        首先,我们先看下@ohos/axios的基本用法,使用axios模块发送一个GET请求,处理响应。示例代码如下:

// 导入模块
import axios from '@ohos/axios'// 发送 GET 请求
axios.get('https://api.example.com/data').then(response => {console.log('Response Data:', response.data);}).catch(error => {console.error('Error:', error.message);});

1.5 配置项

        axios允许通过配置对象来自定义请求,一些常见的配置选项如下:

{method: 'get', // 请求方法 (get, post, put, delete 等)url: 'https://api.example.com/data', // 请求 URLheaders: {'Authorization': 'Bearer your_access_token', // 自定义请求头'Content-Type': 'application/json'},params: {key: 'value' // URL 参数 (用于 GET 请求)},data: {key1: 'value1',key2: 'value2'}, // 请求体 (用于 POST/PUT 请求)timeout: 5000 // 请求超时时间 (毫秒)
}

1.6 处理响应

        参数说明如下:

名称

类型

描述

status

number

http响应状态码

statusTextstringhttp状态信息

headers

Object

响应头

data

any

服务端返回的响应体

configObject请求的配置信息

1.7 错误处理

        参数说明如下:

名称

类型

描述

message

string

错误信息

responseObject服务器的响应

request

Object

请求对象

configObject请求的配置信息

二、axios库

        axios是一个非常强大且易于使用的Http客户端,适用于大多数网络请求。通过掌握axios,可以轻松使用它开发网络请求,并处理各种复杂的需求。

2.1 @ohos/axios实例

        如果需要为不同的API设置不的配置,可以创建一个axios实例,代码如下:

import axios from '@ohos/axios'const axiosInstance = axios.create({baseURL: "http://test.shop.com",headers: {'Content-Type': 'application/json'}
})

2.2 拦截器

        axios提供了请求和响应拦截器,可以在请求发送前或响应到达后对其进行处理。

2.2.1 请求拦截器

        在项目中,一些API请求需要访问令牌(即证明登录的一串字符串),为了方便,可以在拦截器中统一添加。示例代码如下:

// 请求拦截器
axiosInstance.interceptors.request.use(config => {// 在请求发送前做一些处理config.headers['accessToken'] = 'kl1ad1234214dfasdfas'  // 添加访问令牌return config;
}, error => {return Promise.reject(error);
});

2.2.2 响应拦截器

        在电商项目中,例如下单功能,必须为登录状态;此时,如果用户在未登录状态下点击购买,须跳转到登录界面或给用户相关提示信息;

        除了下单功能,我的界面,订单列表、详单详情、我的收藏等,都是需要用户在登录状态下进行操作;所以,此时我们可以在响应拦截器中,做统一处理,当接收到登录失效或未登录的状态码时,作出相应操作。拦截器代码如下:

// 响应拦截器
axiosInstance.interceptors.response.use(response => {// 在响应到达后做一些处理if (response.status == 400) {// 如果400表示登录失效,访问页面必须为登录状态,此时程序须做跳转到登录界面,或提示操作}return response;
}, error => {return Promise.reject(error);
});

2.3 any 和 unknown问题

         在ArkTS中,使用 @ohos/axios 发起网络请求时,如果遇到 arkts-no-any-unknown 错误(Use explicit types instead of "any", "unknown" (arkts-no-any-unknown) <ArkTSCheck>。),说明代码中使用了 any 或 unknown 类型,而 ArkTS 要求使用显式类型以提高代码的类型安全性。

        这个问题,在上篇@ohos.net.http请求封装中也存在,并将其解决。如需了解的朋友,可以前去查看,地址:HarmonyOS开发 - 电商App实例二( 网络请求http)-CSDN博客。

2.4 定义接口        

        所以在封装axios请求前,为避免使用 any 和 unknown,并确保类型安全。将请求和响应的数据定义为明确的接口。示例代码如下:

import { Method } from '@ohos/axios'// http定义请求参数接口
interface axiosRequestOptions {url: string;method?: Method,headers?: Record<string, string>;data?: Record<string, any>;params?: Record<string, any>;timeout?: number
}// http定义响应数据接口
interface axiosHttpResponse<T> {responseCode: number;result: T;
}

2.5 @ohos/axios封装

        为了简化代码并提高复用性,可以将@ohos/axios封装成一个工具类。先在ets目录下创建utils目录,再创建axiosUtil类(路径:ets/utils/axiosUtil.ts)。使用显式类型替代 any 和 unknown,代码如下:

import axios, { AxiosInstance, Method } from '@ohos/axios'
import { axiosRequestOptions } from '../types/http';export class axiosUtil {private base_url: string = '';  // 基础路径private headers: Record<string, string> | null = null; // header信息private axiosRequest: AxiosInstance; // request请求constructor(base_url?: string, headers?: Record<string, string>) {this.base_url = base_urlthis.headers = headers// axios实例this.axiosRequest = axios.create({baseURL: this.base_url,headers: this.headers})}/*** 发送 http 请求* @param options 请求配置* @returns 返回响应数据*/public async request<T> (options: axiosRequestOptions): Promise<T> {const { url, method = 'GET', headers = {}, params, data } = options;try {const response = await this.axiosRequest({url,method,headers,params,data});if (response.status === 200) {return response.data as T; // 显式类型断言} else {throw new Error(`HTTP Error: ${response.status}`);}} catch (error) {throw new Error(`Request Failed: ${error.message}`);}}/*** 发送 GET 请求* @param url 请求地址* @param params URL 参数* @param headers 请求头* @returns 返回响应数据*/public async get<T>(url: string, params?: Record<string, any>, headers: Record<string, string> = {}): Promise<T> {return this.request<T>({ url, method: 'GET', headers, params });}/*** 发送 POST 请求* @param url 请求地址* @param data 请求体* @param headers 请求头* @returns 返回响应数据*/public async post<T>(url: string, data: Record<string, any>, headers: Record<string, string> = {}): Promise<T> {return this.request<T>({ url, method: 'POST', headers, data });}
}

2.6 实例axiosUtil类

        在utils目录中,再创建request请求文件(路径:ets/utils/request.ts),用于初始化http请求的基础路径和header请求类型信息。示例代码如下

import { axiosUtil } from './axiosUtil'
/*** 初始化请求 实例类*/
export const axiosRequest = new axiosUtil('http://test.shop.com', {'Content-Type': 'application/json'
})

2.7 api请求

        在api目录创建,创建index.ts文件,用于定义具体业务请求函数。这里向后台发送一个GET请求,用于获取banner信息。示例代码如下:

import { axiosRequest } from '../utils/request'
interface apiBanner {id: number;name: string;thumb: string;uid: number;createTime: Date;updateTime: Date;
}/*** 获取banner信息*/
export const getBannerInfo = async () => {return await axiosRequest.get<apiBanner>('/banner.php')
}

2.8 获取Banner信息

          如下图,在页面中添加按钮,点击“获取banner信息”,向后台发送GET请求,获取banner数据。

        打开pages/index.ets 页面文件,添加http请求。代码如下:

import { getBannerInfo } from '../api/index'@Entry
@Component
struct Index {@State bannerMessage: string = '';build() {RelativeContainer() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }){Text(this.bannerMessage)Button('获取banner信息').onClick(async () => {console.log('tag')await getBannerInfo().then(res => {this.bannerMessage = JSON.stringify(res)console.log('tas success', res)}).catch(() => {console.error('Error')})})}.width('100%')}.height('100%').width('100%')}
}

       

         此时,在页面中点击按钮,获取banner信息。如下图:

三、http和axios比较

        HarmonyOS中,@ohos.net.http和@ohos/axios都是用于进行网络请求的工具,它们各自具有不同的特点和适用场景。

3.1 基础概述

3.1.1 @ohos.net.http

  • HarmonyOS中用于进行HTTP网络请求的原生接口或组件。
  • 支持GET、POST、PUT、DELETE等常见的HTTP请求方法。
  • 通常用于简单的数据传输和RESTful API的交互。
     

3.1.2 @ohos/axios

  • Axios在HarmonyOS平台的适配版本。
  • 基于Promise的HTTP客户端,适用于浏览器和Node.js环境,同时也兼容HarmonyOS。
  • 保留了Axios的主要特性,并适配了HarmonyOS的网络API。

3.2 泛型支持

3.2.1 @ohos.net.http

  • 不直接支持泛型类型。
  • 返回的响应数据默认为string或ArrayBuffer,需要开发者手动解析和类型断言。

3.2.2 @ohos/axios

  • 通过泛型参数直接定义响应数据类型,实现编译时类型安全。
  • 提供了更好的开发体验和代码可读性。

3.3 参数传递与序列化

3.3.1 @ohos.net.http

  • 请求配置通过options对象传递,类型为HttpRequestOptions,无泛型支持。
  • 请求体使用extraData字段,类型为string或ArrayBuffer,需要手动序列化。

3.3.2 @ohos/axios

  • 请求体可以直接传递对象,Axios会根据Content-Type自动序列化为JSON。
  • 泛型配置支持通过泛型定义请求参数和响应数据类型。

       在HarmonyOS中选择使用@ohos.net.http还是@ohos/axios主要取决于具体的应用场景、开发者的偏好以及对库或API的熟悉程度。

        如果你有更多问题,欢迎随时沟通交流!

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Unity进阶课程【二】Mask 组件的使用 UI遮罩效果以及透明抠图效果

Unity组件讲解 Mask 时隔多年&#xff0c;今天咱们继续进阶课程&#xff0c;这几年变化很大&#xff0c;但是一直还是从事Unity行业&#xff0c;行业虽难&#xff0c;依旧坚持&#xff0c;以后会养成习惯&#xff0c;定期更新&#xff0c;希望小伙伴们监督&#xff0c;有想学习…

汽车无钥匙启动系统不使用传统机械钥匙启动汽车

汽车无钥匙启动系统 定义 汽车无钥匙启动系统&#xff08;Keyless Start System&#xff09;&#xff0c;启动车辆时不用掏拧钥匙&#xff0c;只需把钥匙放在包内或口袋里&#xff0c;按下车内按键或拧动导板即可使发动机点火。它无需插入钥匙&#xff0c;通过点按按键或旋转…

【Python】Python 3.11安装教程

一、Python 3.11安装包下载 1. Python 3.11下载与安装 Download Python | Python.org 下载完成包含以下文件&#xff1a; 二、python3.11安装步骤 1.右键以管理员身份运行安装程序。 2.勾选【Add Python…】然后点击【Customize…】。 3.页面点击【Next】。 4.勾选【Install …

如何处理PHP中的编码问题

如何处理PHP中的编码问题 在PHP开发过程中&#xff0c;编码问题是一个常见且棘手的问题。无论是处理用户输入、数据库交互&#xff0c;还是与外部API通信&#xff0c;编码问题都可能导致数据乱码、解析错误甚至安全漏洞。本文将深入探讨PHP中的编码问题&#xff0c;并提供一些…

【毕业论文格式】word分页符后的标题段前间距消失

文章目录 【问题描述】 分页符之后的段落开头&#xff0c;明明设置了标题有段前段后间距&#xff0c;但是没有显示间距&#xff1a; 【解决办法】 选中标题&#xff0c;选择边框 3. 选择段前间距&#xff0c;1~31磅的一个数 结果

论文调研 | 一些开源的AI代码生成模型调研及总结【更新于250313】

本文主要介绍主流代码生成模型&#xff0c;总结了基于代码生成的大语言模型&#xff0c;按照时间顺序排列。 在了解代码大语言模型之前&#xff0c;需要了解代码相关子任务 代码生成 文本生成代码(Text to code):根据自然语言描述生成代码 重构代码&#xff08;Refactoring …

3DS模拟器使用(pc+安卓)+金手指+存档互传

1、引言 3ds模拟器已经能够在手机端近乎完美模拟了&#xff0c;那么多的3ds游戏&#xff0c;比玩手机游戏舒服多了。 本人是精灵宝可梦的老玩家&#xff0c;从第一世代就一直在玩&#xff0c;刚耍完NDS的第五世代&#xff0c;黑白系列。现在到宝可梦XY了&#xff0c;需要在3d…

Java EE Web环境安装

Java EE Web环境安装 一、JDK安装与测试&#xff08;Windows环境&#xff09; 1. 安装JDK 官网下载&#xff1a;Oracle JDK&#xff08;选择Windows x64 Installer&#xff09;双击安装包&#xff0c;按向导完成安装 ​ 2. 环境变量配置 右键【此电脑】→【属性】→【高级…

探索CSS魔法:3D翻转与渐变光效的结合

随着前端技术的不断发展&#xff0c;CSS不再仅仅局限于样式设计&#xff0c;它也成为了实现富有互动性的动画和特效的强大工具。本篇文章将向大家展示如何利用CSS的3D变换和渐变光效&#xff0c;打造一张“神秘卡片”&#xff0c;通过简单的代码实现炫酷的视觉效果。 1. 初识神…

C++ STL 深度解析:vector 的全面指南与进阶技巧

一、底层架构深度剖析 1.1 内存管理机制 vector 通过三个指针实现动态内存管理&#xff1a; _start&#xff1a;指向分配内存的首元素&#xff08;begin()返回值&#xff09;_finish&#xff1a;指向最后一个元素的下一个位置&#xff08;end()返回值&#xff09;_end_of_st…

S7-1200 G2移植旧版本S7-1200程序的具体方法示例

S7-1200 G2移植旧版本S7-1200程序的具体方法示例 前期概要: S7-1200 G2必须基于TIA博途V20,之前的程序可通过移植的方式在新硬件上使用。 该移植工具可自动将TIA Portal 项目从 S7-1200 移植到更新的S7-1200 G2。 注意: 该插件支持在同一TIA Portal项目实例内将软件和/或硬…

CNN SSP, ASPP, PPM 分割任务经典尺度聚合模块

SSP&#xff1a;Spatial Pyramid Pooling 让任意大小图像最终输出的特征维度始终固定&#xff0c;便于接全链接层。 4x4, 2x2,1x1区域的maxpooling&#xff0c;让任意大小图像最终输出最终特征维度始终为 &#xff08;1641)*256 ASSP:Atrous Spatial Pyramid Pooling 不进行…

OpenHarmony-XTS测试

OpenHarmony-XTS测试 OpenHarmony-XTS测试环境搭建测试准备开始运行PS OpenHarmony-XTS测试 针对OpenHarmony版本进行XTS测试使用记录。 windows环境。 以acts套件为例。 环境搭建 获取测试套件&#xff0c;两种方法 1&#xff09;官网下载&#xff1a;https://www.openharm…

文件系统 linux ─── 第19课

前面博客讲解的是内存级文件管理,接下来介绍磁盘级文件管理 文件系统分为两部分 内存级文件系统 : OS加载进程 ,进程打开文件, OS为文件创建struct file 和文件描述符表 ,将进程与打开的文件相连, struct file 内还函数有指针表, 屏蔽了底层操作的差异,struct file中还有内核级…

【软考-架构】5.2、传输介质-通信方式-IP地址-子网划分

✨资料&文章更新✨ GitHub地址&#xff1a;https://github.com/tyronczt/system_architect 文章目录 传输介质网线光纤无线信道 通信方式和交换方式会考&#xff1a;交换方式 &#x1f4af;考试真题第一题第二题 IP地址表示子网划分&#x1f4af;考试真题第一题第二题 传输…

G2o顶点与边编程总结

G2o的顶点与边属于 HyperGraph 抽象类的继承OptimizableGraph 的继承。 BaseVertex<D,T> D是预测点的维度&#xff08;在流形空间的最小表示&#xff09;T是待估计vertex的数据类型&#xff0c;比如用四元数表达三维旋转的话&#xff0c;T就是Quaternion 类型 // 顶点的…

凸优化算法学习笔记:决策单调性与 wqs二分

文章目录 前言决策单调性单调矩阵&#xff0c;完全单调矩阵&#xff0c;蒙日阵决策单调性优化 d p dp dp线性 d p dp dp分治&#xff08;离线&#xff09;二分队列&#xff08;在线&#xff09;SMAWK 区间 d p dp dp 练习题LOJ6039 w q s wqs wqs 二分&#xff08;蒙日阵最短…

Aop实现简单基于日志记录

目录 一、基础知识&#xff1a; 二、测试记录接口的参数和结果 一、基础知识&#xff1a; Before&#xff1a;用于执行目标方法之前的逻辑。After&#xff1a;用于执行目标方法之后的逻辑。AfterReturning&#xff1a;用于获取目标方法返回值后的逻辑。AfterThrowing&#x…

【Nacos】服务发布之优雅预热上线方案

目录 一、背景二、注册时机2.1、注册机制2.2、分析源码找到注册时机 三、注册前心跳健康检测3.1、方案实施3.2、源码分析3.3、优化代码 四、流量权重配置五、总结5.1、整体完整流程&#xff1a;5.2、流程图&#xff1a;5.1、优化方案完整代码&#xff1a; 一、背景 有些面向广…

AI驱动的数字供应链安全情报预警服务:云脉XSBOM

先发制人&#xff0c;精准预警数字供应链中的安全风险 Pre-emptive Strategy, Accurate Warning of Security Risks in Digital Supply Chain 云脉XSBOM数字供应链安全情报预警依托悬镜安全团队强大的供应链管理监测能力和AI安全大数据云端分析能力&#xff0c;对全球数字供应…