console
// 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;
}