Question

我正在使用Thinkful为我的班级进行API Hack分配，而我的问题一直是我一直在尝试调用Spoonacular的food api并将结果呈现到DOM上。但是，当我尝试这样做时，我得到的都是404错误。我想知道我做错了什么还是无法控制的无法预料的问题？

我已经研究过手动键入组成的URL和邮递员。

function queryParams(params) {
    const queryItems = Object.keys(params).map(key => `${encodeURIComponent(key)}= ${encodeURIComponent(params[key])}`)
    return queryItems.join('&');
}


function displayResults(responseJson){
  console.log(responseJson);
  $('#results-list').empty();
  for(let i = 0; i < responseJson.results.length; i++){
    $('#results-list').append(
      `<li><h3><a href="${responseJson.results[i].title}">${responseJson.results[i].id},${responseJson.results[i].protein}</a></h3>
      <p>By ${responseJson.results[i].calories}</p>
      <img src='${responseJson.results[i].image}'>
      </li>`
    )};

   $('#results').removeClass('hidden');

};

function getRecipe(query,maxResults,){
  const params ={
    q:query,
    number: maxResults,
  };


  const queryString = queryParams(params)
  const url = searchUrl+'?'+ queryString +'?apiKey='+ apikey;

  console.log(url);


fetch(url,option)
  .then(response =>{
    if(response.ok){
      return response.json();
    }
    throw new Error(response.statusText);
  })
  .then(response => console.log(responseJson))
  .catch(err =>{
    $('#js-error-message').text(`Something went wrong: ${err.message}`);
  });
}

function watchForm() {
  $('form').submit(event => {
    event.preventDefault();
    const searchRecipe = $('.js-search-recipe').val();
    const maxResults = $('.js-max-results').val();
    getRecipe(searchRecipe, maxResults);
  });
}

$(watchForm);

Answer 1

您似乎遇到了几个问题：

首先，您要构造一个无效的网址：

const url = searchUrl+'?'+ queryString +'?apiKey='+ apikey;

注意2个?

此外，在构造查询参数时，您要在=和参数值之间添加一个空格

${encodeURIComponent(key)}= ${encodeURIComponent(params[key])}

如果您使用正确的路径和有效的API密钥，则修复这些问题可能足以使其正常工作。

尝试为我的API Hack分配呈现结果时出现404错误

1 个答案: