Promise详解

Promise详解

一、Promise的基本使用

• Promise是一个构造函数，原型对象上有then、catch等方法。

• 在通过new创建Promise对象时，我们需要传入一个回调函数，我们称之为executor

• • 这个回调函数会被立即执行，并且给传入另外两个回调函数resolve、reject；
  • 当我们调用resolve回调函数时，会执行Promise对象的then方法传入的回调函数；
  • 当我们调用reject回调函数时，会执行Promise对象的catch方法传入的回调函数；

// 1.写法一：
const promise1 = new Promise((resolve, reject) => {
  console.log("这里的代码立即执行");
  resolve(); // 当执行resolve方式时，会立即执行then中的回调函数
  // reject(); // 当执行reject方法时， 会执行catch中的回调函数 
  // resolve 与 reject只能执行一个
  // 返回的时Promise对象
}).then(() => {
  console.log("成功的回调");
}).catch(() => {
  console.log("失败的回调");
})


// 2.写法二：
const promise2 = new Promise((resolve, reject) => {
  console.log("这里的代码立即执行！");
  // resolve(); 
  reject();
})

promise2.then(() => {
  console.log("成功的回调");
}).catch(() => {
  console.log("失败的回调");
})

// 3.写法三：
const promise3 = new Promise((resolve, reject) => {
  console.log("这里的代码立即执行！");
  // resolve(); 
  reject();
})

promise3.then(() => {
  console.log("成功的回调");
}, () => {
  console.log("失败的回调");
})

二、Pormise的三种状态

Promise使用过程可以划分成三个状态：

• 待定（pending）: 初始状态，既没有被兑现，也没有被拒绝；
• • 当执行executor中的代码时，处于该状态；
• 已兑现（fulfilled）: 意味着操作成功完成；
• • 执行了resolve时，处于该状态；
• 已拒绝（rejected）: 意味着操作失败；
• • 执行了reject时，处于该状态；

// 注意: Promise状态一旦确定下来, 那么就是不可更改的(锁定)
new Promise((resolve, reject) => {
  // pending状态: 待定/悬而未决的
  console.log("--------")
  reject() // 处于rejected状态(已拒绝状态)
  resolve() // 处于fulfilled状态(已敲定/兑现状态)
  console.log("++++++++++++")
}).then(res => {
  console.log("res:", res)
}, err => {
  console.log("err:", err)
})

三、resolve的参数

1.传入普通的值或对象

如果resolve传入一个普通的值或者对象，那么这个值会作为then回调的参数；

2.传入一个Promise

如果resolve中传入的是另外一个Promise，那么这个新Promise会决定原Promise的状态;

3.传入实现了then的对象

如果resolve中传入的是一个对象，并且这个对象有实现then方法，那么会执行该then方法，并且根据 then方法的结果来决定Promise的状态;

// 1.传入普通参数
const promise1 = new Promise((resolve, rejest) => {
  console.log("这里的代码立即执行");
  resolve("传入字符串");
})
promise1.then((res) => {
  console.log(res);
})

// 2.传入Promise
const promise2 = new Promise((resolve, rejest) => {
  console.log("aaaaaaaaaaaa");
  // 状态不是由这里决定的，而是由resolve中的Promise对象决定
  resolve(new Promise((resolve, rejest) => {
    rejest() // 这里决定状态
  }))
})
promise2.then((res) => {
  console.log(res);   // 执行的不是这里的代码
}, (err) => {
  console.log("err",err); // 执行的是这里的代码
})

// 3.传入实现了then的对象
const promise3 = new Promise((resolve, rejest) => {
  console.log("asdf");
  const obj = {
    // 实现then方法，这个方法中也是resolve和rejest参数
    then: (resolve, rejest) => {
      rejest("这里决定状态")
    }
  }
  resolve(obj) // 状态不是由这里决定，而是由传入的obj对象的then方法中的resolve和rejest决定
})
promise3.then((res) => {
  console.log("res", res);
}, (err) => {
  console.log("err", err); // err 这里决定状态  (执行这里的代码)
})

四、Promise的实例方法

1.then方法

(1)then的参数

• then方法是Promise对象上的一个方法：它其实是放在Promise的原型上的 Promise.prototype.then
• then方法接受两个参数：
• • resolve的回调函数：当状态变成fulfilled时会回调的函数；
  • reject的回调函数：当状态变成reject时会回调的函数；

promise.then(res => {
  console.log("res", res);
}, err => {
  console.log("err", err);
})
// 等价于
promise.then(res => {
  console.log("res", res);
}).catch(err => {
  console.log("err", err);
})

(2)then被多次调用

// then方法多次调用 : 当then被多次调用时，每一个then中的回调函数都会被执行
// 所以一下代码会执行 3 次
const promisea = new Promise((resolve, rejest) => {
  resolve('aaaaaa')
})
promisea.then(res => {
  console.log("res1:", res);
})
promisea.then(res => {
  console.log("res2:", res);
})
promisea.then(res => {
  console.log("res3:", res);
})

(3)then的返回值

• 返回一个普通纸；
• 返回一个Promise；
• 返回一个实现了then方法的对象(即thenable值)；

// then的返回值  then的返回值都是一个参数
// 1.返回一个普通值
// 当返回一个普通值时,这个普通值会被最为新new的Promise的resolve的参数,所以then返回的是一个Promise
const promisea = new Promise((resolve, rejest) => {
  resolve("aaa")
})
promisea.then(res => { // 这里的第一个then方法是promisea的then方法
  return "bbb" // 相当于: new Promise((resolve,rejest) => {resolve('aaa)}) 即这个普通值会被作为新的Promise的resolve值
}).then(res => { // 这里的第二个then是第二个Promise(即 new Promise((resolve,rejest) => {resolve('aaa)}) )的then方法,而不是promisea的then方法
  console.log(res); // bbb
  // 当然这里还可以有返回值
})

// 2.返回值是一个Promise对象时
const promiseb = new Promise((resolve, rejest) => {
  resolve('aaa')
})
promiseb.then(res => { // 这里的then方法是promiseb的then方法
  return new Promise((resolve, rejest) => {
    setTimeout(() => {
      resolve('bbb')
    }, 3000)
  })
}).then(res => { // 这里的then也是new的新的Promise的then方法,而不是promiseb的
  console.log(res); // 三秒后输出  bbb
})

// 3.当返回值是一个实现了then方法的对象时
const promisec = new Promise((resolve, rejest) => {
  resolve('aaa')
})
promiseb.then(res => { // 这里的then方法是promiseb的then方法
  const obj = {
    then: function(resolve, rejest) {
      resolve('bbb')
    }
  }
  return obj  // 新的promise的状态有obj对象里的resolve或reject决定
}).then(res => {
  console.log(res); // bbb
})

2.catch方法

catch方法也是Promise对象上的一个方法：它也是放在Promise的原型上的 Promise.prototype.catch。

(1)catch的基本使用

const promiseb = new Promise((resolve, reject) => {
  // reject("promiseb")
  resolve('resolve')
})
promiseb.then(resolve => {
  console.log("resolve");
  return new Promise((resolve, reject) => {
    reject('新的promise')
  })
}).catch(err => {   // 这里的catch 首先 对应的是promiseb的reject，而不是then后新的promise，但当promiseb调用的是reject时，如果then中新的promise调用了reject，会执行这里的catch
  console.log(err);
})

(2)catch被多次调用

当某个promise对象有多个catch，调用reject或抛出异常时，每一个catch都会被执行。

const promisea = new Promise((resolve, rejest) => {
  // 当调用rejest或抛出异常时，都会执行then中的错误捕获的方法
  throw new Error('错误')
  // rejest();
})
promisea.then(undefined, (error) => {
  console.log("err", error);
})
// catch相当于then的错误的捕获的语法糖
// 当有promisea有多个catch时，每一个都会被执行调用
promisea.catch(() => {
  console.log("相当于时then错误捕获的语法糖");
})
promisea.catch(() => {
  console.log("相当于时then错误捕获的语法糖");
})
promisea.catch(() => {
  console.log("相当于时then错误捕获的语法糖");
})

(3)catch的返回值

和then返回值一样，返回的都是promise。

const promisec = new Promise((resolve, rejest) => {
  // resolve("promisec")
  rejest('promisec')
})

promisec.then(resolve => {
  console.log("promisec：", resolve);
}).catch(err => {
  console.log("err:", err);
  return 'catch'  // 这里和then的返回值一样，会生成新的Promise，如果新的Promise中调用resolve则会执行下一个then方法，如果调用reject则会执行catch方法
}).then(resolve => {
  console.log("new Promise:", resolve); // new Promise: catch
}).catch(err => {
  console.log("err:", err);
})

3.finally方法

finally是在ES9中新增的一个特性：表示无论Promise对象无论变成fulfilled还是reject状态，最终都会 被执行的代码。

const promised = new Promise((resolve, rejest) => {
  resolve("resovle");
})
promised.then(resovle => {
  console.log(resovle);
}).catch(err => {
  console.log(err);
}).finally(() => {
  console.log("最终都会执行");
})

五、Promise的类方法

1.resolve方法

then、catch、finally都是promise的实例方法，resolve是promise的类方法。

resolve的参数：

• 普通纸；
• promise
• thenable

Promise.resolve('tjx')
// 等价于
const promisee = new Promise((resolve, rejest) => {
  resolve('tjx')
})

// promise可以传入三种参数：1.普通的参数 2.promise 3.实现了then方法的对象
// 1.普通参数
const promisep = Promise.resolve('adf')
promisep.then(resolve => {
  console.log(resolve);
}).catch(err => {
  console.log(err);
})
// 2.promise
const promisepro = Promise.resolve(new Promise((resolve, rejest) => {
  resolve('sfa')
}))
promisepro.then(resolve => {
  console.log(resolve);
}).catch(err => {
  console.log(err);
})
// 3.thenable
const promiseable = Promise.resolve({
  then: function(resolve, rejest) {
    resolve()
  }
})
promiseable.then(resolve => {
  console.log(resolve);
}).catch(err => {
  console.log(err);
})  

2.rejest方法

reject方法类似于resolve方法，只是会将Promise对象的状态设置为reject状态;

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

Promise.reject('rejest')
// 相当于
const promisez = new Promise((resolve, rejest) => {
  rejest('rejest')
})

// reject的参数无论是什么都只是修改promise的rejest状态并把这个参数传递过去
const promisex = Promise.reject(new Promise((resolve, rejest) => {
  resolve('resovle')
}))
promisex.then(resolve => {
  console.log(resolve);
}).catch(err => {
  console.log(err); // promise对象
})

3.all方法

• all方法也是promise的类方法，他的作用是将多个Promise包裹在一起形成一个新的Promise；

• 新的Promise状态由包裹的所有Promise共同决定：

• • 当所有的Promise状态变成fulfilled状态时，新的Promise状态为fulfilled，并且会将所有Promise的返回值 组成一个数组；
  • 当有一个Promise状态为reject时，新的Promise状态为reject，并且会将第一个reject的返回值作为参数；

const promise1 = new Promise((resolve, rejest) => {
  resolve("1")
})
const promise2 = new Promise((resolve, rejest) => {
  resolve("2")
})
const promise3 = new Promise((resolve, rejest) => {
  // resolve("3")
  rejest('err')
})
Promise.all([promise1, promise2, promise3, '这里也可以是其他类型参数']).then(resolve => {
  console.log("当all参数中所有的promise的resolve时，执行这里的函数，resolve：", resolve); // 当all参数中所有的promise的resolve时，执行这里的函数，resolve： [ '1', '2', '3', '这里也可以是其他类型参数' ]
}).catch(err => {
  console.log("当all的参数中所有的promise中有一个rejest时，就执行这里的代码就，error：", err); // 当all的参数中所有的promise中有一个rejest时，就执行这里的代码就，error： err
})

4.allSettled方法

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

const promise4 = new Promise((resolve, rejest) => {
  resolve("1")
})
const promise5 = new Promise((resolve, rejest) => {
  resolve("2")
})
const promise6 = new Promise((resolve, rejest) => {
  // resolve("3")
  rejest('err')
})
Promise.allSettled([promise4, promise5, promise6]).then(resolve => {
  console.log(resolve); // 输出为：
                        // [
                        //   { status: 'fulfilled', value: '1' },
                        //   { status: 'fulfilled', value: '2' },
                        //   { status: 'rejected', reason: 'err' }
                        // ]
}).catch(err => {
  console.log(err); // 只会进入成功的回调，不会进入这里失败的回调
})

5.race方法

如果有一个Promise有了结果，我们就希望决定最终新Promise的状态，那么可以使用race方法：

• race是竞技、竞赛的意思，表示多个Promise相互竞争，谁先有结果，那么就使用谁的结果；

const promise7 = new Promise((resolve, rejest) => {
  setTimeout(() => {
    resolve("7")
  }, 3000)
})
const promise8 = new Promise((resolve, rejest) => {
  setTimeout(() => {
    resolve("8")
  }, 1000)
})
const promise9 = new Promise((resolve, rejest) => {
  setTimeout(() => {
    // resolve("9")
    rejest('err')
  }, 500)
})
Promise.race([promise7, promise8, promise9]).then(resolve => {
  console.log(resolve); // 返回接收到的第一个resolve，如果是rejest则执行catch中的代码
}).catch(err => {
  console.log(err);
})

6.any方法

• any方法是ES12中新增的方法，和race方法是类似的：
• • any方法会等到一个fulfilled状态，才会决定新Promise的状态；
  • 如果所有的Promise都是reject的，那么也会等到所有的Promise都变成rejected状态，然后再执行catch中的代码，那么会报一个AggregateError的错误；

const promise10 = new Promise((resolve, rejest) => {
  setTimeout(() => {
    resolve("7")
  }, 3000)
})
const promise11 = new Promise((resolve, rejest) => {
  setTimeout(() => {
    resolve("8")
  }, 1000)
})
const promise12 = new Promise((resolve, rejest) => {
  setTimeout(() => {
    rejest('err')
  }, 500)
})
Promise.any([promise10, promise11, promise12]).then(resolve => {
  console.log(resolve); // 
}).catch(err => {
  console.log(err);
})
// 首先出现的是err，但是是rejest，所以继续等待第一个resolve，出现了第一个resolve就执行then中代码，如果全是rejest，则会等到所有的rejest只会再执行rejest，然后报一个错

六、async

1.异步函数 async

async关键字用于声明一个异步函数。

异步函数的返回值是promise。

// 写法一
async function foo() {

}
// 写法二
const foo2 = async function() {

}
// 写法三
const foo3 = async () => {

}
// 写法四
class Person {
  async foo() {

  }
}

2.异步函数执行流程

异步函数的内部代码执行过程和普通的函数是一致的，默认情况下也是会被同步执行。

异步函数有返回值时，和普通函数会有区别：

• 情况一：异步函数也可以有返回值，但是异步函数的返回值会被包裹到Promise.resolve中；
• 情况二：如果我们的异步函数的返回值是Promise，Promise.resolve的状态会由Promise决定；
• 情况三：如果我们的异步函数的返回值是一个对象并且实现了thenable，那么会由对象的then方法来决定；

如果我们在async中抛出了异常，那么程序它并不会像普通函数一样报错，而是会作为Promise的reject来传递；

// 异步函数与普通函数的区别--返回值
async function foo() {
  console.log("foo function start-");
  console.log("中间件");
  console.log("foo function end-");
  
  // 1.返回一个值，这个值作为新的promise的resolve的参数

  // 返回thenable
  // return {
  //   then: function(resolve, rejest) {
  //     resolve('sfafsd')
  //   }
  // }

  // 返回Promise
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('hhhhhhhhh')
    }, 2000)
  })
}

// 异步函数的返回值一定是一个Promise
const promise = foo()
promise.then(res => {
  console.log("promise then function exec:", res);
})

// 异步函数与普通函数的区别--异常处理
async function foo() {
  console.log("foo function start");
  console.log("中间代码");
  // 异步函数中的异常，会被作为异步函数返回的Promise的reject值
  throw new Error('error message')
  console.log("foo function end");
}
foo().catch(err => {
  console.log("err", err);
})
console.log("后续代码");

七、await

async函数另外一个特殊之处就是可以在它内部使用await关键字，而普通函数中是不可以的。

await关键字有什么特点呢？

• 通常使用await是后面会跟上一个表达式，这个表达式会返回一个Promise；
• 那么await会等到Promise的状态变成fulfilled状态，之后继续执行异步函数；

• 如果await后面是一个普通的值，那么会直接返回这个值；
• 如果await后面是一个thenable的对象，那么会根据对象的then方法调用来决定后续的值；
• 如果await后面的表达式，返回的Promise是reject的状态，那么会将这个reject结果直接作为函数的Promise的 reject值；

// 1.awiat跟上表达式
function requestData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // resolve(12)
      reject(11)
    }, 2000)
  })
}

// async function foo() {
//   const res1 = await requestData() // 可以把这条代码到下一个await之前的代码看出then中处理成功的代码
//   // 当await返回为失败状态时，运行报错，因为没有写失败时的处理代码
//   console.log("后面代码1", res1);
//   console.log("后面代码2");
//   console.log("后面代码3");

//   const res2 = await requestData()
//   console.log("res2后面的代码", res2);
// }
// foo()

// 2.reject值
async function foo() {
  const res1 = await requestData()
  console.log("res1", res1);
}
foo().catch(err => {
  console.log("err:", err); // err: 11
})