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

2 回复

在HarmonyOS Next中,axios网络请求报错可能由以下原因导致:

  1. 未正确配置网络权限:需在config.json中添加ohos.permission.INTERNET权限

  2. 请求地址协议问题:鸿蒙Next要求使用https,如用http需在config.json中配置"cleartextTraffic":true

  3. 证书校验失败:可尝试在请求配置中设置"strictSSL":false

  4. 请求超时:默认超时时间较短,可配置timeout参数

  5. 跨域问题:确保服务端已配置CORS

检查请求URL、参数、headers是否符合规范,使用try-catch捕获具体错误信息。

更多关于HarmonyOS鸿蒙Next中新手请问下axios网络请求报错问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中使用axios进行网络请求时,需要注意几个关键点:

  1. 网络权限问题:确保在config.json中已添加网络权限:
"reqPermissions": [
  {
    "name": "ohos.permission.INTERNET"
  }
]
  1. 请求头Content-Type设置问题:你代码中设置的是’application/x-www-form-urlencoded’,但实际发送的是JSON数据,建议改为:
headers: {
  'Content-Type': 'application/json',
}
  1. 跨域问题:鸿蒙Next对跨域请求限制较严格,确保后端服务已配置CORS或使用代理方式。

  2. 错误处理:你的拦截器中错误处理部分没有具体逻辑,建议补充错误信息打印:

instance.interceptors.response.use((response) => {
  return response
}, (error) => {
  console.error('请求错误:', error.message)
  return Promise.reject(error)
})
  1. 加密库兼容性:确保CryptoJS在鸿蒙环境中能正常工作,可能需要使用鸿蒙提供的加密API替代。

建议先简化请求测试基础功能是否正常,再逐步添加加密等复杂逻辑。

回到顶部