HarmonyOS鸿蒙Next中新手请问下axios网络请求报错问题
HarmonyOS鸿蒙Next中新手请问下axios网络请求报错问题
本人一直在公司都是写vue 的,现在上头让我去接触学习下鸿蒙next,所以这几天在尝试着写点东西,但是在封装网络请求上一直出问题,有点不明白哪里有问题,这边看到鸿蒙也能用axios,所以就用的这个,因为vue用的一直是这个,所以我这边大致也借鉴了vue那边的写法,下面就是我的请求封装和接口请求方式
//创建axios实例
const instance: AxiosInstance = axios.create({
baseURL: 'http://moapi.shbnrj.com', //请求地址
timeout: 50000, //超时时间
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Content-Language': 'zh_CN'
},
});
//请求拦截器
instance.interceptors.request.use(async (config: InternalAxiosRequestConfig) => {
config.data = config.data ? config.data : {}
let params: any = config.data
let newData: any = {} //创建空对象
newData.nonce = Math.random().toString(36).slice(-8); //随机字符串
newData.ts = Math.floor(new Date().getTime() / 1000) // 时间戳
//设置共通参数
params.deviceNo = params.operCode ? 'H5_' + params.operCode : null
params.loginDevice = 'H5'
params.appid = params.appid ? params.appid : ''
let token: string | null = null
if (PreferenceUtil.getStorage('storeInfo_v10')){
let storeInfo: LoginStoreInfo = JSON.parse(PreferenceUtil.getStorage('storeInfo_v10'))
params.appid = params.appid ? params.appid : storeInfo.appid
params.operCode = storeInfo.userInfo ? storeInfo.userInfo.staffNo : null
token = storeInfo.token
}
newData['data'] = JSON.stringify(params); //将请求数据转为字符串
const deviceSecret = "32f0a998af2e9f17c88e8a23c9c8a238"
//设置请求头
config.headers!.Authorization = token
config.headers!.Appid = params.appid
config.headers!.Mode = 2
//数据加密
let s = params.appid + newData.ts.toString() + newData.nonce + newData.data + token + deviceSecret;
newData.sign = CryptoJS.MD5(s).toString()
//判断请求方式
if(config.method == 'get'){
config.params = newData
}else{
config.data = newData
}
return config
}, (error: AxiosError) => {
return Promise.reject(error)
})
//响应拦截器
instance.interceptors.response.use((response: AxiosResponse) => {
console.log('TTTT',JSON.stringify(response))
return response
}, (error: AxiosError) => {
// 请求超时 && 网络错误单独判断,没有 response
return Promise.reject(error)
})
export default instance
import request from "../utils/Request";
interface Login{
user:string;
passwd:string;
appid:string;
}
interface ApiResponse {
code?: number | string;
data: object | null;
mgs?: string;
}
//登录
export function userLogin(data:Login){
return request.post<ApiResponse>("/api/baa00/wxLogin", data)
}
Button('确定', { type: ButtonType.Normal, stateEffect: true })
.borderRadius(8)
.backgroundColor(0x317aff)
.width('100%')
.onClick(async () => {
userLogin({user:'0000',passwd:await aesEcbPkcs7Encrypt('0000'),appid:'zjbnrjcs'})
})
就一直报这边的红字错误,麻烦有大佬能指点一下新手么。。。
更多关于HarmonyOS鸿蒙Next中新手请问下axios网络请求报错问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS Next中,axios网络请求报错可能由以下原因导致:
-
未正确配置网络权限:需在config.json中添加ohos.permission.INTERNET权限
-
请求地址协议问题:鸿蒙Next要求使用https,如用http需在config.json中配置"cleartextTraffic":true
-
证书校验失败:可尝试在请求配置中设置"strictSSL":false
-
请求超时:默认超时时间较短,可配置timeout参数
-
跨域问题:确保服务端已配置CORS
检查请求URL、参数、headers是否符合规范,使用try-catch捕获具体错误信息。
更多关于HarmonyOS鸿蒙Next中新手请问下axios网络请求报错问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS Next中使用axios进行网络请求时,需要注意几个关键点:
- 网络权限问题:确保在config.json中已添加网络权限:
"reqPermissions": [
{
"name": "ohos.permission.INTERNET"
}
]
- 请求头Content-Type设置问题:你代码中设置的是’application/x-www-form-urlencoded’,但实际发送的是JSON数据,建议改为:
headers: {
'Content-Type': 'application/json',
}
-
跨域问题:鸿蒙Next对跨域请求限制较严格,确保后端服务已配置CORS或使用代理方式。
-
错误处理:你的拦截器中错误处理部分没有具体逻辑,建议补充错误信息打印:
instance.interceptors.response.use((response) => {
return response
}, (error) => {
console.error('请求错误:', error.message)
return Promise.reject(error)
})
- 加密库兼容性:确保CryptoJS在鸿蒙环境中能正常工作,可能需要使用鸿蒙提供的加密API替代。
建议先简化请求测试基础功能是否正常,再逐步添加加密等复杂逻辑。