1. 使用 Fetch API（现代浏览器推荐）
Fetch API 是现代浏览器提供的原生接口，使用 Promise 实现异步请求：
javascript
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json(); // 解析 JSON 数据
})
.then(data => {
console.log('成功获取数据:', data);
})
.catch(error => {
console.error('请求出错:', error);
});
// 带查询参数的 GET 请求
const queryParams = {
page: 2,
limit: 10
};
const queryString = new URLSearchParams(queryParams).toString();
fetch(`https://api.example.com/data?${queryString}`)
.then(response => response.json())
.then(data => console.log(data));
2. 使用 async/await（更简洁的写法）
结合 `async/await` 语法可以让代码更易读：
javascript
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
console.log('获取的数据:', data);
return data;
} catch (error) {
console.error('请求失败:', error);
}
}
// 调用异步函数
fetchData();
3. 使用 XMLHttpRequest（旧版浏览器兼容）
这是较传统的方式，兼容性好但代码更繁琐：
javascript
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
console.log('响应数据:', data);
} else {
console.error('请求失败，状态码:', xhr.status);
}
}
};
xhr.onerror = function() {
console.error('网络错误');
};
xhr.send();
4. 使用 Axios 库（需要引入）
Axios 是流行的第三方库，提供更简洁的 API 和自动转换 JSON 等功能：
javascript
// 首先需要引入 axios（可通过 npm 安装或 CDN）
// <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
axios.get('https://api.example.com/data')
.then(response => {
console.log('响应数据:', response.data);
})
.catch(error => {
console.error('请求错误:', error);
});
// 带参数的请求
axios.get('https://api.example.com/data', {
params: {
page: 2,
limit: 10
}
})
.then(response => console.log(response.data));
选择建议
- **推荐使用 Fetch API**：现代浏览器原生支持，无需额外依赖
- **复杂场景可使用 Axios**：提供更多高级功能（拦截器、取消请求等）
- **兼容性要求高时用 XMLHttpRequest**：支持老旧浏览器
无论使用哪种方式，发送 GET 请求时都需要注意处理跨域问题（CORS）、错误处理和请求参数的编码。