当前位置：首页 > news >正文

JavaScript 第13章：Ajax 与异步请求

news 文章来源：https://blog.csdn.net/hummhumm/article/details/142949907 2025/5/7 8:58:22

在Web开发中，异步请求是一种非常重要的技术，它可以让网页在不重新加载的情况下与服务器交互。本章将介绍两种常用的异步请求技术：XMLHttpRequest 和 Fetch API，以及它们如何用于处理JSON数据交换，并通过一个实战案例——获取天气信息来加深理解。

1. XMLHttpRequest

XMLHttpRequest 是最早的异步请求实现之一，它允许JavaScript代码从服务器请求数据而不必刷新整个页面。虽然名字中包含“XML”，但它可以用来请求任何类型的数据，包括HTML、JSON等。

示例代码：

function loadDoc() {var xhttp = new XMLHttpRequest();xhttp.onreadystatechange = function() {if (this.readyState == 4 && this.status == 200) {console.log(this.responseText);}};xhttp.open("GET", "https://api.example.com/data", true);xhttp.send();
}

这里创建了一个新的XMLHttpRequest对象，然后设置了一个事件处理器来处理onreadystatechange事件。当请求完成并且状态码为200（表示成功）时，会打印出从服务器返回的文本数据。

2. Fetch API

随着Web的发展，XMLHttpRequest被认为有些过时了，Fetch API提供了一个更现代化的方法来处理HTTP请求。它返回的是Promise，可以更好地集成到现代的JavaScript代码中。

示例代码：

fetch('https://api.example.com/data').then(response => response.json()) // 转换响应体为json.then(data => console.log(data)) // 打印json数据.catch((error) => {console.error('Error:', error);});

这个例子展示了如何使用fetch来获取数据并处理JSON响应。如果请求过程中出现错误，catch块会捕获并记录错误。

3. JSON 数据交换

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。在异步请求中，服务器通常返回JSON格式的数据，然后客户端使用JavaScript来处理这些数据。

4. 实战案例：获取天气信息

假设我们要创建一个简单的应用，展示用户的当前位置的天气信息。我们可以使用Geolocation API来获取用户的地理位置，然后用这个位置信息向天气API发起请求。

示例代码：

if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(position => {const latitude = position.coords.latitude;const longitude = position.coords.longitude;fetch(`https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=${latitude},${longitude}`).then(response => response.json()).then(data => console.log(data)).catch(error => console.error(error));}, error => console.error(error));
} else {console.error("Geolocation is not supported by this browser.");
}

这段代码首先检查浏览器是否支持Geolocation API，然后获取用户的位置。接着，使用获取到的经纬度向一个天气API发送请求来获取天气信息。请注意，在实际应用中，你需要替换YOUR_API_KEY为你从天气服务提供商那里获得的有效API密钥。

我们可以在上面的基础上进一步扩展一些细节和最佳实践，确保你能够有效地使用异步请求来构建健壮的应用程序。

进阶主题：

错误处理

在进行网络请求时，错误处理是必不可少的一部分。除了上面提到的使用catch来捕获错误之外，还应该考虑以下情况：

超时：网络请求可能会因为各种原因而长时间没有响应，这时你可以设置一个超时时间来避免应用程序挂起。
HTTP错误状态：即使请求成功发送到了服务器，也可能因为权限问题或其他原因而返回非200的状态码。你应该检查response.ok或response.status来判断请求是否真正成功。

取消请求

有时你可能需要在请求完成之前取消它，比如用户导航离开页面或者组件卸载时。你可以使用AbortController来实现这一点：

const controller = new AbortController();
const signal = controller.signal;fetch(url, { signal }).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(error));// 取消请求
controller.abort();

缓存策略

为了提高性能，你可以使用不同的缓存策略来存储API响应结果。例如，使用Service Worker可以实现离线访问。

使用头部

当你需要发送额外的信息给服务器时，例如认证信息或者告诉服务器你期望接收的响应类型，可以通过设置请求头来实现：

fetch(url, {method: 'POST',headers: {'Content-Type': 'application/json','Authorization': 'Bearer your-access-token'},body: JSON.stringify({ key: 'value' })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

性能优化

减少请求数量：合并请求，减少HTTP往返次数。
并发请求：同时发起多个请求以减少总等待时间，但要注意不要过度消耗资源。
预加载：提前加载可能需要的数据以改善用户体验。

实战案例：天气信息展示

让我们进一步完善天气信息获取的功能，使其不仅仅是一个控制台输出，而是在网页上动态显示出来：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Weather App</title>
</head>
<body>
<h1>Current Weather</h1>
<div id="weather"></div><script>
document.addEventListener('DOMContentLoaded', () => {if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(position => {const latitude = position.coords.latitude;const longitude = position.coords.longitude;fetchWeather(latitude, longitude);}, error => console.error(error));} else {document.getElementById('weather').textContent = 'Geolocation is not supported.';}
});function fetchWeather(lat, lon) {const apiKey = 'YOUR_API_KEY';const url = `https://api.weatherapi.com/v1/current.json?key=${apiKey}&q=${lat},${lon}`;fetch(url).then(response => response.json()).then(data => displayWeather(data)).catch(error => console.error(error));
}function displayWeather(data) {const weatherDiv = document.getElementById('weather');weatherDiv.innerHTML = `<p><strong>Location:</strong> ${data.location.name}</p><p><strong>Temperature:</strong> ${data.current.temp_c}°C</p><p><strong>Condition:</strong> ${data.current.condition.text}</p>`;
}
</script>
</body>
</html>

这段代码定义了一个简单的HTML页面，其中包含了一个<div>元素来显示天气信息。当DOM内容加载完成后，尝试获取用户的地理位置，并调用fetchWeather函数来获取天气数据。最后，使用displayWeather函数来更新页面上的内容。

通过这些步骤，你应该能够更好地理解和应用异步请求技术来增强你的Web应用程序功能。

好的，让我们继续深入探讨有关异步请求的一些高级主题，并且提供更多的实践技巧。

高级主题

复杂请求 - POST 请求

有时候我们需要向服务器发送数据，这时候就需要用到POST请求。POST请求通常用于创建新资源或更新现有资源。

fetch('/some-endpoint', {method: 'POST',headers: {'Content-Type': 'application/json',},body: JSON.stringify({key: 'value'})
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

在这个例子中，我们发送了一个包含JSON数据的POST请求，并且设置了适当的Content-Type头来告知服务器我们将发送JSON数据。

多个请求的处理

如果你的应用程序需要同时处理多个异步请求，你可以使用Promise.all来等待所有请求都完成。这对于并行下载多个文件或获取多条数据很有用。

const requests = [fetch('https://api.example.com/data1'),fetch('https://api.example.com/data2')
];Promise.all(requests).then(responses => Promise.all(responses.map(r => r.json()))).then(data => console.log(data)).catch(error => console.error(error));

上述代码创建了一个包含两个请求的数组，并使用Promise.all来等待所有请求完成。一旦所有的请求都完成，它会将每个响应转换成JSON格式，然后打印出来。

使用 async/await

ES6引入了async和await关键字，使得异步代码看起来更像是同步代码，从而提高了可读性和可维护性。

async function getWeather(latitude, longitude) {try {const response = await fetch(`https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=${latitude},${longitude}`);const data = await response.json();displayWeather(data);} catch (error) {console.error(error);}
}

在这个例子中，我们使用async声明了一个异步函数getWeather，并在函数内部使用await来等待异步操作的结果。这样可以更清晰地组织代码逻辑。

安全性和隐私

当涉及到敏感数据时，确保你的请求是安全的非常重要。这意味着要使用HTTPS而不是HTTP，并且对传输的数据进行加密。此外，对于涉及用户隐私的操作，如位置数据的收集，必须告知用户并获得他们的同意。

用户体验

在设计异步请求时，考虑到用户体验也是很重要的。这意味着要处理好加载状态，例如显示加载指示器，以及在请求失败时给出友好的错误提示。

测试

测试你的异步代码同样重要。你可以使用工具如Jest或Mocha来模拟网络请求，这样就可以在不依赖实际网络的情况下测试你的应用逻辑。

好的，我们已经讨论了许多有关异步请求的基础和进阶话题。现在让我们再深入一些特定的领域，比如错误处理的最佳实践、优化网络请求、以及如何利用现代框架简化异步请求处理。

错误处理的最佳实践

在处理异步请求时，确保你的应用程序能够优雅地处理错误是非常重要的。这不仅包括网络错误，还包括服务器端的错误，比如404 Not Found、500 Internal Server Error等HTTP状态码。

HTTP状态码处理

除了使用catch来捕获网络错误外，还需要检查HTTP响应的状态码。下面是一个改进后的错误处理示例：

async function fetchWeather(latitude, longitude) {try {const response = await fetch(`https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=${latitude},${longitude}`);if (!response.ok) {throw new Error(`HTTP error! status: ${response.status}`);}const data = await response.json();displayWeather(data);} catch (error) {console.error('Failed to fetch weather:', error);// 显示错误信息给用户displayError(error.message);}
}function displayError(message) {const errorDiv = document.createElement('div');errorDiv.className = 'error-message';errorDiv.textContent = message;document.body.appendChild(errorDiv);
}

在这个例子中，我们不仅捕获了网络错误，还处理了HTTP错误状态码，并且向用户展示了错误信息。

优化网络请求

使用CDN

为了加快数据传输速度，可以利用内容分发网络(Content Delivery Network, CDN)，特别是当你的应用程序在全球范围内都有用户时。

请求压缩

确保服务器和客户端都支持请求和响应的压缩，这可以显著减少数据传输量。

缓存策略

合理使用缓存策略可以减少不必要的网络请求。例如，可以使用HTTP缓存头（如Cache-Control）来决定何时重用本地缓存的数据。

利用现代框架简化请求处理

使用Axios

Axios是一个基于Promise的HTTP客户端，它为浏览器和node.js提供了统一的API。它可以简化HTTP请求的处理，并提供了一些开箱即用的功能，如自动转换请求和响应数据为JSON。

import axios from 'axios';async function getWeather(latitude, longitude) {try {const response = await axios.get(`https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=${latitude},${longitude}`);displayWeather(response.data);} catch (error) {console.error('Failed to fetch weather:', error);displayError(error.message);}
}

使用React Hooks

如果你正在使用React，可以使用useEffect来管理副作用（如API请求），并且使用useState来更新UI。

import React, { useState, useEffect } from 'react';function WeatherComponent() {const [weatherData, setWeatherData] = useState(null);const [errorMessage, setErrorMessage] = useState('');useEffect(() => {navigator.geolocation.getCurrentPosition(position => {fetchWeather(position.coords.latitude, position.coords.longitude);}, error => setErrorMessage('Geolocation is not supported.'));}, []);async function fetchWeather(lat, lon) {try {const response = await fetch(`https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=${lat},${lon}`);if (!response.ok) {throw new Error(`HTTP error! status: ${response.status}`);}const data = await response.json();setWeatherData(data);} catch (error) {setErrorMessage(error.message);}}return (<div>{weatherData ? (<div><p><strong>Location:</strong> {weatherData.location.name}</p><p><strong>Temperature:</strong> {weatherData.current.temp_c}°C</p><p><strong>Condition:</strong> {weatherData.current.condition.text}</p></div>) : errorMessage ? (<p>{errorMessage}</p>) : (<p>Loading...</p>)}</div>);
}

在这个React组件中，我们使用了useEffect来执行异步请求，并且根据请求的结果更新了状态。这样可以保持UI的响应性和可预测性。

通过上述方法和技术，你可以进一步提升你的Web应用在处理异步请求时的性能、可靠性和用户体验。

1. XMLHttpRequest

示例代码：

2. Fetch API

示例代码：

3. JSON 数据交换

4. 实战案例：获取天气信息

示例代码：

进阶主题：

错误处理

取消请求

缓存策略

使用头部

性能优化

实战案例：天气信息展示

高级主题

复杂请求 - POST 请求

多个请求的处理

使用 async/await

安全性和隐私

用户体验

测试

错误处理的最佳实践

HTTP状态码处理

优化网络请求

使用CDN

请求压缩

缓存策略

利用现代框架简化请求处理

使用Axios

使用React Hooks

相关文章：