前端发起请求的5种方式

2024-05-20 08:34
前端
13人已看

好的，以下是针对上述五种方式的代码实现，每种方式都将使用给定的请求地址、请求方法（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);
  });

这些代码示例可以根据你的需要进行调整和修改，确保其中的URL、请求体和请求头与你的实际情况匹配。