#jitoa# axios的安装与使用

wx644a0eebbd176

发布于 2023-11-10 17:11

浏览

0收藏

本博客由金陵科技学院-开放原子开源社-魏厚德编写

OpenHarmony第三方库https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Faxios

终端报错：

#jitoa# axios的安装与使用-鸿蒙开发者社区

1.配置ohpm环境变量

#jitoa# axios的安装与使用-鸿蒙开发者社区

配置环境变量

#jitoa# axios的安装与使用-鸿蒙开发者社区

配置完环境变量后，把IDE进行清空

#jitoa# axios的安装与使用-鸿蒙开发者社区

实现ohpm仓库加载到项目里

2.下载安装

ohpm install @ohos/axios

#jitoa# axios的安装与使用-鸿蒙开发者社区

oh-package.json5文件下，"ohos/axios"的版本号^不要加上，会自动更新

#jitoa# axios的安装与使用-鸿蒙开发者社区

注意：axios最新版本不支持API6

3.配置网络权限

需要权限

ohos.permission.INTERNET

#jitoa# axios的安装与使用-鸿蒙开发者社区

添加引用

import axios, { AxiosError, AxiosResponse, AxiosProgressEvent, InternalAxiosRequestConfig } from '@ohos/axios'
import { FormData } from '@ohos/axios'
import fs from '@ohos.file.fs';

4.实现点击文字，自动显示百度源码

axios API通过向 axios 传递相关配置来创建请求

// 发送一个get请求
axios<string, AxiosResponse<string>, null>({
  method: "get",
  url: 'https://www.xxx.com/info'
}).then((res: AxiosResponse) => {
  console.info('result:' + JSON.stringify(res.data));
}).catch((error: AxiosError) => {
  console.error(error.message);
})

点击按钮

#jitoa# axios的安装与使用-鸿蒙开发者社区

完整代码

import axios, { AxiosError, AxiosResponse, AxiosProgressEvent, InternalAxiosRequestConfig } from '@ohos/axios'
import { FormData } from '@ohos/axios'
import fs from '@ohos.file.fs';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontWeight(FontWeight.Bold)
          .onClick(() =>{
            // 发送一个get请求
            axios<string, AxiosResponse<string>, null>({
              method: "get",
              url: 'http://www.baidu.com'
            }).then((res: AxiosResponse) => {
              console.info('result:' + JSON.stringify(res.data));
              this.message =  JSON.stringify(res.data) ;
            }).catch((error: AxiosError) => {
              console.error(error.message);
              this.message =  JSON.stringify(error.message) ;
            })

          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

分类

标签

已于2023-11-10 17:13:42修改