我想一键调用两个函数，并确保它们一个接一个地工作

Question

i would like to get help with a problem im trying to solve, so the problem is that i have to call two APIs url. the second depend on the first (in the first fetch im getting some basic info , including ids, in the second fetch i want to fetch data based on the ids from the first fetching). i always getting this error: Uncaught TypeError: Cannot read property 'length' of undefined probably my approach is not correct. i tried few things like putting the second function inside the first function, i tried to do it without async, its only working when i have two different buttons. i guess the async is causing this problem.(its trying to get the length before the respond) please help me with this one. i would love to get some insight about approach or any way to solve it. thanks in advance. this is the problematic code

//recipies by ingredients array
var displayData = [];
//full recipies array
var displayRecipes = [];

document.getElementById("search").addEventListener("click", function () {
  var l = document.getElementsByClassName("ingInput").length
  var ing = document.getElementById('id').value
  var ing1 = ''
  //getting all the values from the inputs so i can search it in the api url
  for(var i = 1; i<l ;i++){
    ing1 += ',' + document.getElementsByClassName("ingInput")[i].value 
  }
  //async get request for the api url 
 async function postData(url = '') {
    const response = await fetch(url, {
      method: 'GET', // *GET, POST, PUT, DELETE, etc.
      headers: {
        'Content-Type': 'application/json'
        // 'Content-Type': 'application/x-www-form-urlencoded',
      },

    });
    return response.json(); // parses JSON response into native JavaScript objects
  }
  //the api url with the inputs values for searching by ingredeints
  postData('https://api.spoonacular.com/recipes/findByIngredients?ingredients='+ ing + ing1 + '&number=10&apiKey=API_KEY')
    .then((data) => {
      displayData.push(data); // JSON data parsed by `response.json()` call
      console.log('done')
    });

})

//second func
document.getElementById("search").addEventListener("click", function () {
//trying to get data from this array, here i have error.
  var l = displayData[0].length
  var ids = []
  for(var i = 0; i<l ;i++){
    ids.push(displayData[0][i].id) 
  }

  async function postData(url = '') {
    // Default options are marked with *
    const response = await fetch(url, {
      method: 'GET', // *GET, POST, PUT, DELETE, etc.
      headers: {
        'Content-Type': 'application/json'
        // 'Content-Type': 'application/x-www-form-urlencoded',
      },

    });
    return await response.json(); // parses JSON response into native JavaScript objects
  }

  postData('https://api.spoonacular.com/recipes/informationBulk?ids='+ids.toString()+'&apiKey=API_KEY')
    .then((data) => {
      displayRecipes.push(data); // JSON data parsed by `response.json()` call
      console.log(displayRecipes)
    });

})```

Answer 1

How about you make the second fetch only if you have data from the first? This way, when no data exists, the button fetches initial data. If data already exists, it fetches the additional info. So you have a single listener:

 document.getElementById( "search" ).addEventListener( "click", function () {
    if ( displayData.length === 0 ) {
        // Call first function 
    } else {
        // Call second function
    }
 })

Answer 2

i found a solution to my problem, im not sure if its the best way to do it, but its working fine for me. so the dom looks like this: (i added onclick to the search button)

<div id="container">
        <!-- first input for the first ingrediant you can search -->
        <input type="text" class="ingInput" id="id" placeholder="ingrediant" onfocus="auto(this)">
    </div>
    <!-- search button, first bring the recipies based on ingredient, then the full recipies based on ids from the first fetch data -->
    <button  id="search" onclick="asyncCall()">Search</button>

    <!-- add new input for more ingrediant -->
    <button id="add" onclick="add()">Add</button>

    <!-- display the element i have created from the data i have -->
    <div id="display">

    </div>
    <!-- for jquery pagination -->
<button id="btn_prev">Prev</button>
<button id="btn_next">Next</button>
page: <span id="page"></span>

and the javascript for getting the data (first from the first api link then from the second api link):

//recipies by ingredients array
var displayData = [];

//full recipies array
var displayRecipes = [];

async function search(){

  var l = document.getElementsByClassName("ingInput").length
  var ing = document.getElementById('id').value
  var ing1 = ''
  //getting all the values from the inputs so i can search it in the api url
  for(var i = 1; i<l ;i++){
    ing1 += ',' + document.getElementsByClassName("ingInput")[i].value 
  }

  //the api url with the inputs values for searching by ingredeints
 await fetch('https://api.spoonacular.com/recipes/findByIngredients?ingredients='+ ing + ing1 + '&number=10&apiKey=API_KEY', {
    method: 'GET', // *GET, POST, PUT, DELETE, etc.
    headers: {
      'Content-Type': 'application/json'
      // 'Content-Type': 'application/x-www-form-urlencoded',
    }
  }).then(res => res.json())
    .then((data) => {
      displayData.push(data); // JSON data parsed by `response.json()` call
      console.log('done')
    });   
}

async function getRecipes(){
  var l = displayData[0].length
  var ids = []
  for(var i = 0; i<l ;i++){
    ids.push(displayData[0][i].id) 
  }
  await fetch('https://api.spoonacular.com/recipes/informationBulk?ids='+ids.toString()+'&apiKey=API_KEY',{
      method: 'GET', // *GET, POST, PUT, DELETE, etc.
      headers: {
        'Content-Type': 'application/json'
        // 'Content-Type': 'application/x-www-form-urlencoded',
      }
    })
    .then(res => res.json())
    .then((data) => {
      displayRecipes.push(data); // JSON data parsed by `response.json()` call
      console.log(displayRecipes)
    });   
}

async function asyncCall() {
  console.log('calling');
  const resultSearch = await search();
  console.log('done await search');

  console.log('calling2');
  const resultRecipies = await getRecipes();
  console.log('done await recipes');

}```