JavaScript 第13章：Ajax 与异步请求

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

1. XMLHttpRequest

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

示例代码：

javascript 复制代码

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代码中。

示例代码：

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发起请求。

示例代码：

javascript 复制代码

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来实现这一点：

javascript 复制代码

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可以实现离线访问。

使用头部

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

javascript 复制代码

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

实战案例：天气信息展示

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

html 复制代码

<!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请求通常用于创建新资源或更新现有资源。

javascript 复制代码

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来等待所有请求都完成。这对于并行下载多个文件或获取多条数据很有用。

javascript 复制代码

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关键字，使得异步代码看起来更像是同步代码，从而提高了可读性和可维护性。

javascript 复制代码

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响应的状态码。下面是一个改进后的错误处理示例：

javascript 复制代码

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。

javascript 复制代码

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。

javascript 复制代码

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应用在处理异步请求时的性能、可靠性和用户体验。