Question

我正在从事我的项目，目前我有一个API调用，用于通过配方GET请求来进行勺型搜索。我想通过视频GET请求添加搜索，但是在将两者同时渲染到DOM中时似乎遇到问题。我该如何解决这个问题？

const apikey = '';
const urls = { search:'https://api.spoonacular.com/recipes/complexSearch',
videos: 'https://api.spoonacular.com/food/videos/search'
};


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

///渲染结果

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


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

  console.log(url);


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

Answer 1

您的urls是一个包含两个字符串的对象。您需要这样对待它，并进行两个单独的调用。

您应该有一个fetch(urls.search)和fetch(urls.videos)调用，每个调用都有自己的响应链。

我不确定这段代码是否按照您的想法做：

const url = urls+'?'+queryString +'&apiKey='+ apikey;

您需要将queryString和apiKey分别附加到urls中的每个字符串。像

const searchUrl = urls.search+'?'+queryString +'&apiKey='+ apikey;
const videosUrl = urls.videos+'?'+queryString +'&apiKey='+ apikey;

如何使用同一密钥进行多个API调用

1 个答案: