SOURCE

// url
let topicsUrl = 'https://cnodejs.org/api/v1/topics';
let topicOneUrl = 'https://cnodejs.org/api/v1/topic/';
// render content
function render(data) {
    title.innerHTML = data.title;
    content.innerHTML = data.content;
}
getOneNews()

// -------------
// call back
// -------------
// function getOneNews() {
// 	$.ajax({
// 		url: topicsUrl,
// 		success: function (res) {
// 			let id = res.data[0].id;
// 			$.ajax({
// 				url: topicOneUrl + id,
// 				success: function (ress) {
// 					console.log(ress);
// 					render(ress.data)
// 				}
// 			});
// 		}
// 	});
// }
// ---------------
// Promise
//----------------
// function getOneNews() {
// 	axios.get(topicsUrl)
// 		.then(function (response) {
// 			let id = response.data.data[0].id;
// 			return axios.get(topicOneUrl + id)
// 		})
// 		.then(res => {
// 			render(res.data.data)
// 		})
// 		.catch(function (error) {
// 			console.log(error);
// 		});
// }
// ------------------
// asycn/await
// ------------------
async function getOneNews() {
    let listData = await axios.get(topicsUrl);
    let id = listData.data.data[0].id;
    let data = await axios.get(topicOneUrl + id);
    render(data.data.data)
}

<div class="wrap">
	<h2 id="title"></h2>
	<div id="content"></div>
</div>

<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script> -->

.wrap {
    width: 60%;
    margin: auto;
}