Get access and documentation for an API - JavaScript教程

- [Instructor] So far in the course, we've been working with static data that was downloaded from an API and stored in our project. That works fine for demonstrating how JavaScript works, but it's not great when we want to demonstrate how to interact with a live API. So in this chapter, we'll shift focus from just JavaScript to JavaScript interacting with live data from the web. Before we get to the code though, I want to talk a bit about APIs in general because when we start interacting with APIs using JavaScript in client based applications, things often get a little bit strange. Let me give you an example. As I was developing this course, I wanted to make an example that pulled live weather data into an application. That way you can program the application we're building together to see the weather in your location, and you can look outside and see is this the correct weather? That's a really neat accomplishment and it means that you've built a weather app for yourself. But when I went on the web and started looking for open weather APIs, I ran into a bit of a challenge, and I want to explain what that was. After a lot of searching, I landed on the open weather API from the Norwegian Meteorological Institute, and I thought that this would be perfect. However, when I started testing this API, I discovered I could freely send API requests if I was using an API client or a REST client specifically. But when I tried to send the same request using JavaScript, I kept running into errors. And I dug through the documentation, what could I possibly be doing wrong here, there's nothing wrong with my code. I read all the FAQs, I clicked through all the links, I followed all the steps, and everything was telling me, no, no, what you're doing is correct. You're probably just missing a comma, or putting in the wrong API key or doing something else. But the code in the REST client was working fine, and in JavaScript it kept returning an error. So I kept digging. And finally I landed on the Terms of Service, and buried deep inside the Terms of Service I found this, Direct client-to-API connections. And at the bottom here it says, "Non-simple JavaScript results, i.e. using authentication or other custom headers and CORS pre-flights white listing your domain name is explicitly not supported." This is a common occurrence. You'll find an API on the web that works fine as long as you're using a REST client. But the second you try passing requests through JavaScript you run into issues. That's usually because the owner of the API has decided sharing data directly to client side JavaScript applications is too risky because anyone can spin up those applications and they can very quickly overload the API. So when you're looking for an API on the web, make sure that those APIs actually give access through JavaScript because not all APIs do. Having said that, I did find an API that does what I want. It's this one, OpenWeather, and that's the API I will be using to show you how this works. It doesn't mean you have to use the same API, but if you want to follow along step by step, this is the API you need to use. All you need to do to use this API is to sign up for a free account. You don't have to buy the paid model, you just need an account and an API key. Once you have that, you can click on the API link up here, and then scroll down and go to this option down here, Current Weather Data. Click on API doc, and it'll give you the basic information on how to access this API. And what you see in the code example is all you need is your API key. Once you've created an account, you can go to your account, My API keys, and here you can generate however many API keys you want. And these are the keys we will be using moving forward.