版权声明： https://blog.csdn.net/weixin_41849462/article/details/81988637
在工作中遇到了promise上的问题，搞定之后静心做一下总结。
首先，js中的callback与promise的区别实际就是宽度和深度的区别。
1.回调函数：函数当参数，传递另外一个函数
定义：在JavaScript中，回调函数具体的定义为：函数A作为参数(函数引用)传递到另一个函数B中， 并且这个函数B执行函数A。我们就说函数A叫做回调函数。如果没有名称(函数表达式)，就 叫做匿名回调函数。
一个栗子：
function fn1(fn2) {//fn2:回调函数
setTimeout(function() {
console.log(1);
fn2 && typeof fn2 === 'function' && fn2();
}, 1000);
}
fn1(function(){
console.log(2);
});function fn1(fn2) {
setTimeout(function() {
console.log(1);
fn2 && typeof fn2 === 'function' && fn2();
}, 1000);
}
function fn2(){
console.log(2);
}
fn1();
fn2()在例子中，函数fn2作为参数(函数引用)传递到另一个函数fn1中， 并且这个函数fn1执行函数fn2。我们就说函数fn2叫做回调函数。如果没有名称(函数表达式)，就叫做匿名回调函数。
回调函数应用场景实例：
1.缓冲运动回调函数---链式。
2.ajax函数封装--完成某个动作，取返回值。
3.jsonp里面--函数名当作参数。
弊端：回调函数的嵌套：可读性很差 。---深度 栗子：
function fn1(fn2, str) {
setTimeout(function() {
var arr = str.split('');
str = arr.sort().join('');
console.log(str);
fn2 && typeof fn2 === 'function' && fn2(str);
}, 1000);
}
fn1(function(str) {
var arr1 = str.split('');
var newarr = [];
for (var i = 0; i < arr1.length; i++) {
if (newarr.indexOf(arr1[i]) == -1) {
newarr.push(arr1[i
]);
}
}
console.log(newarr.join(''));
fn1(function(str) {
var arr1 = str.split('');
var newarr = [];
for (var i = 0; i < arr1.length; i++) {
if (newarr.indexOf(arr1[i]) == -1) {
newarr.push(arr1[i]);
}
}
console.log(newarr.join(''));
fn1(function(str) {
var arr1 = str.split('');
var newarr = [];
for (var i = 0; i < arr1.length; i++) {
if (newarr.indexOf(arr1[i]) == -1) {
newarr.push(arr1[i]);
}
}
console.log(newarr.join(''));
fn1(function(str) {
var arr1 = str.split('');
var newarr = [];
for (var i = 0; i < arr1.length; i++) {
if (newarr.indexOf(arr1[i]) == -1) {
newarr.push(arr1[i]);
}
}
console.log(newarr.join(''));
fn1(function(str) {
var arr1 = str.split('');
var newarr = [];
for (var i = 0; i < arr1.length; i++) {
if (newarr.indexOf(arr1[i]) == -1) {
newarr.push(arr1[i]);
}
}
console.log(newarr.join(''));
fn1(function(str) {
var arr1 = str.split('');
var newarr = [];
for (var i = 0; i < arr1.length; i++) {
if (newarr.indexOf(arr1[i]) == -1) {
newarr.push(arr1[i]);
}
}
console.log(newarr.join(''));
fn1(function(str) {
var arr1 = str.split('');
var newarr = [];
for (var i = 0; i < arr1.length; i++) {
if (newarr.indexOf(arr1[i]) == -1) {
newarr.push(arr1[i]);
}
}
console.log(newarr.join(''));
fn1(function(str) {
var arr1 = str.split('');
var newarr = [];
for (var i = 0; i < arr1.length; i++) {
if (newarr.indexOf(arr1[i]) == -1) {
newarr.push(arr1[i]);
}
}
console.log(newarr.join(''));
fn1(function(str) {
var arr1 = str.split('');
var newarr = [];
for (var i = 0; i < arr1.length; i++) {
if (newarr.indexOf(arr1[i]) == -1) {
newarr.push(arr1[i]);
}
}
console.log(newarr.join(''));
fn1(function(str) {
var arr1 = str.split('');
var newarr = [];
for (var i = 0; i < arr1.length; i++) {
if (newarr.indexOf(arr1[i]) == -1) {
newarr.push(arr1[i]);
}
}
console.log(newarr.join(''));
}, 'j')
}, 'i')
}, 'h')
}, 'g')
}, 'f')
}, 'e')
}, 'd')
}, 'c')
}, 'b')
}, 'a');2.promise：异步编程的一种解决方案（es6）。可取代callback
promise构造函数：比传统的回调函数更合理，更强大。
创建promise实例对象,构造函数的参数又是一个函数对象，函数对象里面又有两个参数，一个 代表成功的回调，一个是失败的回调。
promise状态：pending(进行中) resolve(成功，已解决) reject(失败，未解决) ， 状态一旦设定，不可改变。
pending-->resolve 进行中-->成功
pending-->reject 进行中-->失败
栗子：
var promise = new Promise(function(resolve, reject) { //resolve:成功，名字等于函数体,reject:失败，一样的
setTimeout(function() {
console.log(1);
resolve(); //成功--then
reject(); //失败--catch
resolve('我是resolve'); //带参数
}, 1000);
});
promise
.then(function(str) { //成功的指向。 获取传递的参数。
console.log(2);
console.log(str); //我是resolve
})
.catch(function() { //失败的失败。
console.log('我错了');
})再来一个：
var promise = new Promise(function(resolve, reject) {
let cImg = new Image();
cImg.src = 'http://h.hiphotos.baidu.com/image/h%3D300/sign=7be12c140ce9390149028b3e4bec54f9/a9d3fd1f4134970a3776841b98cad1c8a7865df8.jpg';
cImg.onload = function() {
resolve(this);
};
cImg.onerror = function() {
reject('路径错误');
};
});
promise.then(function(obj) {
document.body.appendChild(obj);
}).catch(function(d) {
alert(d);
});差不多了 ，回来再聊