JSON：使用 Pexels API 密钥答案

【问题标题】：JSON: Use Pexels API keyJSON：使用 Pexels API 密钥
【发布时间】：2020-10-09 20:13:05
【问题描述】：

我开始学习 JSON，在我的整个旅程中，我在使用 API 时没有遇到过 API 密钥。我正在尝试使用 pexels API，在这里找到https://www.pexels.com/api/documentation/?language=javascript。我获得了一个 API 密钥，如何在 JSON 中使用它。我知道这是一个荒谬的问题，但我无法找出方法。感谢您的帮助。

【问题讨论】：

标签： javascript json api key

【解决方案1】：

如果您仔细阅读他们提供的如何使用您的 API_KEY 的文档。

您可以查看文档here。

您必须将API_KEY 在请求header 中作为Authorization 传递。

curl -H "Authorization: YOUR_API_KEY" \
  "https://api.pexels.com/v1/search?query=people"

fetch("https://api.pexels.com/v1/search?query=people", {
  headers: {
    Authorization: 'YOUR_API_KEY'
  })
  .then(response => response.json())
  .then(result => console.log(result))
  .catch(err => console.log(err))

【讨论】：

我在哪里做的
这是 Curl 命令，因此您可以从终端运行，对于 javascript，您可以使用 fetch 并调用它
之后我该怎么办
$.getJSON(URL, function (data) { 我应该为 URL 放什么
对返回的 JSON 做任何你想做的事情，你的问题是如何传递 API_KEY 所以我回答了这个问题。 URL 就像我在示例中使用的一样......如果答案已经解决了您最初的问题，请接受它并为其他问题创建新问题。

【解决方案2】：

首先，我建议您在项目的根目录中创建一个名为 .env.local 的 env 文件

然后将密钥添加到此 env 文件中

YOUR_API_KEY = '1232123123123123123'  <== your key insted of these random numbers

然后你安全地使用你的密钥进行 fetch 调用，然后像这样伸手去拿一些 pexels endopint

export const getDataFromApi = async () => {
  const res = await fetch(
  ENDPOINT_URL,
  {
    headers: {
      Authorization: API_KEY,
    },
  }
);
  const responseJson = await res.json();
  return responseJson.photos;
};

【讨论】：