QML中调用HTTP请求

涉及到Http请求，第一反应可能是使用Qt的QNetworkRequest和QNetworkReply实现，然后QML再与其交互，但是这样过于麻烦了。其实QML自己已经具备了http网络请求访问的功能。而且使用起来很方便。

我们这里举一个访问天气接口，然后解析其数据的例子。

一，看下效果

QML中调用HTTP请求 – Qt hello

二，代码

主要是利用XMLHttpRequest这个类，请求接口，然后将返回的数据解析成json对象（JSON.parse），之后就可以像js一样去拿json对象里的数据了，当然前提是接口返回得数据是json。

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    //主要看这个函数
    function request() {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            if (xhr.readyState === XMLHttpRequest.HEADERS_RECEIVED) {
                console.log('HEADERS_RECEIVED')
            } else if(xhr.readyState === XMLHttpRequest.DONE) {
                console.log('DONE')
                console.log(xhr.responseText.toString())
                var object = JSON.parse(xhr.responseText.toString());

                text.append(object["errcode"])
                text.append(object["errmsg"])
            }
        }
        xhr.open("GET", "http://v0.yiketianqi.com/free/v2030?city=&cityid=&adcode=130200000000&appid=&appsecret=&lng=&lat=&aqi=&hours=");
        xhr.send();
    }

    Button{
        anchors.centerIn: parent
        onClicked: {
            request()
        }
    }

    TextEdit {
        id: text
        height: 200
        width: 300
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter
    }
}

编辑