Fetch

{"name": "system.fetch"}

import fetch from '@system.fetch'

var fetch = require("@system.fetch")

fetch.fetch({
  url:"https://www.example.com",
  success:function(data){
    console.log("title: " + JSON.parse(data.data).title);
  },
  fail: function(data, code) {
    console.log("handling fail, code=" + code);
  }
})

<template>
    <div>
        <div>
            <text>{{componentName}}</text>
        </div>
        <div>
            <div>
                <text>{{fetchData}}</text>
                <image show="{{showVar}}" src="{{photoUri}}"></image>
            </div>
            <input type="button" onclick="refresh" value="Update the GET instance." />
        </div>
        <div>
            <div>
                <text>{{fetchData1}}</text>
            </div>
            <input type="button" onclick="refresh1" value="Update the arraybuffer POST instance." />
            <input type="button" onclick="refresh2" value="Update the json POST instance." />
             <input type="button" onclick="refresh3" value="Update the text POST instance." />
        </div>
    </div>
</template>
<style>
    @import '../Common/css/common.css';
    .image {
        margin: 50px 0px;
        width: 600px;
        height: 140px;
    }
    .item-container {
        margin-bottom: 50px;
        margin-right: 60px;
        margin-left: 60px;
        flex-direction: column;
    }
    .item-content {
        flex-direction: column;
        background-color: #ffffff;
        padding: 30px;
        margin-bottom: 50px;
        align-items: center;
        justify-content: center;
    }
    .txt {
        line-height: 45px;
        padding-top: 15px;
        padding-bottom: 15px;
    }
</style>
<script>
    import fetch from '@system.fetch'
    import prompt from '@system.prompt'
    export default {
        data: {
            componentName: 'fetch',
            fetchData: '',
            fetchData1: '',
            photoUri: '',
            showVar: true,
        },
        onInit: function () {
            this.$page.setTitleBar({ text: 'fetch' })
            // this.getphoto()
        },
        postarraybuffer:function(){
            var that = this;
            var buffer = new ArrayBuffer(4);
            var a = new Uint16Array(buffer);
            a[0] = 1;
            a[1] = 2;
            fetch.fetch({
                url: "https://httpbin.org/post",
                data:buffer,
                responseType:'arraybuffer',
                method:"POST",
                success: function (ret) {
                    var buf1 = ret.data;
                    that.fetchData1 = "Obtain data: " + JSON.stringify(String.fromCharCode.apply(null, new Uint8Array(buf1)));
                    that.showVar = true;
                    prompt.showToast({
                        message: "success"
                    })
                },
                fail: function (msg, code) {
                    console.log(msg, code);
                },
                complete: function () {
                    console.log("complete");
                }
            })
        },
        postjson:function(){
            var that = this;
            var str = '{"username":"123","password":"123"}';
            fetch.fetch({
                url: "https://httpbin.org/post",
                data:JSON.parse(str),
                header:{"User-Agent": "Mozilla/5.0 (Linux; U; Android 7.0; zh-cn; STF-AL00 Build/HUAWEISTF-AL00) AppleWebKit/537.36 (KHTML, like Gecko)Version/4.0 Chrome/37.0.0.0 MQQBrowser/7.9 Mobile Safari/537.36","Accept-Encoding": "gzip, deflate","Accept-Language": "zh-CN,en-US;q=0.8,en;q=0.6"},
                responseType:'json',
                method:"POST",
                success: function (ret) {
                    that.fetchData1 = "Obtain data: " + JSON.stringify(ret.data);
                    that.showVar = true;
                    prompt.showToast({
                        message: "success"
                    })
                },
                fail: function (msg, code) {
                    console.log(msg, code);
                },
                complete: function () {
                    console.log("complete");
                }
            })
        },
         poststring:function(){
            var that = this;
            var str = '"name"="huaweitest"&"password":"123"';
            fetch.fetch({
                url: "https://httpbin.org/post",
                responseType:'text',
                data:str,
                method:"POST",
                success: function (ret) {
                    that.fetchData1 = "Obtain data: " + JSON.stringify(ret.data);
                    that.showVar = true;
                    prompt.showToast({
                        message: "success"
                    })
                },
                fail: function (msg, code) {
                    console.log(msg, code);
                },
                complete: function () {
                    console.log("complete");
                }
            })
        },
        getphoto: function () {
            var that = this;
            fetch.fetch({
                url: "https://www.huawei.com/Assets/CBG/img/logo.png",
                success: function (ret) {
                    that.fetchData = "Obtain data: " + JSON.stringify(ret.data);// Note that the data type of that.fetchData must be the same as that of ret.
                    that.photoUri = ret.data;
                    that.showVar = true;
                    prompt.showToast({
                        message: "success"
                    })
                },
                fail: function (msg, code) {
                    console.log(msg, code);
                },
                complete: function () {
                    console.log("complete");
                }
            })
        },
        refresh: function () {
            this.getphoto();
        },
        refresh1: function () {
            this.postarraybuffer();
        },
        refresh2: function () {
            this.postjson();
        },
        refresh3: function () {
            this.poststring();
        }
    }
</script>