2020-08-15 Promise

1.promise

var p = new Promise(function(resolve, reject){
    //做一些异步操作
    setTimeout(function(){
        console.log('执行完成');
        resolve('随便什么数据');
    }, 2000);
});

Promise为何出现？

为了解决callback Hell

Promise的状态

promise有三种状态:

1. pending （初始化状态）
2. fulfilled （成功）
3. rejected （失败）

Promise对象的状态改变，只有两种可能：从pending变为resolved、从pending变为rejected,之后状态不会在改变了且状态不可逆。

Promise常用的基本的用法

一、resolve reject

Promise基本语法

1. new Promise 实例 要return
2. 传入函数 要有resolve reject 俩参数
3. 成功执行resolve 失败 reject
4. then 监听结果并且接收结果

不使用Promise的话模拟一个callback Hell

function loadImg(src, callback, fail){
  var img = document.createElement('img')
  img.onload = function () {
    callback(img)
  }
  img.onerror = function () {
    fail()
  }
  img.src = src
}
var src = 'www.s.com/index/logo.png'

loadImg(src, function (img) {
  console.log(img.width)// callback Hell 我们还要做好多事情 这样看的就很不友好
}, function () {
  console.log('failed')
})

使用Promise

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

var result = loadImg(src)
result.then()
result.then()

二、catch捕获

catch通常用于最后统一捕获,我我们try catch一样

Error和eject都可以捕获

result.then(function(img){
      // dosomthing
    }).then(function(){
      // dosomthing
    }).catch(function(error){
      console.log(error)
    })

三、多个串联

如果我们希望我们的需求按顺序加载（例如，先加载用户信息，然后再通过用户信息渲染好友列表之类的）
我们需要在.then之后return 另外一个Promise 就可以了

var src1 = 'www.xxx.com/1.jpg'
var src2 = 'www.xxx.com/2.jpg'
var img1 = loadImg(src1)
var img2 = loadImg(src2)

//链式操作
img1.then(function(img){
  console.log('图片一加载完成', img)
  return img2 //接下来就是对img2进行异步操作了
}).then(function(img){
  console.log('图片二加载完成', img)
}).catch(function(er){
  console.log(er)
})

四、Promise.all

Promise.all 接收一个Promose对象数组 待全部完成之后 一起执行success。（有点像JS中短路操作的 且&&）

.then方法接收的datas是一个数组,依次包含多个Promise返回值

Promise.all([result1,result2]).then(datas => {
  console.log(datas[0])
  console.log(datas[1])
})

五、Promise.race

和all不一样的是 数组中只要有一个完成 就执行success
(参考JS短路操作的 或||)

Promise.race([result1,result2]).then(data => {
  console.log(data)
})

PromiseStatus 的值，也就是 Promise 的状态，可以是以下三个值之一：
✅ fulfilled: promise 已经被 resolved。一切都很好，在 promise 内部没有错误发生。
❌ rejected: promise 已经被 rejected。哎呦，某些事情出错了。
⏳ pending: promise 暂时还没有被解决也没有被拒绝，仍然处于 pending 状态

1.gif

对于一个 promise，我们可以使用它上面的 3 个方法：

.then(): 在一个 promise 被 resolved 后调用
.catch(): 在一个 promise 被 rejected 后被调用
.finally(): 不论 promise 是被 resolved 还是 reject 总是调用

Promise 总是resolve 或reject 可写Promise.resolve Promise.reject