#夏日挑战赛#FFHAI作诗之httpRequest实战

Posted 开源基础软件社区官方

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了#夏日挑战赛#FFHAI作诗之httpRequest实战相关的知识,希望对你有一定的参考价值。

本文正在参加星光计划3.0–夏日挑战赛
@TOC

前言

​ 最近在一个网课上看到了一个AI作诗的接口,因为之前的fetch接口已经不再维护了,所以我就借这个机会想试试鸿蒙的http接口。接下来会重新复习一下http请求的一些基本知识,并且跟大家一起实现一个简单的AI写诗的demo实际操练一下鸿蒙的http请求。

Demo展示

http接口常识补充

内容类型(Content-Type)

内容类型(Content-Type)的作用就是告诉客户端返回内容的内容类型,各种Content-Type对应的格式如下:

Content-Type 对应格式
text/html HTML格式
text/plain 纯文本格式
text/xml XML格式
image/gif gif图片格式
image/jpeg jpg图片格式
image/png png图片格式
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 form表单数据被编码为key/value格式发送到服务器(表单默认的提交数据的格式)
multipart/form-data 需要在表单中进行文件上传时,就需要使用该格式

响应状态码(ResponseCode)

每次接口请求,服务器都会返回一个响应状态码,每一个状态码都有不同的意思。

名称 说明
OK 200 请求成功。一般用于GET与POST请求。
CREATED 201 已创建。成功请求并创建了新的资源。
ACCEPTED 202 已接受。已经接受请求,但未处理完成。
NOT_AUTHORITATIVE 203 非授权信息。请求成功。
NO_CONTENT 204 无内容。服务器成功处理,但未返回内容。
RESET 205 重置内容。
PARTIAL 206 部分内容。服务器成功处理了部分GET请求。
MULT_CHOICE 300 多种选择。
MOVED_PERM 301 永久移动。请求的资源已被永久的移动到新URI,返回信息会包括新的URI,浏览器会自动定向到新URI。
MOVED_TEMP 302 临时移动。
SEE_OTHER 303 查看其它地址。
NOT_MODIFIED 304 未修改。
USE_PROXY 305 使用代理。
BAD_REQUEST 400 客户端请求的语法错误,服务器无法理解。
UNAUTHORIZED 401 请求要求用户的身份认证。
PAYMENT_REQUIRED 402 保留,将来使用。
FORBIDDEN 403 服务器理解请求客户端的请求,但是拒绝执行此请求。
NOT_FOUND 404 服务器无法根据客户端的请求找到资源(网页)。
BAD_METHOD 405 客户端请求中的方法被禁止。
NOT_ACCEPTABLE 406 服务器无法根据客户端请求的内容特性完成请求。
PROXY_AUTH 407 请求要求代理的身份认证。
CLIENT_TIMEOUT 408 请求时间过长,超时。
CONFLICT 409 服务器完成客户端的PUT请求是可能返回此代码,服务器处理请求时发生了冲突。
GONE 410 客户端请求的资源已经不存在。
LENGTH_REQUIRED 411 服务器无法处理客户端发送的不带Content-Length的请求信息。
PRECON_FAILED 412 客户端请求信息的先决条件错误。
ENTITY_TOO_LARGE 413 由于请求的实体过大,服务器无法处理,因此拒绝请求。
REQ_TOO_LONG 414 请求的URI过长(URI通常为网址),服务器无法处理。
UNSUPPORTED_TYPE 415 服务器无法处理请求的格式。
INTERNAL_ERROR 500 服务器内部错误,无法完成请求。
NOT_IMPLEMENTED 501 服务器不支持请求的功能,无法完成请求。
BAD_GATEWAY 502 充当网关或代理的服务器,从远端服务器接收到了一个无效的请求。
UNAVAILABLE 503 由于超载或系统维护,服务器暂时的无法处理客户端的请求。
GATEWAY_TIMEOUT 504 充当网关或代理的服务器,未及时从远端服务器获取请求。
VERSION 505 服务器请求的HTTP协议的版本。

代码实现

①申请网络权限

在config.json文件里面注册网络权限,该权限允许程序打开网络套接字,进行网络连接。

"reqPermissions": [
  
    "name": "ohos.permission.INTERNET"
  
]

② 导入http模块

import http from @ohos.net.http;

③ 创建HttpRequest对象

这里调用createHttp()创建一个HttpRequest对象后,要注意每一个httpRequest对应一个http请求任务,不可复用,也就是说每发起一次网络请求,都要创建一个新的HttpRequest对象,当执行完该次请求之后,就会自动销毁该对象。

let httpRequest = http.createHttp();

④ 编写request接口

        httpRequest.request(
            "https://py.myie9.com/cangtoutest/"+this.poemHead,
            
                header: 
                    Content-Type: text/plain
                ,
                readTimeout: 10000,
                connectTimeout: 10000
            , (err, data) => 
            if (!err) 
                console.info("xxx--- "+JSON.stringify(data))
                this.aiResult = data.result;
             else 
                console.info(xxx--- error: + JSON.stringify(err));
            
        )

至此就完成了一次简单的http请求啦~

后面还可以对请求进行封装,暴露出需要变更的几个参数即可,比如method,Content-Type等等,后面再找时间写一篇http请求封装的博客。

⑤ 藏头诗部分完整代码

js代码:

import http from @ohos.net.http;
import router from @system.router;
// 每一个httpRequest对应一个http请求任务,不可复用
let httpRequest = http.createHttp();

export default 
    data: 
        poemHead:"123",
        aiResult:"请在上方输入符合要求的字段"
    ,
    onInit() 
    ,
    back()
        router.back()
    ,
    hideHeadPoem() 
        httpRequest = http.createHttp();
        httpRequest.request(
            "https://py.myie9.com/cangtoutest/"+this.poemHead,
            
                header: 
                    Content-Type: text/plain
                ,
                readTimeout: 10000,
                connectTimeout: 10000
            , (err, data) => 
            if (!err) 
                console.info("xxx--- "+JSON.stringify(data))
                this.aiResult = data.result;
             else 
                console.info(xxx--- error: + JSON.stringify(err));
            
        )
    ,
    check1(e)
        console.log("xxx---"+JSON.stringify(e.value))
        this.poemHead = e.value.poemHead
        this.hideHeadPoem();
    

css代码

.container 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;


.title 
    font-size: 60px;
    text-align: center;
    width: 100%;
    height: 40%;
    margin: 10px;

.display
    justify-content: center;
    align-items: center;
    width: 80%;
    height: 35%;
    border-radius: 20px;
    background-color: #fff5f1f1;
    opacity: 0.8;
    box-shadow: 10px 10px 5px #888888;

.subButton
    width: 250px;
    margin-left: 25%;
    background-color:  #ffa5552f;
    margin-top: 5%;

.subButton2
    width: 250px;
    height: 70px;
    margin-left: 25%;
    background-color:  #ffa5552f;
    margin-top: 2%;

hml代码

<div class="container">
    <form class="container" onsubmit=check1>
        <input style="width:80%;height:10%;margin-top: 15%;" type="text" placeholder="请输入要生成藏头诗的句子" name=poemHead>    </input>
        <div class="display" style="margin-top: 15%;">
            <text style="margin: 40px;font-size: 38px;">
                aiResult
            </text>

        </div>
        <input class="subButton" type=submit>生成藏头诗</input>
        <button class="subButton2" onclick="back">返回</button>
    </form>

    <image src="../../common/123.png" style="z-index: -1; position: fixed;width: 100%;height: 100%;">    </image>

</div>

完整的demo代码请看附件(https://ost.51cto.com/resource/2180)

想了解更多关于开源的内容,请访问:

51CTO 开源基础软件社区

https://ost.51cto.com/#bkwz

以上是关于#夏日挑战赛#FFHAI作诗之httpRequest实战的主要内容,如果未能解决你的问题,请参考以下文章

#夏日挑战赛# HarmonyOS 实现一个手绘板

#夏日挑战赛# HarmonyOS - 实现签名功能

#夏日挑战赛# HarmonyOS 实现一个绘画板

#夏日挑战赛#FFH这个盛夏,来一场“清凉”的代码雨!

#夏日挑战赛#FFHHarmonyOS手机遥控Dayu开发板相机

#夏日挑战赛# HarmonyOS - 实现消息通知功能