看个对ajax的简单模仿，当然真正的ajax并不是这样实现的：
function ajax(object){ //
console.log("start ajax --------");
object.success("data is '" + object.data + "' and acrossAjax");
}
ajax({
data: 'milk',
success: (data) => {
console.log(data);
}
});
控制台 输出：
start ajax --------
data is 'milk' and acrossAjax
当我们在一个ajax 中依赖上一个请求的参数需要进行下一次的ajax请求时会怎么做呢？
ajax({
data: 'milk',
success: (data) => {
console.log(data);
ajax({
data: data,
success: (data) => {
console.log(data);
}
});
}
});
控制台输出：
start ajax --------
data is 'milk' byAjax
start ajax --------
data is 'data is 'milk' byAjax' byAjax
这样子看起来 代码已经不太直观了，层层嵌套。这还只是两层，如果是三层 或则更多呢？ 这就引出了promise
再让我们来看看promise 对这种情况是怎么实现的
/*********************** es6 promise start ********************/
function ajax(object){ // 封装一个支持promise的ajax
let promise = new Promise((resolve, reject) => {
console.log('start promise -----');
resolve("data is '" + object.data + "' byAjax");
});
return promise;
}
ajax({
data: 'milk',
})
.then((data) => {
console.log(data);
return data; // 返回普通变量对象 这时then返回的是一个初始的promise对象，不是ajax 这个
})
.then((data) => {
console.log(data);
return ajax({data: data}); // 返回新的 ajax promise对象
})
.then((data) => {
console.log(data);
});
控制台输出：
start promise -----
data is 'milk' byAjax
data is 'milk' byAjax
start promise -----
data is 'data is 'milk' byAjax' byAjax
