\u5728 QML \u8fdb\u9636（\u4e00）\u4e2d，\u6211\u4eec\u5df2\u7ecf\u638c\u63e1\u4e86\u5c5e\u6027\u7ed1\u5b9a\u3001\u81ea\u5b9a\u4e49\u7ec4\u4ef6\u3001\u72b6\u6001\u4e0e\u52a8\u753b\u3001\u6a21\u578b\u89c6\u56fe\u7b49\u57fa\u7840\u80fd\u529b\u3002\u6b64\u65f6\u4f60\u5927\u6982\u7387\u5df2\u7ecf\u80fd\u5199\u51fa\u4e00\u4e2a\u201c\u80fd\u8dd1\u8d77\u6765\u201d\u7684\u754c\u9762，\u4f46\u771f\u6b63\u8fdb\u5165\u9879\u76ee\u5f00\u53d1\u540e，\u95ee\u9898\u4f1a\u96c6\u4e2d\u51fa\u73b0\u5728\u4e09\u4e2a\u65b9\u5411：<\/p>\n
\u672c\u6587\u5c31\u56f4\u7ed5\u8fd9\u4e09\u6761\u4e3b\u7ebf\u5c55\u5f00，\u5c3d\u91cf\u628a\u201c\u4e3a\u4ec0\u4e48\u201d\u8bb2\u6e05\u695a，\u518d\u7ed9\u51fa\u201c\u600e\u4e48\u505a\u201d\u7684\u4ee3\u7801\u793a\u4f8b，\u5e2e\u52a9\u4f60\u4e3a\u540e\u7eed\u7684\u4e2d\u5927\u578b QML \u9879\u76ee\u6253\u4e0b\u57fa\u7840\u3002<\/p>\n
QML \u7684\u754c\u9762\u6e32\u67d3\u548c JavaScript \u903b\u8f91\u9ed8\u8ba4\u90fd\u8fd0\u884c\u5728\u4e3b\u7ebf\u7a0b（GUI \u7ebf\u7a0b）\u4e0a\u3002\u4efb\u4f55\u8017\u65f6\u64cd\u4f5c\u2014\u2014\u5927\u6587\u4ef6\u8bfb\u53d6\u3001\u590d\u6742\u8ba1\u7b97\u3001\u7f51\u7edc\u8bf7\u6c42\u7684\u540c\u6b65\u7b49\u5f85\u2014\u2014\u90fd\u4f1a\u76f4\u63a5\u963b\u585e\u4e3b\u7ebf\u7a0b，\u8868\u73b0\u4e3a\u754c\u9762\u5361\u6b7b\u3001\u52a8\u753b\u505c\u987f\u3001\u70b9\u51fb\u65e0\u54cd\u5e94\u3002<\/p>\n
\u56e0\u6b64 QML \u4e2d\u7684\u5f02\u6b65\u624b\u6bb5\u4e3b\u8981\u89e3\u51b3\u4e24\u7c7b\u95ee\u9898：<\/p>\n
QML \u91cc\u7684\u201c\u8f7b\u91cf\u7ea7\u7ebf\u7a0b\u201d，WorkerScript \u5141\u8bb8\u4f60\u5728\u4e00\u4e2a\u72ec\u7acb\u7684 JavaScript \u7ebf\u7a0b\u4e2d\u6267\u884c\u811a\u672c，\u4e3b\u7ebf\u7a0b\u901a\u8fc7\u6d88\u606f\u4e0e\u5b83\u901a\u4fe1\u3002\u5b83\u9002\u5408\u5904\u7406\u7eaf JS \u7684\u8017\u65f6\u8ba1\u7b97，\u6bd4\u5982\u6570\u636e\u89e3\u6790\u3001\u6279\u91cf\u683c\u5f0f\u5316\u3001\u52a0\u5bc6\u54c8\u5e0c\u7b49\u3002<\/p>\n
\u57fa\u672c\u7528\u6cd5：\u5148\u51c6\u5907\u4e00\u4e2a worker \u811a\u672c\u6587\u4ef6 work.js：<\/p>\n
\/\/ work.js
\nWorkerScript.onMessage = function (message) {
\n \/\/ \u6a21\u62df\u8017\u65f6\u8ba1\u7b97
\n var total = 0;
\n for (var i = 0; i < message.count; i++) {
\n total += Math.sqrt(i);
\n }
\n \/\/ \u628a\u7ed3\u679c\u56de\u4f20\u7ed9\u4e3b\u7ebf\u7a0b
\n WorkerScript.sendMessage({ result: total });
\n};<\/p>\n
\u4e3b\u7ebf\u7a0b\u4fa7\u8fd9\u6837\u4f7f\u7528：<\/p>\n
import QtQuick 2.15<\/p>\n
Item {
\n WorkerScript {
\n id: worker
\n source: "work.js"
\n onMessage: function (messageObject) {
\n console.log("\u8ba1\u7b97\u7ed3\u679c：", messageObject.result)
\n }
\n }<\/p>\n
Component.onCompleted: {
\n worker.sendMessage({ count: 1000000 })
\n }
\n}<\/p>\n
\u5173\u952e\u8981\u70b9：<\/p>\n
QML \u7684 JavaScript \u73af\u5883\u5185\u7f6e\u4e86 XMLHttpRequest，\u53ef\u4ee5\u76f4\u63a5\u53d1\u8d77\u5f02\u6b65 HTTP \u8bf7\u6c42，\u9002\u5408\u8f7b\u91cf\u7ea7\u63a5\u53e3\u8c03\u7528\u3002<\/p>\n
import QtQuick 2.15<\/p>\n
Item {
\n function fetchUser(id) {
\n var xhr = new XMLHttpRequest()
\n xhr.open("GET", "https:\/\/api.example.com\/users\/" + id, true)
\n xhr.onreadystatechange = function () {
\n if (xhr.readyState === XMLHttpRequest.DONE) {
\n if (xhr.status === 200) {
\n var data = JSON.parse(xhr.responseText)
\n console.log("\u7528\u6237\u540d：", data.name)
\n } else {
\n console.warn("\u8bf7\u6c42\u5931\u8d25，\u72b6\u6001\u7801：", xhr.status)
\n }
\n }
\n }
\n xhr.setRequestHeader("Accept", "application\/json")
\n xhr.send()
\n }<\/p>\n
Component.onCompleted: fetchUser(1)
\n}<\/p>\n
\u4f7f\u7528\u5efa\u8bae：<\/p>\n
\u5f53\u9879\u76ee\u9700\u8981\u7edf\u4e00\u7ba1\u7406\u8bf7\u6c42\u5934\u3001\u9274\u6743\u3001\u91cd\u8bd5\u3001\u8d85\u65f6\u3001\u5e76\u53d1\u63a7\u5236\u65f6，\u63a8\u8350\u5728 C++ \u4fa7\u4f7f\u7528 QNetworkAccessManager \u5c01\u88c5\u7f51\u7edc\u5c42，\u518d\u901a\u8fc7 Q_INVOKABLE \u65b9\u6cd5\u6216\u4fe1\u53f7\u66b4\u9732\u7ed9 QML\u3002<\/p>\n
\u7b2c\u4e00\u6b65：\u5b9a\u4e49\u7f51\u7edc\u7ba1\u7406\u7c7b<\/p>\n
\/\/ NetworkManager.h
\n#ifndef NETWORKMANAGER_H
\n#define NETWORKMANAGER_H<\/p>\n
#include <QObject>
\n#include <QNetworkAccessManager>
\n#include <QNetworkReply><\/p>\n
class NetworkManager : public QObject
\n{
\n Q_OBJECT
\npublic:
\n explicit NetworkManager(QObject *parent = nullptr);<\/p>\n
Q_INVOKABLE void get(const QString &url);<\/p>\n
signals:
\n void requestFinished(const QString &url, const QString &body);
\n void requestFailed(const QString &url, const QString &error);<\/p>\n
private:
\n QNetworkAccessManager m_manager;
\n};<\/p>\n
#endif \/\/ NETWORKMANAGER_H<\/p>\n
\/\/ NetworkManager.cpp
\n#include "NetworkManager.h"<\/p>\n
NetworkManager::NetworkManager(QObject *parent)
\n : QObject(parent)
\n{
\n}<\/p>\n
void NetworkManager::get(const QString &url)
\n{
\n QNetworkRequest request{QUrl(url)};
\n request.setHeader(QNetworkRequest::ContentTypeHeader, "application\/json");<\/p>\n
QNetworkReply *reply = m_manager.get(request);<\/p>\n
connect(reply, &QNetworkReply::finished, this, [this, reply, url]() {
\n if (reply->error() == QNetworkReply::NoError) {
\n emit requestFinished(url, QString::fromUtf8(reply->readAll()));
\n } else {
\n emit requestFailed(url, reply->errorString());
\n }
\n reply->deleteLater();
\n });
\n}<\/p>\n
\u7b2c\u4e8c\u6b65：\u6ce8\u518c\u5230 QML \u4e0a\u4e0b\u6587<\/p>\n
\/\/ main.cpp
\n#include <QGuiApplication>
\n#include <QQmlApplicationEngine>
\n#include <QQmlContext>
\n#include "NetworkManager.h"<\/p>\n
int main(int argc, char *argv[])
\n{
\n QGuiApplication app(argc, argv);<\/p>\n
NetworkManager network;
\n QQmlApplicationEngine engine;
\n engine.rootContext()->setContextProperty("network", &network);
\n engine.load(QUrl(QStringLiteral("qrc:\/main.qml")));<\/p>\n
return app.exec();
\n}<\/p>\n
\u7b2c\u4e09\u6b65：\u5728 QML \u4e2d\u8c03\u7528<\/p>\n
import QtQuick 2.15<\/p>\n
Item {
\n Connections {
\n target: network
\n function onRequestFinished(url, body) {
\n console.log("\u54cd\u5e94：", url, body)
\n }
\n function onRequestFailed(url, error) {
\n console.warn("\u5931\u8d25：", url, error)
\n }
\n }<\/p>\n
Component.onCompleted: network.get("https:\/\/api.example.com\/users\/1")
\n}<\/p>\n
\u7b2c\u56db\u6b65：\u8d85\u65f6\u4e0e\u91cd\u8bd5<\/p>\n
\u771f\u5b9e\u7f51\u7edc\u73af\u5883\u91cc，\u8bf7\u6c42\u53ef\u80fd\u56e0\u4e3a\u5f31\u7f51\u3001\u670d\u52a1\u7aef\u6296\u52a8\u800c\u957f\u65f6\u95f4\u6302\u8d77\u3002\u751f\u4ea7\u7ea7\u7f51\u7edc\u5c42\u5fc5\u987b\u7ed9\u6bcf\u4e2a\u8bf7\u6c42\u8bbe\u7f6e\u8d85\u65f6，\u5e76\u5728\u5931\u8d25\u540e\u6309\u7b56\u7565\u91cd\u8bd5\u3002\u4e0b\u9762\u5728 NetworkManager \u4e2d\u5f15\u5165 QTimer \u5b9e\u73b0 5 \u79d2\u8d85\u65f6，\u5931\u8d25\u540e\u6700\u591a\u91cd\u8bd5 2 \u6b21\u3002<\/p>\n
\u5148\u6269\u5c55\u5934\u6587\u4ef6，\u589e\u52a0\u91cd\u8bd5\u6b21\u6570\u53c2\u6570\u4e0e\u5185\u90e8\u8bf7\u6c42\u65b9\u6cd5：<\/p>\n
\/\/ NetworkManager.h
\n#ifndef NETWORKMANAGER_H
\n#define NETWORKMANAGER_H<\/p>\n
#include <QObject>
\n#include <QNetworkAccessManager>
\n#include <QNetworkReply>
\n#include <QTimer><\/p>\n
class NetworkManager : public QObject
\n{
\n Q_OBJECT
\npublic:
\n explicit NetworkManager(QObject *parent = nullptr);<\/p>\n
\/\/ retries \u8868\u793a\u201c\u5931\u8d25\u540e\u8fd8\u80fd\u518d\u8bd5\u51e0\u6b21\u201d，\u9ed8\u8ba4 2 \u6b21
\n Q_INVOKABLE void get(const QString &url, int retries = 2);<\/p>\n
signals:
\n void requestFinished(const QString &url, const QString &body);
\n void requestFailed(const QString &url, const QString &error);<\/p>\n
private:
\n void doGet(const QString &url, int retriesLeft);<\/p>\n
QNetworkAccessManager m_manager;
\n static constexpr int kTimeoutMs = 5000; \/\/ 5 \u79d2\u8d85\u65f6
\n};<\/p>\n
#endif \/\/ NETWORKMANAGER_H<\/p>\n
\u5b9e\u73b0\u90e8\u5206：\u6bcf\u6b21\u8bf7\u6c42\u90fd\u6302\u4e00\u4e2a QTimer，\u8d85\u65f6\u540e\u8c03\u7528 reply->abort()；\u5728 finished \u56de\u8c03\u91cc\u7edf\u4e00\u5224\u65ad\u662f\u5426\u9700\u8981\u91cd\u8bd5\u3002<\/p>\n
\/\/ NetworkManager.cpp
\n#include "NetworkManager.h"<\/p>\n
NetworkManager::NetworkManager(QObject *parent)
\n : QObject(parent)
\n{
\n}<\/p>\n
void NetworkManager::get(const QString &url, int retries)
\n{
\n doGet(url, retries);
\n}<\/p>\n
void NetworkManager::doGet(const QString &url, int retriesLeft)
\n{
\n QNetworkRequest request{QUrl(url)};
\n request.setHeader(QNetworkRequest::ContentTypeHeader, "application\/json");<\/p>\n
QNetworkReply *reply = m_manager.get(request);<\/p>\n
\/\/ 1. \u4e3a\u672c\u6b21\u8bf7\u6c42\u521b\u5efa\u8d85\u65f6\u5b9a\u65f6\u5668
\n QTimer *timer = new QTimer(reply);
\n timer->setSingleShot(true);
\n timer->setInterval(kTimeoutMs);<\/p>\n
connect(timer, &QTimer::timeout, reply, [reply]() {
\n \/\/ \u8d85\u65f6\u540e\u4e3b\u52a8\u4e2d\u65ad，\u4f1a\u89e6\u53d1 finished \u4fe1\u53f7，error \u4e3a OperationCanceledError
\n reply->abort();
\n });
\n timer->start();<\/p>\n
\/\/ 2. \u8bf7\u6c42\u7ed3\u675f（\u6210\u529f\u3001\u5931\u8d25\u6216\u8d85\u65f6）\u7edf\u4e00\u5904\u7406
\n connect(reply, &QNetworkReply::finished, this, [this, reply, url, retriesLeft]() {
\n reply->deleteLater();<\/p>\n
if (reply->error() == QNetworkReply::NoError) {
\n emit requestFinished(url, QString::fromUtf8(reply->readAll()));
\n return;
\n }<\/p>\n
\/\/ 3. \u5931\u8d25\u540e\u5224\u65ad\u662f\u5426\u8fd8\u80fd\u91cd\u8bd5
\n if (retriesLeft > 0) {
\n qWarning() << "\u8bf7\u6c42\u5931\u8d25，\u51c6\u5907\u91cd\u8bd5：" << url
\n << "\u5269\u4f59\u91cd\u8bd5\u6b21\u6570：" << retriesLeft
\n << "\u539f\u56e0：" << reply->errorString();
\n doGet(url, retriesLeft – 1);
\n } else {
\n emit requestFailed(url, reply->errorString());
\n }
\n });
\n}<\/p>\n
\u5b9e\u73b0\u8981\u70b9：<\/p>\n
QML \u4fa7\u7edf\u4e00\u63d0\u793a\u7528\u6237：\u91cd\u8bd5\u5168\u90e8\u5931\u8d25\u540e，C++ \u4fa7\u53ea\u4f1a\u53d1\u51fa\u4e00\u6b21 requestFailed，QML \u53ea\u9700\u5728 Connections \u4e2d\u96c6\u4e2d\u5904\u7406，\u5c31\u80fd\u4fdd\u8bc1\u7528\u6237\u4e0d\u4f1a\u770b\u5230\u91cd\u590d\u7684\u9519\u8bef\u5f39\u7a97\u3002<\/p>\n
import QtQuick 2.15
\nimport QtQuick.Controls 2.15<\/p>\n
Item {
\n id: root<\/p>\n
\/\/ \u7edf\u4e00\u7684\u9519\u8bef\u63d0\u793a\u6761
\n Rectangle {
\n id: errorBar
\n anchors.top: parent.top
\n anchors.left: parent.left
\n anchors.right: parent.right
\n height: 40
\n color: "#fdecea"
\n visible: false<\/p>\n
Text {
\n id: errorText
\n anchors.centerIn: parent
\n color: "#c0392b"
\n font.pixelSize: 14
\n }<\/p>\n
Timer {
\n id: hideTimer
\n interval: 3000
\n onTriggered: errorBar.visible = false
\n }
\n }<\/p>\n
Connections {
\n target: network<\/p>\n
function onRequestFinished(url, body) {
\n console.log("\u54cd\u5e94：", url, body)
\n }<\/p>\n
function onRequestFailed(url, error) {
\n \/\/ \u91cd\u8bd5\u5df2\u8017\u5c3d，\u8fd9\u91cc\u53ea\u63d0\u793a\u4e00\u6b21
\n errorText.text = qsTr("\u7f51\u7edc\u8bf7\u6c42\u5931\u8d25：%1").arg(error)
\n errorBar.visible = true
\n hideTimer.restart()
\n }
\n }<\/p>\n
Component.onCompleted: network.get("https:\/\/api.example.com\/users\/1")
\n}<\/p>\n
\u8fd9\u6837\u5206\u5c42\u7684\u597d\u5904\u662f：\u91cd\u8bd5\u4e0e\u8d85\u65f6\u5c5e\u4e8e\u7f51\u7edc\u5c42\u804c\u8d23，QML \u4e0d\u9700\u8981\u5173\u5fc3\u5185\u90e8\u91cd\u8bd5\u4e86\u51e0\u6b21，\u53ea\u8d1f\u8d23\u628a\u6700\u7ec8\u5931\u8d25\u7ed3\u679c\u4ee5\u7edf\u4e00\u65b9\u5f0f\u5448\u73b0\u7ed9\u7528\u6237，\u754c\u9762\u903b\u8f91\u4fdd\u6301\u5e72\u51c0\u3002<\/p>\n
\u4e3a\u4ec0\u4e48\u63a8\u8350 C++ \u7f51\u7edc\u5c42：<\/p>\n
WorkerScript\u3001XMLHttpRequest \u548c C++ \u4fa7\u7684 QNetworkAccessManager \u89e3\u51b3\u7684\u662f\u4e0d\u540c\u5c42\u9762\u7684\u95ee\u9898，\u4e0b\u9762\u4ece\u4e94\u4e2a\u7ef4\u5ea6\u505a\u4e00\u6b21\u6a2a\u5411\u5bf9\u6bd4，\u65b9\u4fbf\u5728\u5b9e\u9645\u9879\u76ee\u4e2d\u5feb\u901f\u9009\u578b\u3002<\/p>\n
| \u9002\u7528\u573a\u666f<\/td>\n | \u7eaf JS \u7684\u8017\u65f6\u8ba1\u7b97，\u5982\u6570\u636e\u89e3\u6790\u3001\u6279\u91cf\u683c\u5f0f\u5316\u3001\u54c8\u5e0c\u8ba1\u7b97<\/td>\n | \u8f7b\u91cf\u7ea7 HTTP \u63a5\u53e3\u8c03\u7528，\u5982\u83b7\u53d6\u914d\u7f6e\u3001\u62c9\u53d6\u7b80\u5355\u5217\u8868<\/td>\n | \u751f\u4ea7\u7ea7\u7f51\u7edc\u5c42，\u5982\u7edf\u4e00\u9274\u6743\u3001\u91cd\u8bd5\u3001\u8d85\u65f6\u3001\u5e76\u53d1\u63a7\u5236<\/td>\n<\/tr>\n |
| \u662f\u5426\u963b\u585e UI<\/td>\n | \u4e0d\u963b\u585e，\u8ba1\u7b97\u5728\u72ec\u7acb worker \u7ebf\u7a0b\u6267\u884c<\/td>\n | \u5f02\u6b65\u6a21\u5f0f\u4e0d\u963b\u585e；\u82e5\u8bef\u7528\u540c\u6b65\u8bf7\u6c42\u5219\u4f1a\u963b\u585e UI<\/td>\n | \u4e0d\u963b\u585e，\u57fa\u4e8e\u4e8b\u4ef6\u5faa\u73af\u4e0e\u4fe1\u53f7\u69fd\u56de\u8c03<\/td>\n<\/tr>\n |
| \u6570\u636e\u4f20\u9012\u65b9\u5f0f<\/td>\n | sendMessage \/ onMessage \u4f20\u9012\u53ef\u5e8f\u5217\u5316\u6570\u636e，\u6309\u503c\u590d\u5236<\/td>\n | \u56de\u8c03\u4e2d\u8bfb\u53d6 responseText，\u9700\u81ea\u884c\u89e3\u6790 JSON<\/td>\n | \u4fe1\u53f7\u643a\u5e26 QString \/ QByteArray，\u53ef\u81ea\u5b9a\u4e49\u7ed3\u6784\u4f53\u4e0e\u6a21\u578b<\/td>\n<\/tr>\n |
| \u80fd\u529b\u4e0a\u9650<\/td>\n | \u4e0d\u80fd\u8bbf\u95ee QML \u5bf9\u8c61，\u5355\u5b9e\u4f8b\u5355\u7ebf\u7a0b，\u4efb\u52a1\u6392\u961f\u6267\u884c<\/td>\n | \u4e0d\u652f\u6301\u8fde\u63a5\u590d\u7528\u3001\u62e6\u622a\u5668\u3001\u4e0a\u4f20\u8fdb\u5ea6\u7b49\u9ad8\u7ea7\u7279\u6027<\/td>\n | \u652f\u6301\u8fde\u63a5\u590d\u7528\u3001\u4ee3\u7406\u3001SSL \u914d\u7f6e\u3001\u8d85\u65f6\u91cd\u8bd5\u4e0e\u62e6\u622a\u5668<\/td>\n<\/tr>\n |
| \u63a8\u8350\u4f7f\u7528\u65f6\u673a<\/td>\n | \u8ba1\u7b97\u5bc6\u96c6\u4f46\u6570\u636e\u91cf\u4e0d\u5927，\u4e14\u903b\u8f91\u53ef\u5b8c\u5168\u7528 JS \u8868\u8fbe\u65f6<\/td>\n | \u539f\u578b\u9a8c\u8bc1\u3001\u5c11\u91cf\u7b80\u5355\u63a5\u53e3\u3001\u65e0\u9700\u7edf\u4e00\u6cbb\u7406\u7684\u573a\u666f<\/td>\n | \u4e2d\u5927\u578b\u9879\u76ee\u3001\u9700\u8981\u7edf\u4e00\u7f51\u7edc\u89c4\u8303\u4e0e\u53ef\u6d4b\u8bd5\u6027\u65f6<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n \u9009\u578b\u7ed3\u8bba：\u7eaf\u8ba1\u7b97\u7528 WorkerScript，\u7b80\u5355\u8bf7\u6c42\u7528 XMLHttpRequest，\u4e00\u65e6\u6d89\u53ca\u9274\u6743\u3001\u8d85\u65f6\u3001\u91cd\u8bd5\u3001\u5e76\u53d1\u7b49\u7edf\u4e00\u6cbb\u7406\u9700\u6c42，\u5c31\u5e94\u628a\u7f51\u7edc\u5c42\u4e0b\u6c89\u5230 C++ \u7684 QNetworkAccessManager，QML \u53ea\u8d1f\u8d23\u5c55\u793a\u7ed3\u679c\u3002<\/p>\n 3. \u6027\u80fd\u4f18\u5316<\/h3>\n |