>[danger] 在使用JavaScript时,为了实现某些逻辑经常会写出层层嵌套回调函数,如果嵌套过多,会极大影响代码可读性和逻辑,这种情况也被成为回调地狱(callback hell)。我们不能一直容忍这种code存在在代码中。
### **在代码层面的表现为:**
```
var baseUrl = 'https://api.douban.com/v2/movie/'
function http({
url,
success
}) {
$.ajax({
url: baseUrl + url,
dataType: "jsonp",
success: res => {
success(res);
}
})
}
$("button").click(function () {
var value = $("input").val();
http({
url: `search?q=${value}&count=1`,
success: res => {
var subjects = res.subjects;
var data = subjects\[0\];
var imgUrl = data.images.small;
var title = data.title;
var id = data.id;
console.log(imgUrl)
$("h1").html(title);
$("img").attr("src",imgUrl);
http({
url:id,
success:res=>{
console.log(res)
var summary = res.summary;
$("p").html(summary)
}
})
}
})
})
```
当我们取豆瓣数据时,我们取到了主页面的数据,但是我们需要通过主页面的id去取详情页的数据的时候,需要在主页面成功的回调函数里嵌套一个请求,这个时候我们继续通过详情页取数据的时候就会产生回调层层嵌套的问题,看起来代码特别蠢。