Arkts完成数据请求http以及使用axios第三方库

戒不掉的伤怀2025-04-30 13:05

javascript 复制代码

import http from '@ohos.net.http'
@Entry
@Component
struct HttpPage {
  @State message: string = 'Hello World'

  build() {
    Column({space:20}) {
      Row(){
        Button('发送http请求')
          .onClick(()=>{
            let httpRequest = http.createHttp();
            httpRequest.request(
              'https://zzgoodqc.cn/index.php/index/qus/getquestionlist',
              {
                method:http.RequestMethod.POST,
                extraData:{
                  sn:'1001'
                }
              }
            )
              .then(resp=>{
                console.log("resp=>",JSON.stringify(resp))
                if(resp.responseCode === 200){
                  console.log(resp.result.toString())
                }
              }).catch(err=>{
              console.log('请求错误err=>',err)
            })

          })
      }

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

以上是方案1：默认数据请求

方案二：使用axios第三方库请求接口

第一步：安装aixos，执行

javascript 复制代码

ohpm install @ohos/axios

第二步：注意配置网络权限，在module.json5文件中

javascript 复制代码

    "requestPermissions":[
      {
        "name": "ohos.permission.INTERNET"
      }
    ],

第三步：类似vue，正常引入使用

javascript 复制代码

import axios from  '@ohos/axios'
@Entry
@Component
struct HttpPage {
  @State message: string = 'Hello World'

  build() {
    Column({space:20}) {
   Row(){
          Button('发送axios请求')
            .onClick(()=>{
              axios.post(
                'https://zzgoodqc.cn/index.php/index/qus/getquestionlist',
                {
                  sn:'1001'
                }
              ).then(response=>{
                console.log("response=>",JSON.stringify( response))
              }).catch(err=>{
                console.log('err=>',err)
              })
            })

        }


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