3

#夏日挑战赛#【FFH】AI作诗之httpRequest实战

 2 years ago
source link: https://ost.51cto.com/posts/14671
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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

#夏日挑战赛#【FFH】AI作诗之httpRequest实战

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

Demo展示

#夏日挑战赛#【FFH】AI作诗之httpRequest实战-开源基础软件社区

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代码请看附件


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK