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

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

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

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

复制代码

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

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

复制代码

2. **Fetch API**：Fetch API 提供了更简洁和机动的方式来举行网络请求，也支持 GET 和 POST 请求。GET 请求和 POST 请求的参数传递方式与 XHR 雷同，但是代码更加简洁和当代化。例如：
   

1. ```javascript
2.     // GET 请求
3.     fetch('example.com/api?param1=value1&param2=value2')
4.       .then(response => response.json())
5.       .then(data => console.log(data));
7.     // POST 请求
8.     fetch('example.com/api', {
9.       method: 'POST',
10.       headers: {
11.         'Content-Type': 'application/x-www-form-urlencoded'
12.       },
13.       body: 'param1=value1&param2=value2'
14.     })
15.     .then(response => response.json())
16.     .then(data => console.log(data));
17.     ```

复制代码

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

1.   ```javascript
2.     // GET 请求
3.     axios.get('example.com/api', {
4.       params: {
5.         param1: 'value1',
6.         param2: 'value2'
7.       }
8.     })
9.     .then(response => console.log(response.data))
10.     .catch(error => console.error(error));
12.     // POST 请求
13.     axios.post('example.com/api', {
14.       param1: 'value1',
15.       param2: 'value2'
16.     },
17.     {
18.       headers: {
19.         'Content-Type': 'application/json',
20.       },
21.     )
22.     .then(response => console.log(response.data))
23.     .catch(error => console.error(error));
24.     ```

复制代码

这些是原生 JavaScript 中常用的几种请求方式以及它们的 GET 和 POST 请求参数传递的方法。
4.针对于长毗连数据的剖析，如果我们要拿到每一条后端返回的数据，则要分为这个请求的请求方式，如果是get，fetch 和 EventSource都可以，如果是post请求，则只能使用fetch，EventSource只支持get请求方式。

EventSource不支持自界说设置，如果有可以参考这个地址

1. /*
2.   * new EventSource(url, configuration)
3.   * url:请求地址路径
4.   * configuration 可选项：withCredentials，默认为false，指是否CORS设置
5.   *
6.   */
7.   const eventSource = new EventSource('/api/stream');
8.   // 正常的EventSource，我们只关心以下三个事件
9.   /*
10.   * open：订阅成功（和后端连接成功）
11.   */
12.   eventSource.addEventListener("open", function(e) {
13.     console.log('open successfully')
14.   })
15.   /*
16.   * message：后端返回信息，格式可以和后端协商
17.   */
18.   eventSource.addEventListener("message", function(e) {
19.     console.log(e.data)
20.   })
21.   /*
22.   * error：错误（可能是断开，可能是后端返回的信息）
23.   */
24.   eventSource.addEventListener("error", function(err) {
25.     console.log(err)
26.     // 类似的返回信息验证，这里是实例
27.     err && err.status === 401 && console.log('not authorized')
28.   })
29.   
30.   // 需要关闭了
31.   eventSource.close()

复制代码

主要是讲fetch的方法

1. let url = 'https://api.example.com/long-connection'; // 替换为实际的长连接数据接口
2. let headers = {
3.     'Content-Type': 'application/json',
4.     'Authorization': 'Bearer YOUR_ACCESS_TOKEN' // 替换为实际的访问令牌
5. };
6. let postData = {
7.     key1: 'value1',
8.     key2: 'value2'
9. };
11. startButton.addEventListener('click', () => {
12.     startButton.disabled = true;
13.     fetchData();
14. });
16. async function fetchData() {
17.     try {
18.         const response = await fetch(url, {
19.             method: 'POST',
20.             headers: headers，
21.             body: JSON.stringify(postData)
22.         });
24.         const reader = response.body.getReader();
26.         while (true) {
27.             const { done, value } = await reader.read();
29.             if (done) {
30.                 break;
31.             }
33.             const text = new TextDecoder().decode(value);
34.             dataContainer.innerText += text;
35.         }
36.     } catch (error) {
37.         console.error('Error fetching data:', error);
38.     }

复制代码

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。