一. HTTP请求、JSON、HTTP 协议以及第三方包axios

已于 2024-09-03 10:23:56 修改
阅读量1.3k 收藏 11
点赞数 36
分类专栏： harmonyos 文章标签： http 网络协议 网络 harmonyos 华为 鸿蒙 json
于 2024-09-02 21:11:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aaw2002/article/details/141829478
版权

1.1. HTTP 数据请求

什么是HTTP数据请求：

(鸿蒙)应用软件可以通过(鸿蒙)系统内置的 http 模块，通过 HTTP 协议和服务器进行通讯

核心概念:

  1. 什么是服务器?
    1. 在网络上提供服务器的一台电脑，比如提供数据服务
  1. 什么是 http 模块？
    1. 鸿蒙内置的一个模块，可以通过 【HTTP 协议】和【服务器】进行通信
  1. HTTP协议?
    1. 规定了客户端和服务器返回的内容【格式】
    2. 在通讯的时候需要按照格式发送内容，才可以进行通讯

1.2. http模块基本用法 

基本用法：

// 1. 导入
//import http from '@ohos.net.http'
import { http } from '@kit.NetworkKit'

// 2. 创建请求对象
const req = http.createHttp()
// 3. 根据提供好的 地址发送请求，并在 then 中获取服务器响应的内容
req.request('请求地址url')
  .then((res: http.HttpResponse) => {
    AlertDialog.show({ message: JSON.stringify(res) })
  })

注意：

  1. 预览器 和 模拟器 以及真机都可以发送请求
    1. 预览器无需配置网络权限即可成功发送请求
    2. 【模拟器】和【真机】需要配置网络权限才能成功发送请求
  2. 配置权限 -> 详细权限设置，可以参考 声明权限 权限列表
    1. 需要在项目的src/main/module.json5（模块配置）下添加如下代码

{
  "module": {
    "name": "entry",
    "type": "entry",
    "description": "$string:module_desc",
    "mainElement": "EntryAbility",
    "deviceTypes": [
      "phone",
      "tablet",
      "2in1"
    ],
    "deliveryWithInstall": true,
    "installationFree": false,
    "pages": "$profile:main_pages",
    "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
    ],
    "abilities": [
      {
        "name": "EntryAbility",
        "srcEntry": "./ets/entryability/EntryAbility.ets",
        "description": "$string:EntryAbility_desc",
        "icon": "$media:layered_image",
        "label": "$string:EntryAbility_label",
        "startWindowIcon": "$media:startIcon",
        "startWindowBackground": "$color:start_window_background",
        "exported": true,
        "skills": [
          {
            "entities": [
              "entity.system.home"
            ],
            "actions": [
              "action.system.home"
            ]
          }
        ]
      }
    ]
  }
} 

发送请求：

import http from '@ohos.net.http'
import { http } from '@kit.NetworkKit'


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

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(20)
        Button('点击发起网络请求')
          .onClick(() => {
            const req = http.createHttp()
            req.request('https://api-vue-base.itheima.net/api/joke')
              .then((res: http.HttpResponse) => {
                // AlertDialog.show({ message: JSON.stringify(res) })
                this.message = res.result.toString()
              })
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

 json

2.1 基本概念

什么是JSON？

JSON 是一种按照 JavaScript 对象语法的数据格式，虽然它是基于 JavaScript 语法，但它独立于 JavaScript，许多【程序环境】能够读取（解读）和生成 JSON。

链接

JSON的作用？

JSON是一个字符串，常用于存储和传递数据，开发中常见于 2 个地方：

  1. 传递数据：
  2. 配置文件（xxx.json,xxx.json5）

语法规则：

  1. 是一个字符串（配置文件中两边可以不写引号）
  2. 属性名用双引号包裹，
  3. 属性值如果是字符串也必须用双引号包裹
  4. 对象{},数组[]
const jsonObj='{"name":"jack","age":18}'
const arr = '["你好","西兰花炒蛋"]'

 2.2. JSON字符串转换

如果要在 JSON 和对象之间转换，就需要用到对应api 啦：（数组也是对象）

JSON.stringify(对象)// 转为 JSON

JSON.parse(JSON) // 转为 对象,需要设置类型（通过变量类型或 as）

interface Person{
  name:string
  age:number
}
// JSON.parse
const jsonObj='{"name":"jack","age":18}'
const obj:Person =  JSON.parse(jsonObj) as Person
const obj2 =  JSON.parse(jsonObj) as Person
const jsonArr = '["你好","西兰花炒蛋"]'
const arr:string[] = JSON.parse(jsonArr)

// JSON.stringify
const p:Person={
  name:'rose',
  age:20
}
AlertDialog.show({
  message:JSON.stringify(p)
})

易错点：

  1. url 地址不能有空格
  2. 写类型的时候，不能出现属性名不一致的情况

2.3url查询参数

URL查询参数是提供给网络服务器的额外参数。这些参数是用 & 符号分隔的键/值对列表。在返回资源之前，Web 服务器可以使用这些参数来执行额外的操作。每个 Web 服务器都有自己关于参数的规则，唯一可靠的方式来知道特定 Web 服务器是否处理参数是通过询问 Web 服务器所有者

简而言之: 携带给服务器额外信息，让服务器返回我想要的某一部分数据而不是全部数据

百度安全验证

百度安全验证

百度安全验证

 

实际开发时，服务器的所有者会提供 URL 查询参数的信息，比如

地址: https://api-vue-base.itheima.net/api/joke/list

根据查询参数获取若干条随机笑话

参数名: num

说明: 传递数量即可，比如 5

案例实现：

// import http from '@ohos.net.http';
import { http } from '@kit.NetworkKit';


const req = http.createHttp()

// 定义好了接受服务器返回的数据类型
interface iRes {
  msg: string
  code: number
  data: string[]
}

@Entry
@Component
struct Day01_03_QueryParams {
  @State pname: string = '湖南省';
  @State jokeNum: string = '' // 获取笑话的条数
  @State jokes: string[] = [] // 存储笑话的数组
  @State cities: string[] = []

  build() {
    Column() {
      // 开心一笑
      Column({ space: 10 }) {
        Text('开心一笑')
          .fontSize(30)
        TextInput({ placeholder: '输入笑话条数', text: $$this.jokeNum })
          .type(InputType.Number)
            // onSubmit表示用户在文本框中输入内容之后回车就会触发这个事件
          .onSubmit(() => {

            // 目标：用户在文本框中输入数量之后，回车就应该请求url地址
            //  https://api-vue-base.itheima.net/api/joke/list?num=用户输入的数量
            req.request(`https://api-vue-base.itheima.net/api/joke/list?num=${this.jokeNum}`)
              .then(res => {
                // 将服务器返回来的数据转成iRes类型的对象
                let resObj: iRes = JSON.parse(res.result.toString())
                this.jokes = resObj.data
              })
          })
        ForEach(this.jokes, (joke: string) => {
          Text(joke)
        })
      }
      .layoutWeight(1)
      .width('100%')
      .padding(10)

 
}
   
}

  请求方法和数据提交

  1. GET请求方法是HTTP模块的默认请求方法
  2. 向服务器发送数据我们常用的方式是POST请求方法（需要显示指定）

3.1：POST请求

POST请求语法：

  const req = http.createHttp()
  req.request('请求地址', {
    method: http.RequestMethod.POST, // 通过枚举的方式设置请求方法，如果是 get 可以省略
        
    // 向服务器提交数据写法1：传对象（需要配合header头参数，后面再说）
    extraData: {} 
          
    // 向服务器提交数据写法2（此处先用写法2）传字符串 写成 'key=value&key2=value2'......
    extraData:'key=value&key2=value2'
  })

post请求的使用：

import { http } from '@kit.NetworkKit'

@Entry
@Component
struct Day01_05_SubmitData {
  @State username: string = 'test3212'
  @State password: string = '123456'

  build() {
    Column({ space: 15 }) {
      Text('请求方法和数据提交')
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
      TextInput({ text: $$this.username, placeholder: '用户名' })
      TextInput({ text: $$this.password, placeholder: '密码' })
        .type(InputType.Password)

      Button('提交数据')
        .width('100%')
        .onClick(() => {
          // 获取用户名和密码 利用http模块将这2个数据提交给服务器完成注册功能
          /*
           * 1. 导入http模块
           * 2. 创建对象请求url
           * 3. 处理服务器返回来的数据
           * */

          const req = http.createHttp()
          req.request('http://hmajax.itheima.net/api/register', {
            method: http.RequestMethod.POST,  //请求方法是POST
            extraData: `username=${this.username}&password=${this.password}`  //向服务器提交的参数
          })
            .then(res => {
              AlertDialog.show({ message: JSON.stringify(res.result, null, 2) })
            })
        })
    }
    .width('100%')
    .height('100%')
    .padding(20)
  }
}

HTTP协议

请求报文的组成部分:

  1. 请求行：请求方法，URL，协议(第一行)
  2. 请求头：以键值对的格式携带的附加信息，比如：Content-Type（第二行开始到空行）
  3. 空行：分隔请求头，空行之后的是发送给服务器的资源（空行）
  4. 请求体：发送的资源（空行之后）

响应体

  1. 响应行（状态行）：协议、HTTP响应状态码、状态信息(第一行)
  2. 响应头：以键值对的格式携带的附加信息，比如：Content-Type（第一行到空行）
  3. 空行：分隔响应头，空行之后的是服务器返回的资源（空行）
  4. 响应体：返回的资源（空行之后）

咱们一般需要关注，响应行，响应体即可

状态码：我们可以根据状态码来反映请求是否完成

 请求库-axios

4.1 下载axios

# 安装
ohpm i @ohos/axios

# 卸载
ohpm uninstall @ohos/axios

4.2 axios完成POST请求

语法：

// 1. 导入axios
// AxiosError：异常时的数据类型
// 正常时的数据类型AxiosResponse 是一个泛型类型
import axios, { AxiosError, AxiosResponse } from '@ohos/axios'

// 2. 创建axios的对象实例
const req = axios.create()

// 3. 发送POST请求,并提交数据给服务器
let res:AxiosResponse<响应数据类型> = 
  await req.request<响应数据类型(可以写null), AxiosResponse<响应数据类型>, 请求体数据类型>({
    method: 'POST',  // 请求方法
    url: 'https://hmajax.itheima.net/api/login',  //服务器url地址
    data: { // 请求体数据
      username: 'jack123456',
      password: '12345678'
    }
  })

// post使用1. 导入axios
import axios, { AxiosResponse } from '@ohos/axios'

export interface iRequestBody {
  /**
   * 密码，最少6位
   */
  password: string;

  /**
   * 用户名，最少8位，中英文和数字组成,
   */
  username: string;
}

export interface iResponse {
  /**
   * 业务状态码，10000成功, 10004-账号/密码未携带
   */
  code: number;

  /**
   * 响应消息
   */
  message: string;
}

@Entry
@Component
struct Index {
  build() {
    Column() {
      Button('axios发送post请求')
        .onClick(async () => {
          //   2. 创建请求对象实例
          const req = axios.create()

          //   3. 利用req.request方法发送post请求
          try {
            let res: AxiosResponse<iResponse> =
              // 三个泛型参数解释：
              /*
               * 第一个参数：表示响应类型 (直接写null)
               * 第二个参数：表示响应体的类型 AxiosResponse<写接口返回的数据interface>
               * 第三个参数：表示请求体的类型 ，写接口的请求body的interface
               * */
              await req.request<null, AxiosResponse<iResponse>, iRequestBody>({
                method: 'POST',
                url: 'https://hmajax.itheima.net/api/login',
                // data的类型是reqeust第三个泛型参数的类型
                data: {
                  username: 'jack123456',
                  password: '12345678'
                }
              })
            AlertDialog.show({ message: JSON.stringify(res.data.message, null, 2) })
          } catch (err) {
            AlertDialog.show({ message: JSON.stringify(err, null, 2) })
          }
        })

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

4.3 axios完成GET请求 （无参和有参）

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

export interface ApifoxModel {
  /**
   * 响应数据
   */
  data: Datum[];

  /**
   * 响应消息
   */
  message: string;
}

export interface Datum {
  /**
   * 顶级分类id
   */
  id: string;

  /**
   * 顶级分类名字
   */
  name: string;

  /**
   * 顶级分类图片
   */
  picture: string;
}

@Entry
@Component
struct Index {
  build() {
    Column() {

      Button('axios.get')
        .onClick(async () => {
          // 1. 创建请求实例
          const req = axios.create()

          // 2. async 和 await方式发送get请求（不带参数）
          try{
            let res: AxiosResponse<ApifoxModel> = await req.request({
              method: 'get',
              url: 'https://hmajax.itheima.net/api/category/top'
            })
            AlertDialog.show({ message: JSON.stringify(res.data, null, 2) })
          } catch (err) {
            let errObj: AxiosError = err
            AlertDialog.show({ message: '出错了：' + JSON.stringify(errObj.message, null, 2) })
          }

          // 3. .then().catch()方式发送请求（不带参数）
          // req.request({
          //   method: 'get',
          //   url: 'https://hmajax.itheima.net/api/category/top1'
          // })
          //   .then((res: AxiosResponse<ApifoxModel>) => {
          //     AlertDialog.show({ message: JSON.stringify(res.data, null, 2) })
          //   })
          //   .catch((err: AxiosError) => {
          //     AlertDialog.show({ message: '出错了：' + JSON.stringify(err, null, 2) })
          //   })

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

  }
}

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

export interface ApifoxModel {
  /**
   * 响应数据
   */
  data: Data;
  /**
   * 响应消息
   */
  message: string;
}

/**
 * 响应数据
 */
export interface Data {
  /**
   * 顶级分类下属二级分类数组
   */
  children: Child[];
  /**
   * 顶级分类id
   */
  id: string;
  /**
   * 顶级分类名字
   */
  name: string;
  /**
   * 顶级分类图片
   */
  picture: string;
}

export interface Child {
  /**
   * 二级分类id
   */
  id: string;
  /**
   * 二级分类名字
   */
  name: string;
  /**
   * 二级分类图片
   */
  picture: string;
}

@Entry
@Component
struct Index {
  build() {
    Column() {

      Button('axios.get')
        .onClick(async () => {
          // 1. 创建请求实例
          const req = axios.create()

          // 2. async 和 await方式发送get请求（带参数）
          try{
            let res: AxiosResponse<ApifoxModel> = await req.request({
              method: 'get',
              url: 'https://hmajax.itheima.net/api/category/sub',
              params:{
                id:'1005000'
              }
            })
            AlertDialog.show({ message: JSON.stringify(res.data, null, 2) })
          } catch (err) {
            let errObj: AxiosError = err
            AlertDialog.show({ message: '出错了：' + JSON.stringify(errObj.message, null, 2) })
          }

          // 3. .then().catch()方式发送请求（带参数）
          // req.request({
          // method: 'get',
          // url: 'https://hmajax.itheima.net/api/category/sub',
          // params:{
          //   id:'1005000'
          // }
          // })
          //   .then((res: AxiosResponse<ApifoxModel>) => {
          //     AlertDialog.show({ message: JSON.stringify(res.data, null, 2) })
          //   })
          //   .catch((err: AxiosError) => {
          //     AlertDialog.show({ message: '出错了：' + JSON.stringify(err, null, 2) })
          //   })

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

  }
}

3.2. axios基地址配置 

// 基于配置，返回一个 axios 的实例，如果多个页面使用同一个基地址可以将其放入一个新文件中并导出提高复用性和维护性
const req =  axios.create({
  // 基地址，后续请求的时候这部分可以省略
  baseURL:'https://hmajax.itheima.net'
})
// get 请求 直接写 url 即可
 let res: AxiosResponse<ApifoxModel> = await req.request({
  method: 'get',
  url: '/api/category/top'
})
AlertDialog.show({ message: JSON.stringify(res) }) 

 

鸿蒙小艾
关注
专栏目录
Node.js 中发出 HTTP 请求的五种方法
wjianwei666的专栏
03-23 149
axios比superagent的功能列表很长，尽管 node-fetch 看起来很有前途并且安装大小很小，但我不确定该 API 是否足够用户友好——至少对我来说是这样。
向服务器发送HTTP请求的两种方法：Axios 与 fetch()
学习笔记
12-19 896
首先可以用 fetch() API 发送HTTP请求，由于fetch()是浏览器内建方法，因此不需要额外安装package. 其次也可以安装像 Axios 这样的第三方包，Axios 是一个非常流行的 JavaScript 包，用于从 JavaScript 内部发送 HTTP 请求。 使用 Axios 可以简化代码，同一条HTTP post 请求，如果使用 fetch(): fetch('https://something.firebaseio.com/myapp.json', { method: 'P
Http发送Json请求
09-15
import com.google.gson.JsonArray; import com.google.gson.JsonObject; import org.apache.http.HttpResponse; import org.apache.http.HttpStatus; import org.apache.http.client.HttpClient; import org.apache.http.client.methods.HttpPost; import org.apache.http.entity.StringEntity; import org.apache.http.impl.client.DefaultHttpClient; import org.apache.http.util.EntityUtils;
axios之http请求
牛先森家的博客
10-28 293
利用axios发请求 /** * 二次封装 */ import axios from 'axios'; import store from '../store' import {message} from 'antd'; const request = axios.create({ baseURL:'http://112.74.111.183:8888/api', withCredentials:true // 请求浏览器cookie允许 }) // 请求拦截：在请求发出去之前进
vue---实现http请求（vue-resource和axios）
maidu_xbd的博客
03-10 241
vue-resource和axios均能实现http请求，但vue-resource已宣布不再维护了，所以推荐大家使用axios vue-resource 1、安装【npm install vue-resource --save-dev】 2、全局配置，可以放在【main.js】中 【import VueResource from 'vue-resource'】 【Vue...
http请求和响应格式，Json
2302_80182440的博客
04-26 762
Json语法中一个对象由一个大括号表示，对象的属性以键值对的的形式表示，键以 "" 引住；一个Http请求报文由请求行，请求头，和请求数据组成。Json反序列化：由json数据格式转换为java对象。Json序列化：由java对象转换为json数据格式。请求数据 ： 以键值对的形式表示请求参数的数据；请求头由键值对组成，以 键：值 的形式呈现；协议版本 状态码 状态码描述。响应头：内容为多个键值对，格式为 键：值；请求头的属性作为键，属性内容作为值；请求头和请求数据间有一行空行；一，http请求格式。
理解 HTTP POST 请求：表单与 JSON 数据格式深入解析20231208
Narutolxy的博客
12-08 6503
HTTP POST 请求是一种常用的网络请求类型，用于向服务器发送数据。它们通常用于表单提交或向 API 传输数据。了解 multipart/form-data 和 application/json 的区别对于处理这些请求至关重要。
Vue Vue 中的fetch与网络请求第三方库axios
SillyBoy的博客
06-29 429
文章目录fetchaxios fetch 因为XMLHttpRequest配置和调用方法非常混乱，而且基于事件的异步模型书写不友好。 浏览器自带。 兼容不好：兼容包https://github.com/camsong/fetch-ie8 fetch请求默认不带cookie,需要设置fetch(url,{credntials:‘include’}) //text.json { 'name':'silly', 'age':'20', "location":"zhengzhou" }
Node.js、数据库、模块化、NPM、Axios
chenjia525的博客
07-20 343
Node.js1.基于chromev8引擎的js运行环境2.v8chrome的js解析引擎，C++开发,单线程，可独立运行3.运行环境①类似虚拟机，提供js在服务端运行的环境②js工具库扩展了js在服务端的功能。
前端通用后台登录解决方案（一站式解决封装axios模块、接口请求模块、登录请求动作、本地缓存处理、登录鉴权解决）
m0_55070913的博客
07-31 392
当点击按钮的时候，我们触发登陆动作，首先要进行表单验证，因为这里用的是element-plus，其中的form组件有一个validate的验证方法可以把表单中的每一项进行验证，那我们如何给这个元素添加方法呢，首先得获取到它的实例对象，在vue2直接this.$refs.xxx，就能获取到，而在vue3中我们通过在元素上添加ref属性，然后只需要在setup中声明一个ref值为空且和想绑定的ref值相同的值就行。在上一小节中，我们保存了服务端返回的token。...
HttpClient发送post请求传输json数据
08-10
NULL 博文链接：https://cxl2012.iteye.com/blog/2210521
通过Json数据格式进行Http服务交互（Delphi）
10-29
利用IdHTTP进行Http服务的数据交互，交互数据格式采用目前流行的Json，实现Get和Post方式的交互
vue-resource实现get，post，json请求
qq_43327962的博客
08-28 729
vue-resource实现get，post，json请求getpostjson 除了vue-resource之外，还可以使用‘axios’的第三方包实现数据的请求。 在引入vue-resource包时，因为vue-resource依赖于vue，所以要先引入vue，再引入vue-resource get 假如get的api为：http://vue.studyit.io/api/getlunbo <input type="button" value="get请求" @click="getInfo"&gt
Http协议JSON格式
最新发布
weixin_55702682的博客
06-14 1446
超文本传输协议（Hyper Text Transfer Protocol,HTTP）规定客户端如何从服务器端获取文档和向服务器端提交表单内容，以及服务器端如何响应这些请求和提交。HTTP是一个基于TCP/IP通信协议来传递数据的协议，传输的数据类型为HTML 文件,、图片文件, 查询结果等。HTTP协议一般用于B/S架构（浏览器和服务器架构模式）。浏览器作为HTTP客户端通过URL向HTTP服务端即WEB服务器发送所有请求。为了解决上述HTTP存在的问题，就用到了HTTPS。
HTTP&JSON基础
学仔仔的博客
01-24 1694
一、HTTP协议介绍 RFC 2616定义HTTP1.1：用于从WWW服务器传输超文本到 本地浏览器的传送协议 二、URI 标识并定位资源，有两种表现形式：URL,URN 1.URL（Uniform Resource Locator）：描述了一台特定服务器上某资源的特定位置 2.URN（Uniform Resource Name）：资源的唯一名称，与位置无关 3.URL字符集和...
java 使用httppost设置json参数发送请求
learnjava1989的博客
09-13 3306
核心代码如下，其中有个对参数进行hash+salt加密方法名为 getSignature（），httppost设置参数主要靠xxxeneity,详情可以百度查看使用！对接第三方接口时，有时接口要求参数为json格式，留个笔记备用！getSignature（）具体代码如下图一。发送请求并获取响应的代码如下图二。
以POST方式进行HTTP请求调用（入参为JSON格式）
chinaherolts2008的博客
01-02 3541
今天总结一下，调用vb.net教程第三方接口地址，以POST方式进行HTTP请求，并且入参为JSON格式方法: 引用：using System.Text;using System.Net;using System.IO; string url=“http://”;//第三方接口地址 paramStr //json字符串 c#教程入参 Encoding encoding = Encoding.UTF8; 调用：HttpResult result=GetHttpNewWeb（url, paramStr, enc
网络基础二补充——json与http协议
qq_33093885的博客
03-31 1732
json的使用，http初步认识
go json解析第三方包
08-19
在Go语言中，有一个被称为jsoniter的第三方包可以用于解析和序列化JSON数据。这个包覆盖了原生的json包，并提供了一些额外的功能。在代码中，你可以使用jsoniter.ConfigCompatibleWithStandardLibrary来替代原生的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值