面向零基础用户的 JavaScript 天气应用
介绍
我知道，对于初学者来说，调用 API 和获取数据可能非常困难，简直是噩梦。不过，我会通过一个非常不错的 Web 应用——一个简单的天气应用——来解释 API 的所有相关知识。
这看起来可能很难，但实际上比看起来要容易。
我将使用 AJAX 调用 API 并从中获取信息，所以这可能看起来有些过时，但要对 API 调用有一个良好的了解，这是一个很好的入门方法。
你需要具备一些JavaScript知识才能继续学习本教程。
API究竟是什么？
应用程序编程接口（API）就像服务器和客户端之间的中间人，它将信息从服务器传递给客户端。
有了这些数据，你就可以创建像天气应用这样的应用程序，而如果没有 API，这几乎是不可能的。
为什么？因为你需要卫星和庞大的系统来利用来自卫星的信息，这些信息包含预测数据。
既然您已经了解了 API 是什么，让我们快速看一下今天我们要做什么来获取数据！
今天我不会过多关注用户界面，因为今天的重点是逻辑。
今日议程：
- 请从https://openweathermap.org获取您的 API 密钥
XHR request向https://openweathermap.org服务器发送请求并获取 JSON 文件。- 从JSON文件中获取所需信息。
- 向用户展示数据。
我建议您使用控制台显示数据，因为在屏幕上显示信息不够灵活有效。
话不多说，让我们开始动手吧。
发出 XHR 请求
XHR到底是什么？XHR是XML HTTP请求的缩写。顾名思义，它是一种用于请求XML文件的HTTP请求。
我们居然在 JavaScript 中使用它，这难道不讽刺吗？一点也不。
实际上，我们使用的是之前提到的 AJAX 方法。AJAX 代表异步 JavaScript 和 XML。由于这种方法同时用于 JS 和 XML，因此 XHR 请求也与 JavaScript 相关。
具有讽刺意味的是，我们一直在重复“请求”这个词。
到目前为止，你已经学习了同步 JavaScript，它是按步骤或按行执行的。
但是，对于 API 而言，你会使用异步 Javascript，它不会等待操作或函数完成。
这样可以大大减少等待时间，从而避免引起用户的不满。
回到请求本身，它在 AJAX 中被广泛使用。可以说，XHR 是 AJAX 的重要组成部分。
现在，我们来创建一个function名称为“ getweather().Pear”的参数e（最好包含在参数中）。这将用于排查错误。
现在，让我们创建一个xhr值为 . 的常量new XMLhttpRequest()。new关键字用于创建一个object.
深入了解物体
类型object是面向对象编程 (OOP) 中使用的一种数据类型。可以将类型想象成object一个现实生活中的对象，它具有属性。
例如，let car = new object();。现在，让我们定义这个对象的属性，car。
car.color = 'red';
car.model = 'Challenger';
car.manufacturer = 'Dodge';
看起来很简单，对吧？于是，我将一辆现实生活中的红色道奇挑战者汽车与一个定义了这辆现实生活中汽车属性的 JavaScript 对象关联起来。
应用场景非常多。假设你要创建一个用户数据库，大约有100个用户。那么，你可以创建一个people对象来定义用户的基本属性。
function User(name, email, address){
this.name = name;
this.emailid = email;
this.address = address;
}
注意关键字的用法this。该this关键字指的是User此函数或上下文中的内容。关键字的值this会随着上下文或函数而变化。
我之前向你们展示的是创建一个简单的对象，通常用于理论目的。
我向你展示的是一个构造函数，它可以帮助我们将属性分配User给提到的这三个参数变量。
那么，我们来创建一个新用户：
let Ken = new User('Ken', 'ken@random.com', 'Times Square, NYC');
现在，我们创建了一个名为 Ken 的新用户，电子邮件地址为 ' ken@random.com '，地址为 '纽约市时代广场'。
Object现在，我们可以创建任意数量的用户，基础用户数为User。
这构成了核心OOP，而核心又是几乎所有编程语言的重要组成部分。
因此，掌握这些知识足以帮助我们调用 API。
继续 XHR
现在，让我们使用open()方法（对象内部存在的函数）。
xhr.open('GET', `https://api.openweathermap.org/data/2.5/weather?q=ANYCITYFORNOW&appid=YOURAPIKEY&units=metric`, true);
谈到 API，有一些方法需要用到。
- 得到
- 放
- 邮政
- 删除
- 修补
- 头
这些方法分别指的是这 5 种操作。
- 读
- 更新
- 写
- 删除
- 部分修改
- 与 GET 请求类似，但返回的响应体不包含响应体。
我们将使用 GET 方法，因为我们只想读取数据并从服务器获取数据。
我使用了模板字面量（反引号）来表示 API 密钥，稍后会详细介绍。
接下来，我们将使用该方法。该方法接受一个回调函数，或者一个在操作完成xhr.onload()后执行的函数。xhr.onload
这xhr.onload()很容易理解：请求完成后，你得到了数据，接下来应该做什么。
现在，在这个函数中有两个条件，我们将使用ifandelse语句。
请看这段代码：
xhr.onload = function (data){
if (this.status === 200){
let response = JSON.parse(this.responseText);
console.log (response);
}
else{
console.log('Something went wrong.');
}
}
这this.status是服务器在收到请求后返回的状态码。200 表示请求成功，所以这里我们使用了 200。
我在data这里传递了参数，以防万一出现错误。
responseText这是服务器在我们发出请求后返回的文本。我们需要将其转换为 JSON 格式，以便获取所需的数据，因此我使用了JSON.parse()该方法。
现在，你可以将该response变量输出到控制台。
试试运行这段代码，看看能不能运行。能运行吗？不行。
我们还没有发送请求！请xhr.send()在上面的代码之后使用。
现在打开控制台，检查是否有效。应该可以。如果不行，请再次检查 API 链接，看看是否替换了正确的值。
获取所需值
现在获取所需值非常简单。请查看 JSON 数据，仔细查看所有值。
JSON数据main包含当前温度、最低温度和最高温度。
让我们把温度值存储在temp一个变量中。
let temp = response.main.temp;
把它输出到控制台，看看是否有效。有效！
将所需值存储在相应的变量中，然后尝试在控制台中输出结果。如果一切正常，说明您已成功调用 API！
现在，获取网页的输入元素，并使用其id或或调用class它。document.getElementByIddocument.getElementByClass
使用 value 属性并将其替换到链接中。模板字面量允许您通过添加句点来实现这一点${value}。
至此，API调用基本完成！
文章来源：https://dev.to/divyeshkamalanaban/javascript-weather-app-for-absolute-beginners-3nfi