平时做技术实践时，很多问题不是概念不会，而是细节没串起来。拿“鸿蒙中Axios数据请求的封装和配置做法”来说，它看着像小点，放到项目里常会牵出环境、配置、兼容性和维护成本。下面按实际采用顺序，把思路、关键写法和容易踩坑的地方讲清楚，便于大家直接对照操作。
适用来(HarmonyOS NEXT/5.0/API12+)
1.设置权限 应用级权限和系统级权限
2.设置网络请求的代码
"requestPermissions": [
{ "name": "ohos.permission.INTERNET" }
],
3.下载在Entry中 下载Axios
//终端中运行
ohpm install @ohos/axios
4.封装Http请求
实现思路：
//1.新建AXIOS的实例对象
//设置基地址，超时时间
//2.设置请求拦截器
//3.设置响应拦截器
//4.封装Htpp类
//5.新建并导出 http实例对象
//6.统一导出
import axios, { AxiosError, AxiosRequestConfig, AxiosResponse } from "@ohos/axios"
import { logger } from "./Logger"
const baseURL = 'https://api-harmony-teach.itheima.net'
//1.创建AXIOS的实例对象
//配置基地址，超时时间
//create 创建一个新的Axios对象 可以多个接口使用
export const instance =axios.create({
baseURL,
timeout:6000
})
//2.配置请求拦截器 (前端给后端的东西)
instance.interceptors.request.use((config:InternalAxiosRequestConfig)=>{
const user = auth.getUser()
if(user.token){
config.headers.Authorization = `Bearer ${ user.token}`
}
return config
},(err: AxiosError) => {
logger.error('Req Error', JSON.stringify(err))
return Promise.reject(err)
})
//3.配置响应拦截器 后端给前端的东西
// instance.interceptors.response.use(()=>{成功} ,()=>{失败})
//拦截器interceptors
//response通常指的是网络请求的响应。这是一个结构体，用于封装服务器返回的信息，
//AxiosResponse是Axios库中的一个接口，用于表示HTTP响应。以便开发者可以轻松地访问响应的各个部分。
instance.interceptors.response.use((res: AxiosResponse) => {
//成功
if (res.data.code === 10000) {
logger.debug('Req Success', JSON.stringify(res.data.data))
return res.data.data
}
//请求成功，回传是错误的
logger.error('Req Error', JSON.stringify(res.data))
return Promise.reject(res.data)
}, (err: AxiosError) => {
//失败返回的错误
logger.error('Req Error', JSON.stringify(err))
return Promise.reject(err)
})
//4.封装Htpp类
// 提供request方法
class Http {
// Get 请求可以省略第二个泛型，因为axios默认是any任何值可传
//ResponseData 响应数据类型 返回的数据(响应回来的数据)
//RequestData 请求数据类型 请求携带的参数
//Object 给个默认值 有的是入参
//AxiosResponse是Axios库中的一个接口，用于表示HTTP响应。以便开发者可以轻松地访问响应的各个部分。
// request<T,D>
//T是自己的，D是请求得到
request<ResponseData, RequestData = Object>(config: AxiosRequestConfig<RequestData>) {
return instance<null, ResponseData, RequestData>(config)
}
}
//5.创建并导出 http实例对象
export const http = new Http()5.页面中采用
import axios, { AxiosError, AxiosRequestConfig, AxiosResponse } from "@ohos/axios"
import { logger } from "./Logger"
const baseURL = 'https://api-harmony-teach.itheima.net'
//1.创建AXIOS的实例对象
//配置基地址，超时时间
//create 创建一个新的Axios对象 可以多个接口使用
export const instance =axios.create({
baseURL,
timeout:6000
})
//2.配置请求拦截器 (前端给后端的东西)
instance.interceptors.request.use((config:InternalAxiosRequestConfig)=>{
const user = auth.getUser()
if(user.token){
config.headers.Authorization = `Bearer ${ user.token}`
}
return config
},(err: AxiosError) => {
logger.error('Req Error', JSON.stringify(err))
return Promise.reject(err)
})
//3.配置响应拦截器 后端给前端的东西
// instance.interceptors.response.use(()=>{成功} ,()=>{失败})
//拦截器interceptors
//response通常指的是网络请求的响应。这是一个结构体，用于封装服务器返回的信息，
//AxiosResponse是Axios库中的一个接口，用于表示HTTP响应。以便开发者可以轻松地访问响应的各个部分。
instance.interceptors.response.use((res: AxiosResponse) => {
//成功
if (res.data.code === 10000) {
logger.debug('Req Success', JSON.stringify(res.data.data))
return res.data.data
}
//请求成功，回传是错误的
logger.error('Req Error', JSON.stringify(res.data))
return Promise.reject(res.data)
}, (err: AxiosError) => {
//失败返回的错误
logger.error('Req Error', JSON.stringify(err))
return Promise.reject(err)
})
//4.封装Htpp类
// 提供request方法
class Http {
// Get 请求可以省略第二个泛型，因为axios默认是any任何值可传
//ResponseData 响应数据类型 返回的数据(响应回来的数据)
//RequestData 请求数据类型 请求携带的参数
//Object 给个默认值 有的是入参
//AxiosResponse是Axios库中的一个接口，用于表示HTTP响应。以便开发者可以轻松地访问响应的各个部分。
// request<T,D>
//T是自己的，D是请求得到
request<ResponseData, RequestData = Object>(config: AxiosRequestConfig<RequestData>) {
return instance<null, ResponseData, RequestData>(config)
}
}
//5.创建并导出 http实例对象
export const http = new Http()到此这篇关于鸿蒙中Axios数据请求的封装和设置方法的文章就介绍到这了,更多相关鸿蒙 Axios数据请求内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多兼容脚本之家！
您可能感兴趣的文章:
- 鸿蒙JS实战之计算器功能开发实例
- 华为鸿蒙系统应用开发工具 DevEco Studio的安装和采用图文教程
- 鸿蒙HarmonyOS App开发造轮子之自定义圆形图片组件的实例代码
- 深入浅析华为鸿蒙IDE安装与Hello World
- axios取消请求、设置的操作方法
- Axios请求超时设置无效的问题及解决方案
- 采用Axios函数库进行网络请求的操作指南
- 前端处理axios请求下载后端得到的文件流代码实例