场景

鸿蒙基于JS搭建HelloWorld并修改国际化文件：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118274050

在上面基于JS搭建起来Hello World之后，

怎样发起网络请求获取数据。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

fetch API接口

首先需要配置网络访问的权限

在config.json中的module标签中添加

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

添加位置如下

默认支持https，如果要支持http，需要在config.json里增加network标签，属性标识

"usesCleartext": true。即："deviceConfig": {"default": {"network": {"cleartextTraffic": true}}},

然后在pages下新建一个页面，右键new-JS Page

这里叫fetch，然后就会在pages下面新增fetch页面，下面有hml、js、css。

然后打开js文件

首先需要导入接口模块

import fetch from '@system.fetch';

然后再生命周期函数onInit中通过fetch.fetch发起请求。

    onInit() {//发起网络请求fetch.fetch({url:`https://qqlykm.cn/api/api/tq.php?city=北京`,responseType:"json",success:(resp)=>{this.winfo = resp.data;}});}

其中url就是网络请求的url

这里是从网络上找的免费api

然后将接口的返回值给属性winfo

    data: {winfo:"默认数据"},

完整的js代码为

import router from '@system.router';
import fetch from '@system.fetch';
export default {data: {winfo:"默认数据"},goback(){router.back();},onInit() {//发起网络请求fetch.fetch({url:`https://qqlykm.cn/api/api/tq.php?city=北京`,responseType:"json",success:(resp)=>{this.winfo = resp.data;}});}
}

其中route和goback是用来实现路由跳转

hml页面上

<div class="container"><button @click="goback">返回</button><text >{{ winfo }}</text>
</div>

效果

fetch的参数有

参数名	类型	必填	说明
url	string	是	资源地址。
data	string \| Object	否	请求的参数，可选类型是字符串或者json对象。
header	Object	否	设置请求的header。
method	string	否	请求方法默认为GET，可选值为：OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE。
responseType	string	否	默认会根据服务器返回header中的Content-Type确定返回类型，支持文本和json格式。详见success返回值。
success	Function	否	接口调用成功的回调函数。
fail	Function	否	接口调用失败的回调函数。
complete	Function	否	接口调用结束的回调函数。

表2 data与Content-Type关系
data	Content-Type	说明
string	不设置	Content-Type默认为 text/plain，data值作为请求的body。
string	任意 Type	data值作为请求的body。
Object	不设置	Content-Type默认为application/x-www-form-urlencoded，data按照资源地址规则进行encode拼接作为请求的body。
Object	application/x-www-form-urlencoded	data按照资源地址规则进行encode拼接作为请求的body。

success返回值：

参数名	类型	说明
code	number	表示服务器的状态code。
data	string \| Object	返回数据类型由responseType确定，详见responseType与success中data关系。
headers	Object	表示服务器response的所有header。

表3 responseType与success中data关系
responseType	data	说明
无	string	服务器返回的header中的type如果是text/*或application/json、application/javascript、application/xml，值为文本内容。
text	string	返回文本内容。
json	Object	返回json格式的对象。

鸿蒙开发-使用fetch发起网络请求相关推荐

微信小程序在真机上发起网络请求失败
问题描述在开发工具上发起网络请求没有问题,但是在真机上就收不到响应.(测试机型,荣耀9) 解决方法代码中请求的url采用http协议即可.即使我在配置request合法域名时,采用的是https协 ...
python发起网络请求模块【requests、selenium、urllib、urllib3】
python网络请求四大模块[requests.selenium.urllib.urllib3] 1.requests 该模块为python第三方库,需要使用pip安装安装 pip install ...
dio网络框架封装_Flutter 使用dio来发起网络请求以及Cookie管理
前言 Flutter官方建议您使用 dio 来发起网络请求,在学习过程中,也尝试过用dart io中的HttpClient发起的请求,这里主要讲一下dio的使用以及CookieJar.CookieMa ...
uniapp网络请求获取数据_2.uni-app 发起网络请求
## uni.request(OBJECT) 发起网络请求. **OBJECT 参数说明** ![](https://box.kancloud.cn/a90bf284df069eddde4019c04 ...
[Redux/Mobx] 在Redux中怎么发起网络请求？
[Redux/Mobx] 在Redux中怎么发起网络请求? 如果单纯的使用Redux,因为redux的actionCreator返回一个plain object,所以不能在actionCreator中 ...
[react] react中发起网络请求应该在哪个生命周期中进行？为什么？
[react] react中发起网络请求应该在哪个生命周期中进行?为什么? 异步情况可以在componentDidMount()函数中进行. 同步的情况可以在componentWillMount()中 ...
dio设置自定义post请求_Flutter 使用dio来发起网络请求以及Cookie管理
说点儿闲话 Flutter官方建议您使用 dio 来发起网络请求,在学习过程中,也尝试过用dart io中的HttpClient发起的请求,这里主要讲一下dio的使用以及CookieJar.Cooki ...
HttpUtils工具类 java程序发起网络请求
HttpUtils工具类用于java程序发起网络请求 @Slf4j public class OkHttpUtils {private static final String HTTP_JSON ...
木马——本质就是cs socket远程控制，反弹木马是作为c端向外发起网络请求
摘自:http://kczxsp.hnu.edu.cn/upload/20150504165623705.pdf 里面对于木马的实验过程写得非常清楚,值得一看. 木马是隐藏在正常程序中的具有特殊功能的 ...

鸿蒙开发-使用fetch发起网络请求

场景

实现

fetch API接口

效果

鸿蒙开发-使用fetch发起网络请求相关推荐

最新文章

热门文章