promise解决回调地狱问题
什么是回调地狱？ 如何解决呢、。
可以看B站的视频https://search.bilibili.com/all?keyword=%E5%9B%9E%E8%B0%83%E5%9C%B0%E7%8B%B1&from_source=webtop_search&spm_id_from=333.794
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script type="text/javascript" src="./libs/jquery-3.4.1.min.js">script>
head>
<body>
<script type="text/javascript">
window.onload = function () {
console.log(123);
const ID_BASE_URL = 'https://jsonplaceholder.typicode.com/todos';
const ROBOT_IMG_BASE_URL = 'https://robohash.org/';
// 获取机器人id
function getRobotId(url, callbacks) {
$.get(url, function (data) {
const id = data.id;
callbacks(id);
})
}
//创建机器人
function createRobot(id) {
const img = document.createElement('img');
img.src = ROBOT_IMG_BASE_URL + `/${id}?size=200x200`;
document.body.appendChild(img);
}
//回调地狱，一层一层嵌套，看得很难受
// getRobotId(ID_BASE_URL + '/1', function (id) {
// createRobot(id);
// getRobotId(ID_BASE_URL + '/2',function(id){
// createRobot(id);
// getRobotId(ID_BASE_URL + '/3',function(id){
// createRobot(id)
// })
// })
// });
function getRobotIdPromise(url){
const promise = new Promise(
(resolve,reject)=>{
$.get(url,function(data){
const id = data.id;
resolve(id);
})
}
)
return promise;
}
//promise 平铺开来，只有一层哦
getRobotIdPromise(ID_BASE_URL+'/1').then(function(id){
createRobot(id);
return getRobotIdPromise(ID_BASE_URL+'/2')
}).then(
function(id){
createRobot(id);
return getRobotIdPromise(ID_BASE_URL+'/3')}
)
}
script>
body>
html>