鸿蒙js开发模式3 鸿蒙js开发模式下的fetch网络请求数据 原创

效果图：

1、配置网络访问权限

{
  "app": {
    "bundleName": "com.example.hmjs",
    "vendor": "example",
    "version": {
      "code": 1,
      "name": "1.0"
    },
    "apiVersion": {
      "compatible": 3,
      "target": 4,
      "releaseType": "Beta1"
    }
  },
  "deviceConfig": {
    "default": {
      "network": {
        "usesCleartext": true,
        "securityConfig": {
          "domainSettings": {
            "cleartextPermitted": true,
            "domains": [
              {
                "subDomains": true,
                "name": "api.seniverse.com"
              }
            ]
          }
        }
      }
    }
  },
  "module": {
    "reqPermissions": [
      {
        "name": "ohos.permission.GET_NETWORK_INFO"
      },
      {
        "name": "ohos.permission.SET_NETWORK_INFO"
      },
      {
        "name": "ohos.permission.INTERNET"
      }
    ],
    "package": "com.example.hmjs",
    "name": ".MyApplication",
    "deviceType": [
      "phone"
    ],
    "distro": {
      "deliveryWithInstall": true,
      "moduleName": "entry",
      "moduleType": "entry"
    },
    "abilities": [
      {
        "skills": [
          {
            "entities": [
              "entity.system.home"
            ],
            "actions": [
              "action.system.home"
            ]
          }
        ],
        "name": "com.example.hmjs.MainAbility",
        "icon": "$media:icon",
        "description": "$string:mainability_description",
        "label": "鸿蒙js开发模式",
        "type": "page",
        "launchType": "standard"
      }
    ],
    "js": [
      {
        "pages": [
          "pages/weather/weather",
          "pages/one/one",
          "pages/index/index"

        ],
        "name": "default",
        "window": {
          "designWidth": 720,
          "autoDesignWidth": false
        }
      }
    ]
  }
}

2、页面视图及样式

<div class="pagediv">
    <div class="pagediv1">
        <text class="t1">天气：{{weather}}</text>
        <text class="t1">地点：{{path}}</text>
        <text class="t1">时间：{{time}}</text>
    </div>
</div>

.pagediv{
    width: 100%;
    height: 1600px;
}
.pagediv1{
    width: 100%;
    height: 100%;
    background-color: cornflowerblue;
    display: flex;
    flex-direction: column;
    justify-content: center;
    
}
.t1{
    font-size: 50px;
    font-weight: 300;
    font-family: sans-serif;
}

3、逻辑层

//导入鸿蒙的网络请求模块
import fetch from '@system.fetch';
export default {
    data: {
        weather:0,
        path:0,
        time:0
    },
    onInit(){
       //发起对心知天气接口的网络请求
       fetch.fetch({
        url:"https://api.seniverse.com/v3/weather/now.json?key=SKNzF__vXSw35QKhp&location=nanjing&language=zh-Hans&unit=c",
        responseType:"json",
        success:(res)=>{
        //JSON.parse() 将数据转换成json格式
        let weather = JSON.parse(res.data);
        this.weather = weather.results[0].now.text;
        this.path = weather.results[0].location.path;
        this.time = weather.results[0].last_update;
        }
       });
    }
}