轻松掌握：用JavaScript高效请求JSON数据，5分钟学会网络请求全攻略

在Web开发中，处理JSON数据是家常便饭。JavaScript提供了多种方式来请求和获取JSON数据。本篇文章将带你快速掌握使用JavaScript进行网络请求的技巧，让你在5分钟内成为高效处理JSON数据的专家。

1. 使用原生的`XMLHttpRequest`

XMLHttpRequest是JavaScript中最传统的网络请求方式，虽然现代开发中已经很少使用，但了解其基本用法仍然很有必要。

1.1 创建`XMLHttpRequest`对象

var xhr = new XMLHttpRequest();

1.2 配置请求

xhr.open('GET', 'https://api.example.com/data', true);

这里，GET表示请求类型，https://api.example.com/data是请求的URL，true表示异步请求。

1.3 设置响应类型

xhr.responseType = 'json';

将响应类型设置为json，这样响应体将自动被解析为JSON对象。

1.4 设置请求完成后的回调函数

xhr.onload = function() { if (xhr.status >= 200 && xhr.status < 300) { console.log(xhr.response); } else { console.error('The request was completed but with an error:', xhr.statusText); } };

这里，xhr.onload会在请求完成时执行。如果响应状态码在200到299之间，表示请求成功，我们可以通过xhr.response访问到JSON数据。

1.5 发送请求

xhr.send();

完成以上步骤后，调用send方法发送请求。

2. 使用现代的`fetch` API

fetch是现代浏览器提供的一个用于网络请求的API，它基于Promise，使用起来更加简洁。

2.1 发起一个`fetch`请求

fetch('https://api.example.com/data') .then(response => { if (!response.ok) { throw new Error('Network response was not ok ' + response.statusText); } return response.json(); }) .then(data => { console.log(data); }) .catch(error => { console.error('There has been a problem with your fetch operation:', error); });

这里，fetch返回一个Promise对象，它将在请求完成时解析为响应对象。我们使用.then()来处理响应，并使用.catch()来捕获可能发生的错误。

3. 使用第三方库（如`axios`）

虽然不是原生的JavaScript，但第三方库如axios提供了更加丰富的功能和更好的错误处理。

3.1 安装`axios`

npm install axios

3.2 使用`axios`发起请求

axios.get('https://api.example.com/data') .then(response => { console.log(response.data); }) .catch(error => { console.error('Error fetching data:', error); });

axios的使用与fetch类似，它也返回一个Promise对象，并提供了丰富的配置选项。