在原生 JavaScript 中,可以使用以下几种方式进行请求:
1. **XMLHttpRequest (XHR)**:这是最常见的原生 JavaScript 请求方式之一,可以用来发送 HTTP 请求并获取服务器返回的数据。GET 请求和 POST 请求的参数传递方式稍有不同。
- **GET 请求参数传递**:可以直接将参数附加在 URL 后面,形成查询字符串。例如:
```javascript
var xhr = new XMLHttpRequest();
xhr.open('GET', 'example.com/api?param1=value1¶m2=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¶m2=value2');
```
2. **Fetch API**:Fetch API 提供了更简洁和灵活的方式来进行网络请求,也支持 GET 和 POST 请求。GET 请求和 POST 请求的参数传递方式与 XHR 类似,但是代码更加简洁和现代化。例如:
```javascript
// GET 请求
fetch('example.com/api?param1=value1¶m2=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¶m2=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);
}
以上仅供自己学习记录,如果有哪里不对,还望指出,感谢!!!