前端发起请求的5种方式

好的，以下是针对上述五种方式的代码实现，每种方式都将使用给定的请求地址、请求方法（POST）、请求体和请求头来发送请求：

XMLHttpRequest (XHR):

var xhr = new XMLHttpRequest();
var url = "https://open.bigmodel.cn/api/paas/v4/chat/completions";
var data = JSON.stringify({model: 'glm-4',messages: [{role: 'user',content: userInputText.value}],stream: true
});
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("Authorization", "Bearer eyJhbGciOiJIUzI1NiIsInNpZ25fdHlwZSI6IlNJR04iLCJ0eXAiOiJKV1QifQ.eyJhcGlfa2V5IjoiZjdkMDU5MDFiNTZjMWE5OWM1OTJhNjFjODMxNWVmMTMiLCJleHAiOjI3MTYxMjA4Njc3MDIsInRpbWVzdGFtcCI6MTcxNjEyMDg2NzcwMn0.BKAqRAnmfqCKTJP2ExI_9G-DB_MBpIJC65xIIGRf_kQ");
xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {var response = JSON.parse(xhr.responseText);console.log(response);}
};
xhr.send(data);

Fetch API:

var url = "https://open.bigmodel.cn/api/paas/v4/chat/completions";
var data = {model: 'glm-4',messages: [{role: 'user',content: userInputText.value}],stream: true
};
fetch(url, {method: 'POST',headers: {'Content-Type': 'application/json','Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInNpZ25fdHlwZSI6IlNJR04iLCJ0eXAiOiJKV1QifQ.eyJhcGlfa2V5IjoiZjdkMDU5MDFiNTZjMWE5OWM1OTJhNjFjODMxNWVmMTMiLCJleHAiOjI3MTYxMjA4Njc3MDIsInRpbWVzdGFtcCI6MTcxNjEyMDg2NzcwMn0.BKAqRAnmfqCKTJP2ExI_9G-DB_MBpIJC65xIIGRf_kQ'},body: JSON.stringify(data)
})
.then(response => response.json())
.then(data => {console.log(data);
})
.catch(error => {console.error('Error:', error);
});

Ajax:

var url = "https://open.bigmodel.cn/api/paas/v4/chat/completions";
var data = {model: 'glm-4',messages: [{role: 'user',content: userInputText.value}],stream: true
};
var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("Authorization", "Bearer eyJhbGciOiJIUzI1NiIsInNpZ25fdHlwZSI6IlNJR04iLCJ0eXAiOiJKV1QifQ.eyJhcGlfa2V5IjoiZjdkMDU5MDFiNTZjMWE5OWM1OTJhNjFjODMxNWVmMTMiLCJleHAiOjI3MTYxMjA4Njc3MDIsInRpbWVzdGFtcCI6MTcxNjEyMDg2NzcwMn0.BKAqRAnmfqCKTJP2ExI_9G-DB_MBpIJC65xIIGRf_kQ");
xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {var response = JSON.parse(xhr.responseText);console.log(response);}
};
xhr.send(JSON.stringify(data));

WebSocket:

var socket = new WebSocket("wss://open.bigmodel.cn/api/paas/v4/chat/completions");
var data = {model: 'glm-4',messages: [{role: 'user',content: userInputText.value}],stream: true
};
socket.onopen = function (event) {socket.send(JSON.stringify(data));
};
socket.onmessage = function (event) {var response = JSON.parse(event.data);console.log(response);
};

Axios:

var axios = require('axios');
var url = "https://open.bigmodel.cn/api/paas/v4/chat/completions";
var data = {model: 'glm-4',messages: [{role: 'user',content: userInputText.value}],stream: true
};
var config = {headers: {'Content-Type': 'application/json','Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInNpZ25fdHlwZSI6IlNJR04iLCJ0eXAiOiJKV1QifQ.eyJhcGlfa2V5IjoiZjdkMDU5MDFiNTZjMWE5OWM1OTJhNjFjODMxNWVmMTMiLCJleHAiOjI3MTYxMjA4Njc3MDIsInRpbWVzdGFtcCI6MTcxNjEyMDg2NzcwMn0.BKAqRAnmfqCKTJP2ExI_9G-DB_MBpIJC65xIIGRf_kQ'}
};
axios.post(url, data, config).then(function (response) {console.log(response.data);}).catch(function (error) {console.log(error);});