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则是一种高效的即时通讯协议。