ThinkPHP6 + Vue.js: 不使用Fetch的數據請求方法

本文將介紹如何在ThinkPHP6和Vue.js中進行數據請求，同時避免使用Fetch函數。

一、AJAX：XMLHttpRequest的基礎使用

在進行數據請求時，最基礎的方式就是使用XMLHttpRequest對象。XMLHttpRequest對象用於在後台與服務器交換數據，如前台向服務器發送數據並接受響應結果。

首先在後端，我們可以通過自定義一個接口響應請求數據，如：

public function request(){
    $data = ['data1', 'data2', 'data3'];
    return json($data);
}

然後在前端，我們可以定義一個data對象，並使用ajax請求獲取數據，如：

data() {
    return {
        dataList: []
    }
},
mounted() {
    let xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://localhost:8000/request', true);
    xhr.onreadystatechange = function(){
        if (xhr.readyState == 4 && xhr.status == 200){
            this.dataList = JSON.parse(xhr.responseText);
        }
    };
    xhr.send();
}

二、Axios庫：Promise的使用

除了XMLHttpRequest之外，我們還可以使用Axios庫進行數據請求。Axios是一個基於Promise的HTTP請求庫，可以用於瀏覽器和Node.js。

在後端，我們同樣需要自定義一個用於響應請求的接口，如：

public function request(){
    $data = ['data1', 'data2', 'data3'];
    return json($data);
}

在前端，我們首先引入Axios庫，並定義一個data對象：

data() {
    return {
        dataList: []
    }
},
mounted() {
    axios.get('http://localhost:8000/request')
    .then(response => {
        this.dataList = response.data;
    })
    .catch(error => {
        console.log(error);
    });
}

三、WebSocket：即時通訊的數據請求

最後，我們介紹WebSocket，WebSocket是一個高效的即時通訊協議，可以使用它進行數據請求。

在後端，我們需要自定義一個websocket服務，如：

public function onRequest(Request $request){
    $server = IoServer::factory(new HttpServer(new WsServer(new RequestController())), 8080);
    $server->run();
}

在前端，我們需要使用WebSocket對象中的onopen和onmessage事件，如：

data() {
    return {
        dataList: []
    }
},
mounted() {
    let ws = new WebSocket('ws://localhost:8080');
    ws.onopen = function(){
        ws.send('request');
    };
    ws.onmessage = function(event){
        this.dataList = JSON.parse(event.data);
    };
}

四、總結

通過以上三種方法，我們可以實現在ThinkPHP6和Vue.js中進行數據請求，同時避免使用Fetch函數。XMLHttpRequest是一種較為簡單的方式，Axios使用Promise進行請求和響應，WebSocket則是一種高效的即時通訊協議。