ToB企服应用市场:ToB评测及商务社交产业平台

标题: 关于在原生js中的几种发送请求的方式，XHR，Fetch ，Axios，EventSource， [打印本页]
作者: 魏晓东    时间: 2024-7-30 19:45
标题: 关于在原生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企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4