promise基础

promise之前有些库在推进这个事情，也有很多代码在用这个，es6将promise作为标准提出来，这是一个非常好的事情，就是把之前一些，大家很向往的写法，概念，真正的标准化，标准化之后大家再写就没什么后顾之忧了，因为他真正的成为一个标准。

 

1、Callback Hell

promise出来的目的就是把callback hell把他干掉，因为在promise之前，这个callback hell是非常烦人的。因为异步这个事情都有callback。

 

之前的callback

 

function loadImg(src, callback, fail){
　　var img = document.createElement('img');
   img.src = src;
　　img.onload = function(){
　　　　callback(img);
　　}
　　img.onerror = function(){
　　　　fail();
　　}
}

var src = 'https://erp.superboss.cc/resources/css/build/images/login/login-title.png';

loadImg(src, function(img){ 
　　console.log(img.width);
},function(){
　　console.log('failed');
})

发送一个请求，就是一个异步的过程，需要用callback，图片成功之后怎么样，图片失败之后怎么样。成功之后拿到数据，可能还会写很长很长的一段代码，可读性非常的不友好，也没法合理的去划分这个步骤，promise就可以解决这个问题。

2、Promise语法

function loadImg(src) {
　　const promise = new Promise(function (resolve, reject) {
　　　　var img = document.createElement('img');
　　　　img.onload = function(){
　　　　　　resolve(img);
　　　　}
　　　　img.onerror = function(){
　　　　　　reject();
　　　　}
　　　　img.src = src;
　　})
　　return promise;
}

这里只传了src一个参数，然后new了一个promise的实例。然后return promise这个实例。new Promise里面传了一个函数，函数里面有两个参数，其他跟之前一样。看上去很复杂，往往封装的复杂，都是为了更简单的用。

 

let result = loadImg('https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1370968418,3643736858&fm=173&app=49&f=JPEG?w=218&h=146&s=23B47B2339C0EC9281DD01DA0300C0B0');

result.then(function(img){
　　console.log(img.width);
}, function(){
　　console.log('failed')
})

result.then(function(img){
　　console.log(img.height);
})

下面这个是怎么用。第一个参数是成功，第一个参数是失败。这个result.then可以用多个，打印高度，打印宽度，打印面积，打印地址。这个，，，一个点的内容干一件事，一个点的内容干一件事，分开了，分的清晰明了。分开就好说了，可以集成拓展。

 

总结：

1、new Promise实例，而且要return

2、new Promise时要传入函数，函数有resolve,reject

3、成功时执行resolve()，失败时执行reject()

4、then 监听结果