Promise详解

1.什么是Promise呢？

Promise是异步编程的一种解决方案
那什么时候我们会来处理异步事件呢？

• 一种很常见的场景应该就是网络请求了。
• 我们封装一个网络请求的函数，因为不能立即拿到结果，所以不能像简单的3+4=7一样将结果返回。
• 所以往往我们会传入另外一个函数，在数据请求成功时，将数据通过传入的函数回调出去。
• 如果只是一个简单的网络请求，那么这种方案不会给我们带来很大的麻烦。
• 但是，当网络请求非常复杂时，就会出现回调地狱（回调里面又回调）。

1. 1 网络请求的回调地狱

我们来考虑下面的场景(有夸张的成分)：

• 我们需要通过一个url1从服务器加载一个数据data1，data1中包含了下一个请求的url2
• 我们需要通过data1取出url2，从服务器加载数据data2，data2中包含了下一个请求的url3
• 我们需要通过data2取出url3，从服务器加载数据data3，data3中包含了下一个请求的url4
• 发送网络请求url4，获取最终的数据data4
  
  上面的代码看着没有什么问题 , 但是这样的代码既不优雅又难以为维护, 因此我们可以用Promise来优雅的解决这样的问题 .

2. Promise的基本使用

2. 1.定时器的异步事件

• 我们先来看看Promise最基本的语法。
• 这里，我们用一个定时器来模拟异步事件：
• 假设下面的data是从网络上1秒后请求的数据
• console.log就是我们的处理方式。

• 这是我们过去的处理方式，我们将它换成Promise代码
  

  • 这个例子会让我们感觉脱裤放屁，多此一举

• 首先，下面的Promise代码明显比上面的代码看起来还要复杂。

• 其次，下面的Promise代码中包含的resolve、reject、then、catch都是些什么东西？

我们先不管第一个复杂度的问题，因为这样的一个屁大点的程序根本看不出来Promise真正的作用。

2. 2.定时器异步事件解析

我们先来认认真真的读一读这个程序到底做了什么？

• new Promise很明显是创建一个Promise对象
• 小括号中((resolve, reject) => {})也很明显就是一个函数，而且我们这里用的是之前刚刚学习过的箭头函数。、

但是resolve, reject它们是什么呢？

• 我们先知道一个事实：在创建Promise时，传入的这个箭头函数是固定的（一般我们都会这样写）

• resolve和reject它们两个也是函数，通常情况下，我们会根据请求数据的成功和失败来决定调用哪一个。

成功还是失败？

• 如果是成功的，那么通常我们会调用resolve(messsage)，这个时候，我们后续的then会被回调。
• 如果是失败的，那么通常我们会调用reject(error)，这个时候，我们后续的catch会被回调。

OK，这就是Promise最基本的使用了。

 
    // 同步
    const name = 'yyy';
    console.log(name);
    const result = 3 + 5;
 
    // 异步
    // 1.使用setTimeout 用一个定时器来模拟异步事件
    // setTimeout(() => {
    //   console.log('Hello World');
    // }, 1000)
 
 
    // 什么情况下会用到Promise?
    // 一般情况下是有异步操作时,使用Promise对这个*异步操作进行封装*
    // new -> 构造函数(1.保存了一些状态信息  2.执行传入的函数)
    // 在执行传入的回调函数时, 会传入两个参数, resolve解决, reject拒绝.这两个本身又是函数
    // 参数 -> 函数((resolve, reject)
 
    // 以后有什么异步的操作的话都可以封装在Promise里面
 
 
    new Promise((resolve, reject) => {
 
      setTimeout(() => {
 
        // 如果有代码需要处理不会直接这样放这里 在then里面处理data
        // console.log('hello world');
        // console.log('hello world');
        // console.log('hello world');
        // console.log('hello world');
 
        // 成功的话去到then那里
        // resolve('Hello World')
 
        // 失败的时候调用reject 会去到catch那里
        reject('error message')
      }, 1000)
    }).then((data) => { // then里面也是一个函数
      // 1.100行的处理代码
      console.log(data);
      console.log(data);
      console.log(data);
      console.log(data);
      console.log(data);
    }).catch((err) => {
      console.log(err);
    })
    // 通过回调里的 resolve(data) 将这个 promise 标记为 resolverd，
    // 然后进行下一步 then((data)=>{//do something})，resolve 里的参数就是你要传入 then 的数据。

2. 3 Promise三种状态和另外处理形式

异步操作的三种状态 :

- pending：等待状态，比如正在进行网络请求，或者定时器没有到时间。
- fulfill：满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调.then()
- reject：拒绝状态，当我们主动回调了reject时，就处于该状态，并且会回调.catch()

- Promise的另外处理形式

new Promise((resolve, reject) => {
    setTimeout(() => {
      // resolve('Hello Vuejs')
      reject('error message')
    }, 1000)
    // 不想同时写then和catch的话 then里面可以直接传入两个函数 data,err
  }).then(data => {
    console.log(data);
  }, err => {
    console.log(err);
  })

3 . Promise的链式调用

3. 1 Promise链式调用

• 我们在看Promise的流程图时，发现无论是then还是catch都可以返回一个Promise对象。
• 所以，我们的代码其实是可以进行链式调用的：

 
    // 参数 -> 函数(resolve, reject)
    // resolve, reject本身它们又是函数
    // 链式编程
    new Promise((resolve, reject) => {
 
      // 第一次网络请求的代码
      setTimeout(() => {
        resolve()
      }, 1000)
 
    }).then(() => {
      // 第一次拿到结果的处理代码
      console.log('Hello World');
      console.log('Hello World');
      console.log('Hello World');
      console.log('Hello World');
      console.log('Hello World');
      console.log('Hello World');
 
      // 如果还有回调的话可以在这里写 在第一个.then()的后面继续.then()
      return new Promise((resolve, reject) => {
 
        // 第二次网络请求的代码
        setTimeout(() => {
          resolve()
        }, 1000)
      })
    }).then(() => {
 
      // 第二次处理的代码
      console.log('Hello Vuejs');
      console.log('Hello Vuejs');
      console.log('Hello Vuejs');
      console.log('Hello Vuejs');
      console.log('Hello Vuejs');
      console.log('Hello Vuejs');
 
      return new Promise((resolve, reject) => {
 
        // 第三次网络请求的代码
        setTimeout(() => {
          resolve()
        })
      })
    }).then(() => {
 
      // 第三处理的代码
      console.log('Hello Python');
      console.log('Hello Python');
      console.log('Hello Python');
      console.log('Hello Python');
      console.log('Hello Python');
    })

3. 2 Promise链式调用简写

任务要求比如 :

• 网络请求: aaa -> 自己处理(10行)
• 处理拼接后: aaa111 -> 自己处理(10行)
• 处理拼接后: aaa111222 -> 自己处理

 new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve('aaa')
          }, 1000)
        }).then(res => {
          // 1.自己处理10行代码
          console.log(res, '第一层的10行处理代码');
        
          // 2.对结果进行第一次处理
          return new Promise((resolve, reject) => {
            // resolve(res + '111')
            reject('err')
          })
        }).then(res => {
          console.log(res, '第二层的10行处理代码');
        
          return new Promise(resolve => {
            resolve(res + '222')
          })
        }).then(res => {
          console.log(res, '第三层的10行处理代码');
        }).catch(err => {
          console.log(err);
        })

第一次抽离new Promise(resolve => resolve(结果))简写

 new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('aaa')
            }, 1000)
        }).then(res => {
            // 1.自己处理10行代码
            console.log(res, '第一层的10行处理代码');

            // 2.对结果进行第一次处理
            return Promise.resolve(res + '111')
        }).then(res => {
            console.log(res, '第二层的10行处理代码');

            return Promise.resolve(res + '222')
        }).then(res => {
            console.log(res, '第三层的10行处理代码');
        })

第二次进行抽离: 省略掉Promise.resolve

  /* -----省略掉Promise.resolve，直接return res ----- */
    new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('aaa')
      }, 1000)
    }).then(res => {
      // 1.自己处理10行代码
      console.log(res, '第一层的10行处理代码');
 
      // 2.对结果进行第一次处理
      return res + '111'
    }).then(res => {
      console.log(res, '第二层的10行处理代码');
 
      return res + '222'
    }).then(res => {
      console.log(res, '第三层的10行处理代码');
    })

3. 3 throw手动抛出异常

上面的都是每一层成功，那失败的怎么写呢？

 new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('aaa')
            }, 1000)
        }).then(res => {
            // 1.自己处理10行代码
            console.log(res, '第一层的10行处理代码');

            // 2.对结果进行第一次处理
            // return Promise.reject('error message')
            // throw 手动抛出异常
            throw 'error message'   //打印error message
        }).then(res => {
            console.log(res, '第二层的10行处理代码');

            return Promise.resolve(res + '222')
        }).then(res => {
            console.log(res, '第三层的10行处理代码');
        }).catch(err => {
            console.log(err);
        })

3. 4 Promise的all方法使用

• 需求本身依赖两个请求 不确定是哪个先请求回来，所以两个都得处理handleResult
• 保证数据在两次网络请求都成功的情况下 才能拿到数据

 
    // 需求本身依赖两个请求 不确定是哪个先请求回来，所以两个都得处理handleResult
    // 请求一:
    // let isResult1 = false
    // let isResult2 = false
    // $ajax({
    //   url: '',
    //   success: function () {
    //     console.log('结果1');
    //     isResult1 = true
    //     handleResult()
    //   }
    // })
    // // 请求二:
    // $ajax({
    //   url: '',
    //   success: function () {
    //     console.log('结果2');
    //     isResult2 = true
    //     handleResult()
    //   }
    // })
    //
    // function handleResult() {
    //   if (isResult1 && isResult2) {
    //     //
    //   }
    // }
 
 
    // Promise.all可以将多个Promise实例包装成一个新的Promise实例。统一进行回调
    // 同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。
    Promise.all([
      // new Promise((resolve, reject) => {
      //   $.ajax({
      //     url: 'url1',
      //     success: function (data) {
      //       resolve(data)
      //     }
      //   })
      // }),
      // new Promise((resolve, reject) => {
      //   $.ajax({
      //     url: 'url2',
      //     success: function (data) {
      //       resolve(data)
      //     }
      //   })
      // })
 
      new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve({
            name: 'yyy',
            age: 18
          })
        }, 2000)
      }),
      new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve({
            name: 'kobe',
            age: 19
          })
        }, 1000)
      })
    ]).then(results => {
      console.log(results);
    })

4 . Promise的方法

4 .1 finally方法

• finally是在ES9（ES2018）中新增的一个特性：表示无论Promise对象无论变成fulfilled还是reject状态，最终都会被执行的代码。
• finally方法是不接收参数的，因为无论前面是fulfilled状态，还是reject状态，它都会执行。
  

const promise=new Promise((resolve,reject)=>{
	 resolve("success")
})


promise.then(res=>{
	console.log("res",res);
}).catch((data)=>{
console.log();
}).finally(()=>{   // finally方法一定会执行一次
	console.log("fially code execte");
})

4 .2 resolve方法

• 前面的then、catch、finally方法都属于Promise的实例方法，都是存放在Promise的prototype上的。
• 有时候我们已经有一个现成的内容了，希望将其转成Promise来使用，这个时候我们可以使用Promise.resolve 方法来完成。
  Promise.resolve的用法相当于new Promise，并且执行resolve操作：
  
• resolve参数的形态：
  • 情况一：参数是一个普通的值或者对象
  • 情况二：参数本身是Promise
  • 情况三：参数是一个thenable

转成promise的对象

function foo(){
	const obj={name:"why"}
	return new Promise((resolve)=>{
		resolve(obj)
	})
}
foo().then(res=>{
	console.log(res);
})

利用resolve的做法

//  类方法 Promise resolve
	const promise=Promise.resolve({name:"why"})
	// 相当于
	const promise2=Promise.resolve((resolve,reject)=>{
		resolve({
			name: "why"
		})
	})
	promise.then(res=>{
		console.log(res);
	})

4 .3reject方法

• reject方法类似于resolve方法，只是会将Promise对象的状态设置为reject状态。
• Promise.reject的用法相当于new Promise，只是会调用reject：

• Promise.reject传入的参数无论是什么形态，都会直接作为reject状态的参数传递到catch的。

const promise = Promise.reject({
	name: "why"
})
// 相当于
const promise2=new Promise(reject=>{
	reject('err')
})
promise.catch(res=>{
	console.log(res);
})

// 注意 这里传入的值 不做其他的方法
// 不管成功失败都是执行catch

4 .4all方法

另外一个类方法是Promise.all：

• 它的作用是将多个Promise包裹在一起形成一个新的Promise；
• 新的Promise状态由包裹的所有Promise共同决定：
  • 当所有的Promise状态变成fulfilled状态时，新的Promise状态为fulfilled，并且会将所有Promise的返回值组成一个数组；
  • 当有一个Promise状态为reject时，新的Promise状态为reject，并且会将第一个reject的返回值作为参数；
    
    
    代码

// all 创建多个promise
const p1=new Promise((resolve,reject)=>{
	setTimeout(()=>{
	resolve(11111)
	},1000)

})
const p2 = new Promise((resolve, reject) => {
setTimeout(() => {
	resolve(21111)
	// reject(411111) //当有一个reject执行错误信息   throw
}, 2000)
})
const p3 = new Promise((resolve, reject) => {
	setTimeout(() => {
		resolve(31111)
	}, 3000)
})

// 当所有的peomise都变成fulfilled时传入

// 当 ...age都有结果才会返回
Promise.all([p1,p2,p3,"aaaa"]).then(res=>{
	console.log(res); //按存放数组的循序  //[ 11111, 21111, 31111, 'aaaa' ]
})

4 .5allSettled方法

all方法有一个缺陷：当有其中一个Promise变成reject状态时，新Promise就会立即变成对应的reject状态。

• 那么对于resolved的，以及依然处于pending状态的Promise，我们是获取不到对应的结果的；
• 在ES11（ES2020）中，添加了新的API Promise.allSettled：
• 该方法会在所有的Promise都有结果（settled），无论是fulfilled，还是reject时，都会有最终的状态；
• 并且这个Promise的结果一定是fulfilled的；
  

const p1=new Promise((resolve,reject)=>{
	setTimeout(()=>{
	resolve(11111)
	},1000)

})
const p2 = new Promise((resolve, reject) => {
setTimeout(() => {
	// resolve(21111)
	reject(411111) //当有一个reject执行错误信息   throw
}, 2000)
})
const p3 = new Promise((resolve, reject) => {
	setTimeout(() => {
		resolve(31111)
	}, 3000)
})

Promise.allSettled([p1,p2,p3]).then((result) => {
	console.log(result);
}).catch((err) => {
	console.log(err);
	
})

注意

• pallSettled的结果是一个数组，数组中存放着每一个Promise的结果，并且是对应一个对象的；
• 这个对象中包含status状态，以及对应的value值；

4 .6 race方法

• 如果有一个Promise有了结果，我们就希望决定最终新Promise的状态，那么可以使用race方法：
• race是竞技、竞赛的意思，表示多个Promise相互竞争，谁先有结果，那么就使用谁的结果；

// 如果有一个Promise有了结果， 我们就希望决定最终新Promise的状态， 那么可以使用race方法：
// 谁先有结果， 那么就使用谁的结果；
const p1 = new Promise((resolve, reject) => {
	setTimeout(() => {
		resolve(11111)
	}, 1000)
})
const p2 = new Promise((resolve, reject) => {
	setTimeout(() => {
		// resolve(21111)
		reject(411111) //当有一个reject执行错误信息   throw
	}, 2000)
})
const p3 = new Promise((resolve, reject) => {
	setTimeout(() => {
		resolve(31111)
	}, 3000)
})
 //谁先执行打印谁
Promise.race([p1, p2, p3]).then((result) => {
	console.log(result);
}).catch((err) => {
	console.log(err);   //打印1111 谁先执行打印谁
})

4 .7any方法

• any方法是ES12中新增的方法，和race方法是类似的：
  • any方法会等到一个fulfilled状态，才会决定新Promise的状态；
  • 如果所有的Promise都是reject的，那么也会等到所有的Promise都变成rejected状态；
    

const p1 = new Promise((resolve, reject) => {
	setTimeout(() => {
		reject(11111)
		// resolve(1111)     
	}, 1000)

})
const p2 = new Promise((resolve, reject) => {
	setTimeout(() => {
		// resolve(21111)
		reject(411111) //当有一个reject执行错误信息   throw
	}, 2000)
})
const p3 = new Promise((resolve, reject) => {
	setTimeout(() => {
		reject(31111)
	}, 3000)
})

//谁先执行打印谁
Promise.any([p1, p2, p3]).then((result) => {
	console.log(result);
}).catch((err) => {
	console.log(err);
})

// 如果都是拒绝 依然执行catch  并且会报一个错误
// [AggregateError: All promises were rejected]