JavaScript高级-Promise

前言
一、Promise的简介
二、Promise的使用

前言

提示：本文参考尚硅谷视频教程Promise教程

一、Promise的简介

1.Promise基本概念：

1.从语法上看：Promise是一个构造函数 (自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法)
2.从功能上看：promise对象用来封装一个异步操作并可以获取其成功/失败的结果值

2.Promise的两种状态和对象值：

1.pending 变为 resolved/fullfilled
2.pending 变为 rejected
3.实例对象promise的另一个值 PromiseResult,保存着对象成功/失败的值（value/reason）

3.Promise基本使用：

const p = new Promise((resolve, reject) => {
     // 执行器函数
  // 执行异步操作任务
  setTimeout(() => {
    
    const time = Date.now() 
    // 如果当前时间是偶数代表成功，否则失败
    if (time % 2 == 0) {
    
      // 如果成功，调用resolve(value)
      resolve('成功的数据，time=' + time)
    } else {
    
      // 如果失败，调用reject(reason)
      reject('失败的数据，time=' + time)
    }
  }, 1000);
})

p.then(
  value => {
     // 接收得到成功的value数据 onResolved
    console.log('成功的回调', value)  // 成功的回调 成功的数据，time=1615015043258
  },
  reason => {
     // 接收得到失败的reason数据 onRejected
    console.log('失败的回调', reason)    // 失败的回调 失败的数据，time=1615014995315
  }
)

解释说明：
1.Promise构造函数接受一个函数（执行器函数）作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供。
2.resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved/fulfilled），在异步操作成功时调用，并将异步操作的结果，作为参数value传递出去;
3.reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数error/reason传递出去。
4.Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。
5.then方法可以接受两个回调函数作为参数
6.第一个回调函数onResolved()是Promise对象的状态变为resolved时调用
7.第二个回调函数onRejected()是Promise对象的状态变为rejected时调用

二、Promise的使用

1.为什么使用Promise

1.解决回调地狱问题：

    // 1.利用Promise的链式调用
    doSomething()
      .then(result => doSomethingElse(result))
      .then(newResult => doThirdThing(newResult))
      .then(finalResult => {
     console.log('Got the final result:' + finalResult) })
      .catch(failureCallback)
	//2.利用async/await方式
    async function request() {
    
      try {
    
        const result = await doSomething()
        const newResult = await doSomethingElse(result)
        const finalResult = await doThirdThing(newResult)
        console.log('Got the final result:' + finalResult)
      } catch (error) {
    
        failureCallback(error)
      }
    }

2.Promise基本使用

代码如下（示例）：

    // 1.resolve 函数：内部定义成功时调用的函数
     resolve(value)
    // 2.reject 函数：内部定义失败时调用的函数 
     reject(reason)
    // 3.promise方法原型方法：Promise.prototype.then
     p.then(onResolved, onRejected)
    // onResolved 函数：成功的回调函数
    (value) => {
    }
    // onRejected 函数：失败的回调函数 
    (reason) => {
    }
    // 4.Promise.prototype.catch 方法，指定失败的回调
    // onRejected 函数：失败的回调函数 (reason) => {},这是then() 的语法糖，相当于 then(undefined, onRejected)
    // 5.Promise.resolve()/Promise.reject() 方法就是一个语法糖,用来快速得到Promise对象

2.Promise.all ()：

返回一个新的 promise，只有所有的 promise 都成功才成功，只要有一个失败了就直接失败

let p1 = new Promise((resolve, reject) => {
    
      resolve('OK');
    })
    let p2 = Promise.resolve('Success');
    let p3 = Promise.resolve('Oh Yeah');

    const result = Promise.all([p1, p2, p3]);
    console.log(result);

3.Promise.race方法：

const p1 = new Promise((resolve, reject) => {
    
      setTimeout(() => {
    
        resolve(1)
      }, 1000)
    })
    const p2 = Promise.resolve(2)
    const p3 = Promise.reject(3)
 	const pRace = Promise.race([p1, p2, p3])
    pRace.then(
      value => {
    
        console.log('race onResolved()', value)
      },
      reason => {
    
        console.log('race onRejected()', reason)
      }
    )
    // 输出：race onResolved() 2

2.Promise常用疑问

1.如何改变promise的状态：

1.resolve(value)：如果当前是 pending 就会变为 resolved
2.reject(reason)：如果当前是 pending 就会变为 rejected
3.抛出异常：如果当前是 pending 就会变为 rejected

    const p = new Promise((resolve, reject) => {
    
      //resolve(1) // promise变为resolved成功状态
      //reject(2) // promise变为rejected失败状态
      throw new Error('出错了') // 抛出异常，promise变为rejected失败状态，reason为抛出的error
    })
    p.then(
      value => {
     },
      reason => {
     console.log('reason', reason) }
    )

2.一个 promise 指定多个成功/失败回调函数，都会调用吗：

当 promise 改变为对应状态时都会调用

const p = new Promise((resolve, reject) => {
    
      //resolve(1)
      reject(2)
    })
    p.then(
      value => {
     },
      reason => {
     console.log('reason', reason) }
    )
    p.then(
      value => {
     },
      reason => {
     console.log('reason2', reason) }
    )
    // reason 2
   // reason2 2