先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，现在阿里P7
深知大多数程序员，想要提升技能，往往是本身摸索成长，但本身不成体系的自学效果低效又漫长，而且极易遇到天花板技能停滞不前！
因此收集整理了一份《2024年最新HarmonyOS鸿蒙全套学习资料》，初衷也很简单，就是希望可以或许资助到想自学提升又不知道该从何学起的朋友。
既有适合小白学习的零底子资料，也有适合3年以上履历的小伙伴深入学习提升的进阶课程，涵盖了95%以上鸿蒙开发知识点，真正体系化！
由于文件比力多，这里只是将部分目次截图出来，全套包含大厂面经、学习条记、源码讲义、实战项目、大纲门路、讲解视频，而且后续会持续更新
假如你必要这些资料，可以添加V获取：vip204888 （备注鸿蒙）
正文
}
axios模块封装及使用
axios模块封装：
//AxiosHttp.ets
import axios, {
AxiosInstance,
AxiosRequestConfig,
AxiosRequestHeaders,
AxiosResponse,
InternalAxiosRequestConfig
} from “@ohos/axios”;
import { LogUtils } from ‘…/utils/LogUtils’;
/**
- 定义接口相应包装类
*/
export interface BaseResponse {
//wanAndroid-API相应体
errorCode: number
errorMsg: string
//拓展xxx-API相应体
}
/**
- 接口实现类包装，比方有其他业务可以再次继续实现xxxResponse
*/
export interface ApiResponse<T = any> extends BaseResponse {
//wanAndroid-API相应体
data: T | any;
//拓展xxx-API相应体
}
/**
- 封装后，不支持传入拦截器
- 必要本身定义接口继续 AxiosRequestConfig类型
- 从而支持传入拦截器，但拦截器选项应为可选属性
- 之后请求实例传入的options为继续了AxiosRequestConfig的自定义类型
*/
interface InterceptorHooks {
requestInterceptor?: (config: HttpRequestConfig) => Promise;
requestInterceptorCatch?: (error: any) => any;
responseInterceptor?: (response: AxiosResponse) => AxiosResponse | Promise;
responseInterceptorCatch?: (error: any) => any;
}
// @ts-ignore
interface HttpRequestConfig extends InternalAxiosRequestConfig {
showLoading?: boolean; //是否展示请求loading
checkResultCode?: boolean; //是否检验相应结果码
checkLoginState?: boolean //校验用户登陆状态
needJumpToLogin?: boolean //是否必要跳转到登陆页面
interceptorHooks?: InterceptorHooks;
headers?: AxiosRequestHeaders
}
/**
- 网络请求构造
- 基于axios框架实现
*/
class AxiosHttpRequest {
config: HttpRequestConfig;
interceptorHooks?: InterceptorHooks;
instance: AxiosInstance;
constructor(options: HttpRequestConfig) {
this.config = options;
this.interceptorHooks = options.interceptorHooks;
this.instance = axios.create(options);
this.setupInterceptor()
}
setupInterceptor(): void {
this.instance.interceptors.request.use(
//这里重要是高版本的axios中设置拦截器的时候里面的Config属性必须是InternalAxiosRequestConfig，但是InternalAxiosRequestConfig里面的headers是必传，以是在实现的子类我设置成非必传会报错，加了个忽略注解
// @ts-ignore
this.interceptorHooks?.requestInterceptor,
this.interceptorHooks?.requestInterceptorCatch,
);
this.instance.interceptors.response.use(
this.interceptorHooks?.responseInterceptor,
this.interceptorHooks?.responseInterceptorCatch,
);
}
// 类型参数的作用，T决定AxiosResponse实例中data的类型
request<T = any>(config: HttpRequestConfig): Promise {
return new Promise((resolve, reject) => {
this.instance
.request<any, T>(config)
.then(res => {
resolve(res);
})
.catch((err) => {
LogUtils.error(“网络请求Request非常：”, err.message)
errorHandler(err)
if (err) {
reject(err);
}
});
});
}
get<T = any>(config: HttpRequestConfig): Promise {
return this.request({ …config, method: ‘GET’ });
}
post<T = any>(config: HttpRequestConfig): Promise {
return this.request({ …config, method: ‘POST’ });
}
delete<T = any>(config: HttpRequestConfig): Promise {
return this.request({ …config, method: ‘DELETE’ });
}
patch<T = any>(config: HttpRequestConfig): Promise {
return this.request({ …config, method: ‘PATCH’ });
}
}
export function errorHandler(error: any) {
if (error instanceof AxiosError) {
showToast(error.message)
} else if (error != undefined && error.response != undefined && error.response.status) {
switch (error.response.status) {
// 401: 未登录
// 未登录则跳转登录页面，并携带当前页面的路径
// 在登录乐成后返回当前页面，这一步必要在登录页操作。
case 401:
break;
// 403 token过期
// 登录过期对用户进行提示
// 清除当地token和清空vuex中token对象
// 跳转登录页面
case 403:
showToast(“登录过期，请重新登录”)
// 清除token
// localStorage.removeItem(‘token’);
break;
// 404请求不存在
case 404:
showToast(“网络请求不存在”)
break;
// 其他错误，直接抛出错误提示
default:
showToast(error.response.data.message)
}
}
}
export default AxiosHttpRequest
客户端封装
//AxiosRequest.ets
import {AxiosHttpRequest,errorHandler} from ‘./AxiosHttp’
import { AxiosError, AxiosRequestHeaders } from ‘@ohos/axios’;
import { LogUtils } from ‘…/utils/LogUtils’;
import showToast from ‘…/utils/ToastUtils’;
import { hideLoadingDialog, showLoadingDialog } from ‘…/utils/DialogUtils’;
import { StorageUtils } from ‘…/utils/StorageUtils’;
import { StorageKeys } from ‘…/constants/StorageKeys’;
import { JsonUtils } from ‘…/utils/JsonUtils’;
import { Router } from ‘…/route/Router’;
import { RoutePath } from ‘…/route/RoutePath’;
/**
- axios请求客户端创建
*/
const axiosClient = new AxiosHttpRequest({
baseURL: “/api”,
timeout: 10 * 1000,
checkResultCode: false,
headers: {
‘Content-Type’: ‘application/json’
} as AxiosRequestHeaders,
interceptorHooks: {
requestInterceptor: async (config) => {
// 在发送请求之前做一些处置惩罚，比方打印请求信息
LogUtils.debug(‘网络请求Request 请求方法:’, ${config.method});
LogUtils.debug(‘网络请求Request 请求链接:’, ${config.url});
LogUtils.debug(‘网络请求Request Params:’, \n${JsonUtils.stringify(config.params)});
LogUtils.debug(‘网络请求Request Data:’, ${JsonUtils.stringify(config.data)});
axiosClient.config.showLoading = config.showLoading
if (config.showLoading) {
showLoadingDialog(“加载中…”)
}
if (config.checkLoginState) {
let hasLogin = await StorageUtils.get(StorageKeys.USER_LOGIN, false)
LogUtils.debug(‘网络请求Request 登录状态校验>>>’, ${hasLogin.toString()});
if (hasLogin) {
return config
} else {
if (config.needJumpToLogin) {
Router.push(RoutePath.TestPage)
}
throw new AxiosError(“请登录”)
}
}
return config;
},
requestInterceptorCatch: (err) => {
LogUtils.error(“网络请求RequestError”, err.toString())
if (axiosClient.config.showLoading) {
hideLoadingDialog()
}
return err;
},
responseInterceptor: (response) => {
//优先实验本身的请求相应拦截器，在实验通用请求request的
if (axiosClient.config.showLoading) {
hideLoadingDialog()
}
LogUtils.debug(‘网络请求相应Response:’, \n${JsonUtils.stringify(response.data)});
if (response.status === 200) {
// @ts-ignore
const checkResultCode = response.config.checkResultCode
if (checkResultCode && response.data.errorCode != 0) {
showToast(response.data.errorMsg)
return Promise.reject(response)
}
return Promise.resolve(response.data);
} else {
return Promise.reject(response);
}
},
responseInterceptorCatch: (error) => {
if (axiosClient.config.showLoading) {
hideLoadingDialog()
}
LogUtils.error(“网络请求相应非常”, error.toString())
errorHandler(error);
return Promise.reject(error);
},
}
});
export default axiosClient;
封装后使用
经过封装后，使用变得很简单了。示比方下：
import axiosClient from ‘./AxiosRequest’
let baseUrl = “https://www.wanandroid.com/”
//返回数据结构定义
interface HomeModelIssueList {
releaseTime: number;
type: string;
date: number;
publishTime: number;
count: number;
}
interface HomeModel {
issueList: HomeModelIssueList[];
itemList: HomeModelIssueList[];
nextPageUrl: string;
nextPublishTime: number;
newestIssueType: string;
}
interface BannerDataModelData {
desc: string;
id: number;
imagePath: string;
isVisible: number;
order: number;
title: string;
type: number;
url: string;
}
/**
- 请求首页数据-axios客户端请求
- @param date
- @returns
*/
export function getHomeListAxios(date: string = “”) {
return axiosClient.get({
url: baseUrl + “api/v2/feed”,
params: { “date”: date },
showLoading: true
// headers: { “Accept”: “application/json” } as AxiosRequestHeaders
})
}
/**
- 获取分类详情接口
- @param id
- @param start
*/
export function getCategoryDetailList(id: number, start: number) {
return axiosClient.get(
{
url: baseUrl + “api/v4/categories/videoList”,
params: {
“id”: id,
“start”: start,
“udid”: CommonConstants.UUID,
deviceModel: CommonConstants.DEVICE_NUM
}
}
)
}
/**
- 获取wanAndroid首页Banner数据，测试校验API data：T泛型数据
- @returns
*/
export function getWanAndroidBanner() {
return axiosClient.get<ApiResponse<BannerDataModelData[]>>(
{
url: wanAndroidUrl + “/banner/json”,
checkResultCode: true,
showLoading: true
}
)
}
官方@ohos/net.http 介绍
在HarmonyOS（OpenHarmony）中，@ohos/net.http 是官方提供的一个用于进行HTTP通讯的底子模块。开发者可以使用这个模块发送和接收HTTP请求与相应，实现应用程序与服务器之间的数据交互。
文档中心–HTTP数据请求
官方简易封装
@ohos/net.http模块直接使用起来不太友爱，简易封装如下：
//http.ets
/**
- 定义接口相应包装类
*/
import http from ‘@ohos.net.http’;
export interface BaseResponse {
//wanAndroid-API相应体
errorCode: number
errorMsg: string
//拓展xxx-API相应体
}
/**
- 接口实现类包装，比方有其他业务可以再次继续实现xxxResponse
*/
export interface ApiResponse<T = any> extends BaseResponse {
//wanAndroid-API相应体
data: T | any;
//拓展xxx-API相应体
}
interface HttpRequestConfig extends http.HttpRequestOptions {
showLoading?: boolean; //是否展示请求loading
checkResultCode?: boolean; //是否检验相应结果码
checkLoginState?: boolean //校验用户登陆状态
needJumpToLogin?: boolean //是否必要跳转到登陆页面
url?: string, //请求网络链接
}
/**
- 网络请求构造器
- 基于鸿蒙默认的http框架实现
*/
class HttpBuilder {
httpClient: http.HttpRequest
config: HttpRequestConfig
constructor(options: HttpRequestConfig) {
this.httpClient = http.createHttp()
this.config = options
this.setupInterceptor()
}
/**
- 设置属性拦截器
*/
setupInterceptor() {
}
request<T = any>(config: HttpRequestConfig): Promise {
return new Promise((resolve, reject) => {
this.httpClient.request(
config.url,
config,
(error, data) => {
if (!error) {
resolve(data.result as T);
} else {
reject(error)
}
// 当该请求使用完毕时，调用destroy方法主动销毁x
this.httpClient.destroy()
}
)
})
}
get<T = any>(config: HttpRequestConfig): Promise {
return this.request({ …config, method: http.RequestMethod.GET })
}
post<T = any>(config: HttpRequestConfig): Promise {
return this.request({ …config, method: http.RequestMethod.POST })
}
}
export default HttpBuilder
官方http模块封装使用
import http from ‘@ohos.net.http’;
import showToast from ‘…/utils/ToastUtils’;
import HttpBuilder from ‘./http’;
//接口发送超时
const READ_TIMEOUT = 100000
//接口读取超时
const CONNECT_TIMEOUT = 100000
let baseUrl = “https://www.wanandroid.com/”
const httpClient = new HttpBuilder({
readTimeout: READ_TIMEOUT,
connectTimeout: CONNECT_TIMEOUT
})
//返回数据结构定义
interface HomeModelIssueList {
网上学习资料一大堆，但假如学到的知识不成体系，遇到题目时只是浅尝辄止，不再深入研究，那么很难做到真正的技能提升。
必要这份系统化的资料的朋友，可以添加V获取：vip204888 （备注鸿蒙）
一个人可以走的很快，但一群人才气走的更远！不论你是正从事IT行业的老鸟或是对IT行业感爱好的新人，都欢迎参加我们的的圈子（技能交换、学习资源、职场吐槽、大厂内推、口试辅导），让我们一起学习成长！
接口读取超时
const CONNECT_TIMEOUT = 100000
let baseUrl = “https://www.wanandroid.com/”
const httpClient = new HttpBuilder({
readTimeout: READ_TIMEOUT,
connectTimeout: CONNECT_TIMEOUT
})
//返回数据结构定义
interface HomeModelIssueList {
网上学习资料一大堆，但假如学到的知识不成体系，遇到题目时只是浅尝辄止，不再深入研究，那么很难做到真正的技能提升。
必要这份系统化的资料的朋友，可以添加V获取：vip204888 （备注鸿蒙）
[外链图片转存中…(img-Q3wwqgw2-1713136540384)]
一个人可以走的很快，但一群人才气走的更远！不论你是正从事IT行业的老鸟或是对IT行业感爱好的新人，都欢迎参加我们的的圈子（技能交换、学习资源、职场吐槽、大厂内推、口试辅导），让我们一起学习成长！
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
