网络请求

离卿2025/12/12大约 3 分钟

网络请求

请求网络数据（网址）和接口数据都需要配置网络权限

请求权限

再module.json5里面配置请求权限

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

创建实例

有的包是需要安装的，有的可以直接导入包

http

import { http } from '@kit.NetworkKit'
const httpRequest=http.createHttp()

axios

ohpm install @ohos/axios

import {axios} from @ohos/axios
const instance=axios.create()

简单使用


import { http } from '@kit.NetworkKit'
const httpRequest=http.createHttp()

@Entry
@Component
struct Index {
  build() {
    Column(){
      Button('发送短信')
        .onClick(()=>{
          httpRequest.request('http://123.56.141.187:8001/sms/send',{
            method:http.RequestMethod.POST,//post或get，取决于接口
            header:{"content-type":"application/json"},//配置文件，取决于接口
            extraData: {//取决于接口，这个是你提供给接口的数据
              mobile: '15573962202',
              type: 'other'
            }
          })
            .then(res=>{
              if (res.responseCode===200) {
                console.log('qfj ', res.result)
              }
            })
            .then(error=>{
              console.log('服务器链接异常')
            })
        })
    }
  }
}

import axios, { AxiosError, AxiosResponse } from '@ohos/axios'

interface data{
  mobile:string
  type:string
}
const instance=axios.create()

@Entry @Component
struct Test{
  build() {
    Column() {
      Button('发送短信')
        .onClick(()=>{
          instance.post('http://123.56.141.187:8001/sms/send',//请求接口地址
            {mobile: '15573962202',type: 'other'} as data,//提供给接口的数据，需要使用interface封装一下
            {headers:{'Content-Type':'application/json'}})//配置文件
            .then((response:AxiosResponse)=>{
              console.log(JSON.stringify(response.data))
            })
            .catch((error:AxiosError)=>{
              console.log('服务器连接异常')
            })
        })
    }
  }
}

封装

import { http } from '@kit.NetworkKit'

const baseURL="http://123.56.141.187:8001"//基础地址

export const get=<T=object>(path:string):Promise<T>=>{
  const httpRequest=http.createHttp()
  return httpRequest.request(
    baseURL+path,
    {
      method:http.RequestMethod.GET
    }
  )
    .then(res=>{
      return JSON.parse(res.result as string) as T
    })

}

export const post=<T=object>(path:string,data:object):Promise<T>=>{
  const httpRequest=http.createHttp()
  return httpRequest.request(
    baseURL+path,
    {
      method:http.RequestMethod.POST,
      header:{"content-type":"application/json"},
      extraData:data
    }
  )
    .then(res=>{
      return JSON.parse(res.result as string) as T
    })
}

// 1. 给函数加 async
Button('发送短信').onClick(async () => {
	try{
	  // 2. 在异步操作（post请求）前加 await
  const res = await post('/sms/send', {mobile: '15021459079', type: 'other'} as PostSmsPayloadType)
  // 等post请求完成、拿到res后，才会执行这行打印
  console.log('服务器返回：', JSON.stringify(res))
	}
	catch(err){
		 console.log('请求失败：', err)
	}
})

Content-Type

Content-Type（内容类型），一般是指网页中存在的 Content-Type，用于定义网络文件的类型和网页的编码，决定浏览器将以什么形式、什么编码读取这个文件，这就是经常看到一些 PHP 网页点击的结果却是下载一个文件或一张图片的原因。

Content-Type 标头告诉客户端实际返回的内容的内容类型。

语法格式：

Content-Type: text/html; charset=utf-8
Content-Type: multipart/form-data; boundary=something

常见的媒体格式类型如下：

text/html ： HTML格式
text/plain ：纯文本格式
text/xml ： XML格式
image/gif ：gif图片格式
image/jpeg ：jpg图片格式
image/png：png图片格式

以application开头的媒体格式类型：

application/xhtml+xml ：XHTML格式
application/xml： XML数据格式
application/atom+xml ：Atom XML聚合格式
application/json： JSON数据格式
application/pdf：pdf格式
application/msword ： Word文档格式
application/octet-stream ：二进制流数据（如常见的文件下载）
application/x-www-form-urlencoded ：表单中默认的encType，form表单数据被编码为key/value格式发送到服务器（表单默认的提交数据的格式）

另外一种常见的媒体格式是上传文件之时使用的：

multipart/form-data ：需要在表单中进行文件上传时，就需要使用该格式

网络请求

网络请求

推荐一个查看网络接口数据的插件

推荐一个鸿蒙开发使用的JSON提取接口的插件

请求权限

创建实例

简单使用

封装

Content-Type