一、概念

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。

Promise对象是一个构造函数，用来生成Promise实例。其本身有all、reject、resolve等方法，原型prototype上有catch、finally、then等方法，所以用Promise new出来的对象肯定有catch、finally、then方法。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

二、用法

Promise对象代表一个异步操作，有三种状态：pending(进行中)、fulfilled(已成功)、rejected(已失败)。只有异步操作的结果可以决定当前是哪一种状态，任何其它操作都无法改变这个状态。

1、基本用法

const promise = new Promise((resolve, reject)=>{
  if(/*异步操作成功*/){
    resolve()  
  }else{
    reject(error)
  }
})

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。

resolve：将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；

reject：将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

2、then方法

Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。

promiseFun(){
  return  new Promise((resolve, reject)=>{
    setTimeout(()=>{
        console.log('执行完')
        const arr1 = [{name: '张三',age: '24'}]
        resolve(arr1)
    },2000)
  })
}
promiseFun().then((res)=>{
  // success
  console.log(res) //  [{name: '张三',age: '24'}]
})

以上代码运行输出的结果顺序是这样的：

1710395362740(1).jpg

通过上述代码，我们可知，then里边的函数就跟我们平时的回调函数一样，能够在异步任务执行完成后再被执行，就是能把原来的回调写法分离出来，在异步操作执行完后，用链式调用的方式执行回调函数。

2、catch方法

用来指定reject的回调函数

promiseFun(){
  return  new Promise((resolve, reject)=>{
    setTimeout(()=>{
        console.log('执行完')
        const arr1 = [{name: '张三',age: '24'}]
        reject(`执行失败${arr1}`)
    },2000)
  })
}
promiseFun().catch((e)=>{
  // error
  console.log(e) // `执行失败 [{name: '张三',age: '24'}]
})

3、all方法

Promise.all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。

function promiseFun1(){
  return new Promise(function(resolve, reject){
    setTimeout(function(){
        console.log('1、执行完')
        const arr1 =  [{name: '张三',age: '24'}]
        resolve(arr1)
    },1000)
  })
}
function promiseFun2(){
  return new Promise(function(resolve, reject){
    setTimeout(function(){
        console.log('2、执行完')
        const arr1 =  '哈哈哈'
        resolve(arr1)
    },2000)
  })
}
function promiseFun3(){
  return new Promise(function(resolve, reject){
    setTimeout(function(){
        console.log('3、执行完')
        const arr1 =  [{name: '张三',age: '24'}]
        resolve(arr1)
    },3000)
  })
}
Promise.all([promiseFun1(),promiseFun2(),promiseFun3()]).then((results)=>{console.log(results)})

输出结果：

1710398162079(1).jpg

注意：Promise 新建后就会立即执行，所以会先打印执行完，等到所有Promise完成状态的改变后才执行then。
在用Promise的时候一般是包在一个函数中，需要的时候去运行这个函数

4、race用法

在all中的回调函数中，等到所有的Promise都执行完，再来执行回调函数，race则不同它等到第一个Promise改变状态就开始执行回调函数。
我们把setTimeout的时间改一下：

function promiseFun1(){
  let p = new Promise(function(resolve, reject){
    setTimeout(function(){
        console.log('1、执行完')
        const arr1 =  [{name: '张三',age: '24'}]
        resolve(arr1)
    },500)
  })
return p
}
function promiseFun2(){
  let p = new Promise(function(resolve, reject){
    setTimeout(function(){
        console.log('2、执行完')
        const arr1 =  '哈哈哈'
        resolve(arr1)
    },500)
  })
    return p
}
function promiseFun3(){
  let p = new Promise(function(resolve, reject){
    setTimeout(function(){
        console.log('3、执行完')
        const arr1 =  '33333'
        resolve(arr1)
    },100)
  })
    return p
}
Promise.race([promiseFun1(),promiseFun2(),promiseFun3()]).then((results)=>{console.log('hhh=',results)})

结果输出：

1710399083424(1).jpg

由此得出：then是以谁执行的最慢，就以谁为准执行回调；race是以谁执行的最快，就以谁为准执行回调

三、使用场景

Promise.prototype.then：
1、下个请求依赖上个请求的结果
2、接口返回的数据量比较大，在一个then 里面处理显得臃肿，多个渲染数据分别给个then，让其各司其职
Promise.all：
1、一个页面，有多个请求，我们需要所有的请求都返回数据后再一起处理渲染
2、合并请求结果并处理错误
3、验证多个请求结果是否都是满足条件
Promise.race：
1、请求超时

ES6 Promise的用法及使用场景