js 发送get请求的3种常见方式:Fetch API、XMLHttpRequest、Axios

发布时间:2025-05-12      访问量:56
在 JavaScript 中发送 GET 请求有多种方式,下面为你介绍几种常见的实现方法:

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)、错误处理和请求参数的编码。
堆内存
多线程
strdup
初始化器
冒泡排序
增删改查
BufferedReader
输入输出
面向对象
生命周期
闭包的概念
原型链
Flask
mysql-connector-python
单例模式
浅拷贝
隔离级别
索引
InnoDB
左连接
聚合函数
PuTTY
TRUNCATE
str_starts_with_many
DateTime
array_combine
闭包的概念