详情介绍

使用`XMLHttpRequest`对象
1. 创建一个新的`XMLHttpRequest`实例:
javascript
var xhr = new XMLHttpRequest();
2. 设置请求的类型和URL:
javascript
xhr.open('GET', 'https://example.com/data.json');
3. 设置响应类型和处理函数:
- `responseType`属性设置为`'json'`表示我们期望得到JSON格式的数据。
- `onload`事件处理器用于在请求成功时执行代码。
- `onerror`事件处理器用于在请求失败时执行代码。
4. 发送请求并处理响应:
javascript
xhr.send();
if (xhr.status === 200) {
// 请求成功,处理返回的JSON数据
console.log(xhr.responseText);
} else {
// 请求失败,处理错误信息
console.error('Error: ' + xhr.status);
}
5. 关闭连接:
javascript
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log('Data received');
}
};
使用`fetch` API
1. 导入`fetch`函数:
javascript
import fetch from 'node-fetch';
2. 设置请求的URL:
javascript
fetch('https://example.com/data.json')
3. 处理响应:
- `response`对象包含了响应的所有信息,包括状态码、内容等。
- `then`方法可以链式调用多个回调函数。
- `catch`方法用于捕获网络错误。
4. 示例代码:
javascript
fetch('https://example.com/data.json')
.then(response => response.json()) // 将响应体解析为JSON
.then(data => {
console.log(data); // 处理解析后的JSON数据
})
.catch(error => {
console.error('Error:', error); // 处理网络错误
});
以上是两种常见的异步加载方式的教程。在实际开发中,你可能需要根据具体的应用场景和需求进行调整。