我如何在 Javascript 上显示对象

Question

我目前正在上一门关于 JavaScript 的 Udemy 课程，我已经在一个项目上停留了几个星期，我已尽我所能多次遵循该指示，但我似乎错过了一个重要部分正在停止显示对象的项目表单。

此项目的目的是在您将最喜欢的鸡尾酒提交到表单中时展示鸡尾酒饮品和成分。我有四个 JavaScript 文件 app.js，这是 JS 代码的主要部分，然后是 CocktailAPI.js，它包含一个处理 API 查询的类，然后我们有 UI.js，它用于接口行为，最后是我拥有的部分尚未达到的是 COcktailDB.js。

我面临的问题是我创建了处理 API 请求的类，导师首先将其转换为 json，然后将响应转换为对象，然后记录在控制台日志中以证明一切正常工作正常。我面临的问题是，即使我复制了导师，该对象也不会显示在我的控制台上，并且我收到一条错误消息：

CORS 策略已阻止从源“null”获取“http://www.thecocktaildb.com/api/json/v1/1/search.php?s=vodka”的访问权限：请求的资源上不存在“Access-Control-Allow-Origin”标头。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

我已经检查了很多次 url，甚至复制并粘贴了 url 以消除这个问题，我之前已经解决了这个问题，但最终再次启动项目，因为我遇到了另一个问题，虽然重新启动会解决它。然而，当我再次达到这一点时，我不知道我做了什么来解决这个问题，因为我尝试了很多东西。

由于目前有 2 个文件正在使用，因为我还处于项目的早期阶段，所以 2 个文件没有任何内容，所以我只会发布 2 个 js 文件。如果这还不够，请告诉我我需要补充什么。

app.js

//Instanciate the classes
const ui = new UI(),
  cocktail = new CocktailAPI();


//Create the event listeners
function eventListeners() {
  //Add event listeners when the form is submittted
  const searchForm = document.querySelector('#search-form');
  if (searchForm) {
    searchForm.addEventListener('submit', getCocktails);
  }
}

eventListeners();


//Get cocktail function
function getCocktails(e) {
  e.preventDefault();

  const searchTerm = document.querySelector('#search').value;

  //Check something is on the search input
  if (searchTerm === '') {
    ui.printMessage('Please add something intot the form', 'danger');
  } else {
    //Query by name of the drink
    cocktail.getDrinkByName(searchTerm)
      .then(cocktails => {
        console.log(cocktails);
      })
  }
}

Cocktail.js

class UI {
  //Display a custom message
  printMessage(message, className) {
    const div = document.createElement('div');

    //Add the HTML
    div.innerHTML = `
          <div class="alert alert-dismissable alert-${className}">
          <button type="button" class="close" data-dismiss="alert">X</button>
          ${message}
          </div>
      `;

    //Insert befrore
    const reference = document.querySelector('.jumbotron h1');
    const parentNode = reference.parentElement;
    parentNode.insertBefore(div, reference);

    //Remove after 3 seconds
    setTimeout(() => {
      document.querySelector('.alert').remove();
    }, 3000);

  }
}

cocktailAPI.js

class CocktailAPI {
  //Get recipe by name
  async getDrinkByName(name) {

    //Search by name
    const apiResponse = await fetch(`http://www.thecocktaildb.com/api/json/v1/1/search.php?s=${name}`);

    //returns json respnse
    cocktails = await apiResponse.json();

    return {
      cocktails
    }
  }
}

当您加载所有文件时，我想要生成的内容可能会变得更加清晰

我知道这可能是不够的信息，但如果你问我，我将能够更详细地解释，但代码的意思是在控制台日志中显示 API 的响应以及所有属性

我将复制代码，以便如果有人想要更深入地查看文件本身可以查看它。

Answer 1

发生这种情况是因为您使用http 与 API 进行通信。如果您将 http://www.thecocktaildb.com/api/json/v1/1/search.php?s=${name} 更改为 https://www.thecocktaildb.com/api/json/v1/1/search.php?s=${name}（请注意 https）它应该适合您。

class CocktailAPI {
  //Get recipe by name
  async getDrinkByName(name) {
    try {
      //Search by name
      const apiResponse = await fetch(`https://www.thecocktaildb.com/api/json/v1/1/search.php?s=${name}`);
      //returns json respnse
      let cocktails = await apiResponse.json();
      return { cocktails };
    } catch (err) {
      throw err;
    }
  }
}

let cocktails_api = new CocktailAPI();

cocktails_api
  .getDrinkByName("vodka")
  .then(vodka => { console.log(vodka) })
  .catch(err => { console.log("ERR", err) });

Answer 2

您对 JSON 数据的请求必须通过 https:// 而不是 http:// 提供服务，因为 thecocktaildb.com 很可能添加了一个 Access-Control-Allow-Origin 通配符，该通配符只接受 https 请求而不是 http 在其 @987654322 中的请求@。

只需将 fetch 请求中的 http 替换为 https，如下所示：

fetch(`https://www.thecocktaildb.com/api/json/v1/1/search.php?s=${name}`);

检查并运行以下代码 sn-p 以获得上述的实际示例：

async function hello(name) {
  const apiResponse = await fetch(`https://www.thecocktaildb.com/api/json/v1/1/search.php?s=${name}`);
  let cocktails = await apiResponse.json();
  console.log(cocktails);
  return cocktails;
}

hello("vodka");