How to call two API endpoints one after another?

Question

I am creating an application using vue.js, I have two API endpoints, first where I can recieve TikTok videos id, and the second which is TikTok embed video API, I am trying to call my first API and then map through it and then call TikTok to embed API with all dynamic id's and receive all TikTok videos in single Array, but I can not figure out how I can implement this functionality, this is what I have tried, any suggestions?

 var data = [] async getAllRelatedData(query) { // GET request using fetch with async/await const response = await fetch(`https://marsi.vip/tiktokideas/search/search=nature`); const data = await response.json() const filter = await data.videos.map((videoId)=> videoId.tiktok_id) const responseToTiktok = await fetch(`https://www.tiktok.com/oembedurl=https://www.tiktok.com/@scout2015/video/${....filter}`); var finalResult = data.push(responseToTiktok) },

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Answer 1

Call the first one and once you have the response from the first one trigger the second one. If you need variables from the first one put them in a const and use them in the second call.

fetch('http://example.com/call1').then(response => {fetch('http://example.com/call2').then(data => {console.log(data)});})

Here is a reference https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

If you want a cleaner structure split them into two functions and call the first function and then call the second function within the first once you get your response.