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

ゝ一纸荒年。 2022-10-12 04:19 294阅读 0赞

# 场景 #

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

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/118274050][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_118274050]

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

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

注：

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

# 实现 #

## fetch API接口 ##

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

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

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

添加位置如下

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 2][]

这里叫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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 3][]

然后将接口的返回值给属性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>

## 效果 ##

![202107031355106.gif][]

fetch的参数有

<table> 
 <thead> 
 <tr> 
 <th> 参数名 </th> 
 <th> 类型 </th> 
 <th> 必填 </th> 
 <th> 说明 </th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td> url </td> 
 <td> string </td> 
 <td> 是 </td> 
 <td> 资源地址。 </td> 
 </tr> 
 <tr> 
 <td> data </td> 
 <td> <a href="https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-network-data-request-0000000000626077#ZH-CN_TOPIC_0000001148865857__table91881752101214" rel="nofollow">string | Object</a> </td> 
 <td> 否 </td> 
 <td> 请求的参数，可选类型是字符串或者json对象。 </td> 
 </tr> 
 <tr> 
 <td> header </td> 
 <td> Object </td> 
 <td> 否 </td> 
 <td> 设置请求的header。 </td> 
 </tr> 
 <tr> 
 <td> method </td> 
 <td> string </td> 
 <td> 否 </td> 
 <td> 请求方法默认为GET，可选值为：OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE。 </td> 
 </tr> 
 <tr> 
 <td> responseType </td> 
 <td> string </td> 
 <td> 否 </td> 
 <td> 默认会根据服务器返回header中的Content-Type确定返回类型，支持文本和json格式。详见<a href="https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-network-data-request-0000000000626077#ZH-CN_TOPIC_0000001148865857__table13571941131312" rel="nofollow">success返回值</a>。 </td> 
 </tr> 
 <tr> 
 <td> success </td> 
 <td> Function </td> 
 <td> 否 </td> 
 <td> 接口调用成功的回调函数。 </td> 
 </tr> 
 <tr> 
 <td> fail </td> 
 <td> Function </td> 
 <td> 否 </td> 
 <td> 接口调用失败的回调函数。 </td> 
 </tr> 
 <tr> 
 <td> complete </td> 
 <td> Function </td> 
 <td> 否 </td> 
 <td> 接口调用结束的回调函数。 </td> 
 </tr> 
 </tbody> 
</table>

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

success返回值：

<table> 
 <thead> 
 <tr> 
 <th> 参数名 </th> 
 <th> 类型 </th> 
 <th> 说明 </th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td> code </td> 
 <td> number </td> 
 <td> 表示服务器的状态code。 </td> 
 </tr> 
 <tr> 
 <td> data </td> 
 <td> <a href="https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-network-data-request-0000000000626077#ZH-CN_TOPIC_0000001148865857__table1172612200146" rel="nofollow">string | Object</a> </td> 
 <td> 返回数据类型由responseType确定，详见<a href="https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-network-data-request-0000000000626077#ZH-CN_TOPIC_0000001148865857__table1172612200146" rel="nofollow">responseType与success中data关系</a>。 </td> 
 </tr> 
 <tr> 
 <td> headers </td> 
 <td> Object </td> 
 <td> 表示服务器response的所有header。 </td> 
 </tr> 
 </tbody> 
</table>

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

[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_118274050]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118274050
[https_blog.csdn.net_badao_liumang_qizhi]: https://blog.csdn.net/badao_liumang_qizhi
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: /images/20221005/c6ff64529dc24bef820284489c1102ba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1]: /images/20221005/6c7da6c7a9a4429c89be45f02d0a2ef0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 2]: /images/20221005/238cdb39b9034d3ab5d56ccdc5ee469b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 3]: /images/20221005/f7ae770155504249ba5f44eca1d3aa71.png
[202107031355106.gif]: /images/20221005/113e05e3d69741f4835a52d69858ef27.png