js如何获取数据

JavaScript 是一种广泛用于网页开发的脚本语言，它提供了许多方法来获取数据，在本文中，我们将介绍如何使用 JavaScript 从不同的来源获取数据，包括浏览器、服务器和第三方 API。

1、从浏览器获取数据

浏览器是 JavaScript 最常见的运行环境，我们可以使用各种方法从浏览器中获取数据，以下是一些常见的方法：

localStorage：localStorage 是一个 Web 存储 API，允许我们在浏览器中存储键值对，这些数据将在页面会话期间保持，即使刷新页面也不会丢失，要使用 localStorage，首先需要设置一个键值对，然后可以使用该键来检索数据。

// 设置一个键值对 localStorage.setItem(key, value); // 检索数据 var data = localStorage.getItem(key);

sessionStorage：sessionStorage 与 localStorage 类似，但它只在当前会话期间保持数据，当会话结束时（用户关闭浏览器），数据将自动清除，要使用 sessionStorage，同样需要设置一个键值对，然后可以使用该键来检索数据。

// 设置一个键值对 sessionStorage.setItem(key, value); // 检索数据 var data = sessionStorage.getItem(key);

cookies：cookies 是一种在客户端存储数据的简单方法，它们通常用于识别用户或跟踪用户行为，要设置一个 cookie，可以使用 document.cookie 属性，要检索 cookie，可以使用相同的属性。

// 设置一个 cookie document.cookie = key=value; // 检索 cookie var data = document.cookie;

2、从服务器获取数据

要从服务器获取数据，我们需要发送一个 HTTP 请求，JavaScript 提供了几种方法来实现这一点，包括 XMLHttpRequest、fetch 和 axios，以下是一些常见的方法：

XMLHttpRequest：XMLHttpRequest 是一个内置的 JavaScript 对象，用于与服务器交互，要使用 XMLHttpRequest，首先需要创建一个实例，然后使用 open()、send() 和 responseText 等方法来发送请求和接收响应。

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

fetch：fetch 是一个现代的 JavaScript API，用于发送 HTTP 请求并处理响应，要使用 fetch，只需调用其函数并传入 URL，然后使用 then() 和 catch() 方法来处理响应和错误。

fetch(https://api.example.com/data) .then(function (response) { return response.text(); }) .then(function (data) { console.log(data); }) .catch(function (error) { console.error(Error:, error); });

axios：axios 是一个流行的第三方库，用于发送 HTTP 请求并处理响应，要使用 axios，首先需要安装它（通过 npm install axios），然后在代码中导入它并使用其函数来发送请求和处理响应。

import axios from axios; axios.get(https://api.example.com/data) .then(function (response) { console.log(response.data); }) .catch(function (error) { console.error(Error:, error); });

3、从第三方 API 获取数据

许多网站和服务提供商提供公共 API，允许我们访问他们的数据，要使用这些 API，我们需要遵循其文档中的指南来发送请求并处理响应，以下是一个使用第三方 API（OpenWeatherMap）的示例：

import axios from axios; const apiKey = your_api_key; // 替换为你的 API key const city = New York; // 要查询的城市名称或 ID axios.get(https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}) .then(function (response) { console.log(response.data); }) .catch(function (error) { console.error(Error:, error); });

相关问答FAQs：

Q1：如何在 JavaScript 中获取当前日期和时间？