ES6之promise-蒲公英云

promise

promise是一个对象，对象和函数的区别就是对象可以保存状态，函数不可以。
promise并未剥夺函数return的能力，因此无需层层传递callback回调获取数据。
多个异步等待合并并便于解决

promise构造

new Promise(
  function (resolve, reject) {
    resolve('hello') // 数据处理完成
    reject('bye') // 数据处理出错
  }
).then(
  (res) => {console.log(res)},  // res == hello
  (err) => {console.log(err)} // err == bye
)

resolve的作用是将Promise对象的状态从’未完成’变成’成功’,在异步操作成功时调用，并将异步操作的结果作为参数传递出去。
reject的作用是将Promise对象的状态从’未完成’变为’失败’，在异步操作失败时调用，并将异步操作报出的错误作为参数传递出去。
promise有三个状态：
1.pending[待定]初始状态
2.fulfillen[实现]操作成功
3.rejected[被否决]操作失败
当promise状态发生改变就会触发then()里的响应函数处理后续步骤。

简单实例

new Promise(resolve => {
  setTimeout(() => {
    resolve('hello')
  }, 2000)
}).then(res => {
  console.log(res)
})

分两次，顺序执行

new Promise(resolve => {
    setTimeout(() => {
      resolve('hello')
    }, 2000)
  }).then(val => {
    console.log(val) //  val == 'hello'
    return new Promise(resolve => {
      setTimeout(() => {
        resolve('world')
      }, 2000)
    })
  }).then(val => {
    console.log(val) // val == 'world'
  })

promise完成后then()

let pro = new Promise(resolve => {
   setTimeout(() => {
     resolve('hello world')
   }, 2000)
 })
 setTimeout(() => {
   pro.then(value => {
   console.log(value) // value == hello world
 })
 }, 2000)

小结：promise作为队列最为重要的特性，我们在任何一个地方生成了一个promise队列后我们可以把他作为一个变量传递到其他地方。

then()

接收两个函数作为参数，分别代表fulfilled(成功)和rejected(失败)。
.then()返回一个Promise实例，所以他可以链式调用。
当前面的Promise状态改变时，.then()根据其最终状态选择特定的状态响应函数执行。
状态响应函数可以返回新的promise或者其他值，不返回值我们也可以认为他返回了一个null。
如果返回新的promise，那么下一级.then()会在新的promise状态改变之后执行。
如果返回其他任何值则会立即执行下一级.then()。

.then()里面有.then()

因为.then()返回的还是promise实例，所以会等里面的.then()执行完，在执行外面的。

var say = (str,time) =>{
    return new Promise((resolve,reject) =>{
        setTimeout(()=>{
            console.log(str);
            resolve(str);
        },time)
    })
}
say('你好',2000).then(res=>{
    return say('我喜歡你',2000)
}).then(res=>{
    return say('加个微信',2000)
}).then(res=>{
})

Promise.all()批量执行

Promise.all([s1,s2,s3])用于将多个promise实例包装成一个新的Promise实例，返回的实例就是普通的promise。
他接受一个数组作为参数
数组里可以是promise对象，也可以是别的值，只有promise会等待状态改变
当所有的promise都完成该promise完成，返回值是全部值的数组

有任何一个失败该promise失败，返回值是第一个失败的字promise的结果

//切菜
function cutUp(){

  console.log('开始切菜。');
  var p = new Promise(function(resolve, reject){        //做一些异步操作
      setTimeout(function(){
          console.log('切菜完毕！');
          resolve('切好的菜');
      }, 1000);
  });
  return p;

}

//烧水
function boil(){
console.log(‘开始烧水。’);
var p = new Promise(function(resolve, reject){ //做一些异步操作

 setTimeout(function(){
       console.log('烧水完毕！');
       resolve('烧好的水');
   }, 1000);

});
return p;
}

Promise.all([cutUp(), boil()])
.then((result) => {

   console.log('准备工作完毕');
   console.log(result);

})

Promise.rase()

有一个promise最先完成就 reslove 返回哪个
下面以三张图片加载为例

//图片地址
 var arr = [
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c0c05274f2fbb55fbccb89622f798907.jpg?w=632&h=340",
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b746a4db2e0473cc076a3a4b9bbe0235.jpg?w=632&h=340",
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/816a66edef10673b4768128b41804cae.jpg?w=632&h=340"
            ]
//封装加载图片函数
var loadImg = url =>{
    return new Promise((resolve, reject) => {
        var img = document.createElement('img');
        img.src = url;
        img.width = 800;
        img.onload = function() {
            resolve(img);
        }
        img.onerror = function(event) {
            reject(event);
        }
    })
}
Promise.race(arr.map(item => {
    return loadImg(item);
    })).then(res => {
    document.body.append(res);
}).catch(err => {
    console.error(err);
})

实例回调地狱和Promise对比：

var say = (str,time,callback)=>{
    setTimeout(()=>{
        console.log(str);
        if(callback){
            callback();
        }
    },time)
}    
say('你好',5000,()=>{
    say('我喜欢你',3000,()=>{
        say('加个微信',2000)
    })
})

转换为Promise写法：

var say = (str,time) =>{
    return new Promise((resolve,reject) =>{
        setTimeout(()=>{
            console.log(str);
            resolve(str);
        },time)
    })
}
say('你好',2000).then(res=>{
    return say('我喜歡你',2000)
}).then(res=>{
    return say('加个微信',2000)
}).then(res=>{
})