关于在原生js中的几种发送请求的方式，XHR，Fetch ，Axios，EventSource，长连接

在原生 JavaScript 中，可以使用以下几种方式进行请求：

1. **XMLHttpRequest (XHR)**：这是最常见的原生 JavaScript 请求方式之一，可以用来发送 HTTP 请求并获取服务器返回的数据。GET 请求和 POST 请求的参数传递方式稍有不同。

   - **GET 请求参数传递**：可以直接将参数附加在 URL 后面，形成查询字符串。例如：

     ```javascript
      var xhr = new XMLHttpRequest();
      xhr.open('GET', 'example.com/api?param1=value1&param2=value2', true);
      xhr.send();
      ```

    - **POST 请求参数传递**：需要将参数作为 send 方法的参数传递，通常需要使用 FormData 对象来构造参数。例如：
   

   ```javascript
      var xhr = new XMLHttpRequest();
      xhr.open('POST', 'example.com/api', true);
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      xhr.send('param1=value1&param2=value2');
      ```

2. **Fetch API**：Fetch API 提供了更简洁和灵活的方式来进行网络请求，也支持 GET 和 POST 请求。GET 请求和 POST 请求的参数传递方式与 XHR 类似，但是代码更加简洁和现代化。例如：
   

 ```javascript
    // GET 请求
    fetch('example.com/api?param1=value1&param2=value2')
      .then(response => response.json())
      .then(data => console.log(data));

    // POST 请求
    fetch('example.com/api', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      body: 'param1=value1&param2=value2'
    })
    .then(response => response.json())
    .then(data => console.log(data));
    ```

3. **Axios**：虽然不是原生 JavaScript 的一部分，但是 Axios 是一个常用的第三方库，用于发起 HTTP 请求，提供了更简洁、更易用的 API。GET 请求和 POST 请求的参数传递方式与 Fetch API 类似，但是语法更加清晰和简单。不可以直接使用，需要引入第三方库，地址axios仓库，下面dist文件夹下的min文件，下载后在项目中引入，例如：
 

  ```javascript
    // GET 请求
    axios.get('example.com/api', {
      params: {
        param1: 'value1',
        param2: 'value2'
      }
    })
    .then(response => console.log(response.data))
    .catch(error => console.error(error));

    // POST 请求
    axios.post('example.com/api', {
      param1: 'value1',
      param2: 'value2'
    },
    {
      headers: {
        'Content-Type': 'application/json',
      },
    )
    .then(response => console.log(response.data))
    .catch(error => console.error(error));
    ```

这些是原生 JavaScript 中常用的几种请求方式以及它们的 GET 和 POST 请求参数传递的方法。

4.针对于长连接数据的解析，如果我们要拿到每一条后端返回的数据，则要分为这个请求的请求方式，如果是get，fetch 和 EventSource都可以，如果是post请求，则只能使用fetch，EventSource只支持get请求方式。

EventSource不支持自定义配置，如果有可以参考这个地址

/*
  * new EventSource(url, configuration)
  * url:请求地址路径
  * configuration 可选项：withCredentials，默认为false，指是否CORS设置
  *
  */
  const eventSource = new EventSource('/api/stream');
  // 正常的EventSource，我们只关心以下三个事件
  /*
  * open：订阅成功（和后端连接成功）
  */
  eventSource.addEventListener("open", function(e) {
    console.log('open successfully')
  })
  /*
  * message：后端返回信息，格式可以和后端协商
  */
  eventSource.addEventListener("message", function(e) {
    console.log(e.data)
  })
  /*
  * error：错误（可能是断开，可能是后端返回的信息）
  */
  eventSource.addEventListener("error", function(err) {
    console.log(err)
    // 类似的返回信息验证，这里是实例
    err && err.status === 401 && console.log('not authorized')
  })
  
  // 需要关闭了
  eventSource.close()

主要是讲fetch的方法

let url = 'https://api.example.com/long-connection'; // 替换为实际的长连接数据接口
let headers = {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_ACCESS_TOKEN' // 替换为实际的访问令牌
};
let postData = {
    key1: 'value1',
    key2: 'value2'
};

startButton.addEventListener('click', () => {
    startButton.disabled = true;
    fetchData();
});

async function fetchData() {
    try {
        const response = await fetch(url, {
            method: 'POST',
            headers: headers，
            body: JSON.stringify(postData)
        });

        const reader = response.body.getReader();

        while (true) {
            const { done, value } = await reader.read();

            if (done) {
                break;
            }

            const text = new TextDecoder().decode(value);
            dataContainer.innerText += text;
        }
    } catch (error) {
        console.error('Error fetching data:', error);
    }

 

以上仅供自己学习记录，如果有哪里不对，还望指出，感谢！！！