有关Promise

1、promise的语法

const p = new Promise((resolve,reject )=>{
      // resolve() //调用函数  调用以后当前promise对象的状态变成了fulfilled
      // reject() // 调用以后状态变成了rejected
})
console.log(p)  //状态默认是pending

2、promise的状态

 

 promise实例有两个属性，

    1.state（状态）

    2.result（结果）

    1） promise的状态

    第一种状态pending   准备，待解决的意思

    第二种状态fulfilled   已完成，成功

    第三种状态rejected  已拒绝 失败

    2） promise状态的改变

    通过调用resolve  reject改变当前promise对象 的状态

    promise状态的改变是一次性的！！！

    所以resolve 和 reject只能存在一个，先调用的牛逼

3、promise的结果 

const p = new Promise((resolve,reject)=>{
        //通过调用resolve或者reject传递参数，来改变当前promise对象的结果
        // resolve("成功的结果 ")
        // reject("失败的结果")
})
console.log(p)

4、promise  then方法

    const P = new Promise((resolve,reject)=>{
      resolve("成功的结果,这里是value")
      // reject("失败了，这就是err")
    })

    //then方法函数  

    //参数
    //1.是一个函数
    //2.还是一个函数

    //返回值：是一个promise对象
    
    const t = P.then((value)=>{
      // 当promise的状态是fulfilled时，也就是resolve()时，执行 

      //then方法返回一个新的promise
      console.log(value,'成功时调用')
      // resolve('这里是res')
    },(err)=>{
      //当promise的状态是rejected时，也就是reject()时，执行
      console.log(err,'失败时调用')
    })

    console.log(t)//then方法会返回一个新的promise

    // t.then((res)=>{
    //   console.log(res)
    // })

    //链式操作
    // new Promise((resolve,reject)=>{

    // })
    // .then()
    // .then()
    

    //promise的状态不改变，就不会执行then里的方法

5、状态补充

      //promise的状态不改变(没有调用resolve或者reject)，就不会执行then里的方法

      new Promise((resolve,reject)=>{
        resolve('hahah')
        // reject('hahah')
      })

      .then((value)=>{
        console.log(value,'成功1')
        return 123  //使用return可以将当前这个promise的状态由pending改为fulfilled，然后就可以继续往下then
        cosole.log(a)  //如果这里的代码出错，会将当前promise的状态改成rejected(这里通过打印一个不存在的a来实现)
      },(reason)=>{
        console.log('失败1')
      })

      .then((value)=>{
        console.log(value,'成功2')
      },(reason)=>{
        console.log(reason,'失败2')
      })

    //总结： 在then方法中通过return将返回的promise实例改为fulfilled

6、catch方法

catch函数被执行的前提：

    1.当Promise的状态被改为rejected的时候

    2.当promise执行体中出现代码错误的时候

    const p = new Promise((resolve,reject)=>{
      // reject('hehe')  
      console.log(a)
      // throw new Error('出错了')
    })
    .catch((err)=>{
      console.log(err)
    })

    console.log(p)

7、常规写法

//promise 常规写法
 new Promise((resolve,reject)=>{

 }).then((value)=>{
   cosnole.log(value)
 }).catch((err)=>{
   console.log(err)
 })

8、Promise 的静态方法

all方法：

此方法对于汇总多个 promise 的结果很有用，在 ES6 中可以将多个 Promise.all 异步请求并行操作，返回结果一般有下面两种情况。

1. 当所有结果成功返回时按照请求顺序返回成功。

2. 当其中有一个失败方法时，则进入失败方法。

//1.获取轮播数据列表
function getBannerList(){
  return new Promise((resolve,reject)=>{
      setTimeout(function(){
        resolve('轮播数据')
      },300) 
  })
}
//2.获取店铺列表
function getStoreList(){
  return new Promise((resolve,reject)=>{
    setTimeout(function(){
      resolve('店铺数据')
    },500)
  })
}
//3.获取分类列表
function getCategoryList(){
  return new Promise((resolve,reject)=>{
    setTimeout(function(){
      resolve('分类数据')
    },700)
  })
}
function initLoad(){ 
  Promise.all([getBannerList(),getStoreList(),getCategoryList()])
  .then(res=>{
    console.log(res) 
  }).catch(err=>{
    console.log(err)
  })
} 
initLoad() //  ['轮播数据', '店铺数据', '分类数据']

allSettled 方法：

Promise.allSettled 的语法及参数跟 Promise.all 类似，其参数接受一个 Promise 的数组，返回一个新的 Promise。唯一的不同在于，执行完之后不会失败，也就是说当 Promise.allSettled 全部处理完成后，我们可以拿到每个 Promise 的状态，而不管其是否处理成功。

const resolved = Promise.resolve(2);
const rejected = Promise.reject(-1);
const allSettledPromise = Promise.allSettled([resolved, rejected]);
allSettledPromise.then(function (results) {
  console.log(results);
});
// 返回结果：
// [
//    { status: 'fulfilled', value: 2 },
//    { status: 'rejected', reason: -1 }
// ]

any 方法：

any 方法返回一个 Promise，只要参数 Promise 实例有一个变成 fulfilled 状态，最后 any 返回的实例就会变成 fulfilled 状态；如果所有参数 Promise 实例都变成 rejected 状态，包装实例就会变成 rejected 状态。

const resolved = Promise.resolve(2);
const rejected = Promise.reject(-1);
const anyPromise = Promise.any([resolved, rejected]);
anyPromise.then(function (results) {
  console.log(results);
});
// 返回结果：
// 2

race 方法：

race 方法返回一个 Promise，只要参数的 Promise 之中有一个实例率先改变状态，则 race 方法的返回状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给 race 方法的回调函数。

//请求某个图片资源

function requestImg(){
  var p = new Promise(function(resolve, reject){
    var img = new Image();
    img.onload = function(){ resolve(img); }
    img.src = 'http://www.baidu.com/img/flexible/logo/pc/result.png';
  });
  return p;
}

//延时函数，用于给请求计时
function timeout(){
  var p = new Promise(function(resolve, reject){
    setTimeout(function(){ reject('图片请求超时'); }, 5000);
  });
  return p;
}

Promise.race([requestImg(), timeout()])
.then(function(results){
  console.log(results);
})
.catch(function(reason){
  console.log(reason);
});