FFH—AI作诗之HttpRequest实战

从现在开始，我们要努力学习啦！今天我给大家带来《FFH—AI作诗之HttpRequest实战》，感兴趣的朋友请继续看下去吧！下文中的内容我们主要会涉及到等等知识点，如果在阅读本文过程中有遇到不清楚的地方，欢迎留言呀！我们一起讨论，一起学习！

​​想了解更多关于开源的内容，请访问：​​

​​51CTO 开源基础软件社区​​

​​https://ost.51cto.com​​

前言

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

Demo展示

http接口常识补充

内容类型（Content-Type）

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

响应状态码（ResponseCode）

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

代码实现

1、申请网络权限

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

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

2、导入http模块

import http from '@ohos.net.http';

3、创建HttpRequest对象

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

let httpRequest = http.createHttp();

4、编写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请求封装的博客。

5、藏头诗部分完整代码

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​​。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于科技周边的相关知识，也可关注golang学习网公众号。