JavaScript重难点解析6（Promise）

2022-06-12 01:52:55

JavaScript重难点解析6（Promise

概念
基本用法
Promise其他方法

概念

为什么要使用Promise

1.指定回调函数的方式更加灵活
2.支持链式调用, 可以解决回调地狱问题
回调地狱：回调函数嵌套调用, 外部回调函数异步执行的结果是嵌套的回调执行的条件

Promise 的状态

实例对象中的一个属性『PromiseState』

pending 未决定的
resolved / fullfilled 成功
rejected 失败

Promise 对象的值

实例对象中的另一个属性『PromiseResult』
保存着异步任务『成功/失败』的结果

resolve
reject

Promise工作流程

基本用法

Promise是ES6引入的异步编程的新解决方案。用来封装异步操作并可以获取其成功或失败的结果。
promise对象需要传入一个函数，函数接收两个参数resolve和reject，代表成功状态和失败状态，当函数中代码执行到resolve时promise对象会进入成功状态，执行到reject代表promise进入失败状态。Promise一般通过then方法调用，then方法接受两个回调函数，第一个代表成功状态的回调，第二个代表失败状态的回调。

基本使用如下：

 //实例化 Promise 对象
  const p = new Promise(function(resolve, reject){//也可以不叫resolve, reject自己指定参数名
      setTimeout(function(){
          //
          // let data = '数据库中的用户数据';
          // resolve
          // resolve(data);//data在为then调用时的value

          let err = '数据读取失败';
          reject(err);//err为then调用时的reason
      }, 1000);
  });

  //调用 promise 对象的 then 方法
  p.then(function(value){
      console.log(value);
  }, function(reason){
      console.error(reason);
  })
  //失败还可以通过catch指定
  p.catch(function(reason){
      console.error(reason);
  })

调用 then 方法 then方法的返回结果是 Promise 对象, 对象状态由回调函数的执行结果决定，依据这个特性可以很好的解决回调地狱的问题。
假设一个场景，要依次读取三个文件的内容，如果用回调函数的写法是这样的。

const fs = require("fs");

 fs.readFile('./resources/为学.md', (err, data1)=>{
     fs.readFile('./resources/插秧诗.md', (err, data2)=>{
         fs.readFile('./resources/观书有感.md', (err, data3)=>{
             let result = data1 + '\r\n' +data2  +'\r\n'+ data3;
             console.log(result);
         });
     });
 });

使用Promise可以这样写：

const fs = require("fs");

const p = (path) => {
	return new Promise((resolve, reject) => {
	    fs.readFile(path, (err, data) => {
	        resolve(data);
	    });
	});
}

p('./resources/为学.md').then(value => {
    return p('./resources/插秧诗.md');
}).then(value => {
    return p('./resources/观书有感.md');
}).then(value => {
    console.log(value.join('\r\n'));
});

很明显思路要清晰很多，如果回调次数增加效果会更明显。

Promise其他方法

Promise.resolve 方法: (value) => {}
(1) value: 成功的数据或 promise 对象
说明: 返回一个成功/失败的 promise 对象

Promise.reject 方法: (reason) => {}
(1) reason: 失败的原因
说明: 返回一个失败的 promise 对象

Promise.all 方法: (promises) => {}
(1) promises: 包含 n 个 promise 的数组
说明: 返回一个新的 promise, 只有所有的 promise 都成功才成功, 只要有一个失败了就
直接失败

Promise.race 方法: (promises) => {}
(1) promises: 包含 n 个 promise 的数组
说明: 返回一个新的 promise, 第一个完成的 promise 的结果状态就是最终的结果状态

const p1 = Promise.resolve(1)
const p2 = Promise.resolve(Promise.resolve(3))
const p3 = Promise.resolve(Promise.reject(5))
const p4 = Promise.reject(7)
const p5 = new Promise((resolve, reject) => {
setTimeout(() => {
if (Date.now()%2===0) {
resolve(1)
} else {
reject(2)
}
}, 100);
})
const pAll = Promise.all([p1, p2, p5])
pAll.then(
values => {console.log('all 成功了', values)},
reason => {console.log('all 失败了', reason)}
)
// const pRace = Promise.race([p5, p4, p1])
const pRace = Promise.race([p5, p1, p4])
pRace.then(
value => {console.log('race 成功了', value)},
reason => {console.log('race 失败了', reason)}
)

注意：

如何改变 promise 的状态?
(1) resolve(value): 如果当前是 pending 就会变为 resolved
(2) reject(reason): 如果当前是 pending 就会变为 rejected
(3) 抛出异常: 如果当前是 pending 就会变为 rejected
一个 promise 指定多个成功/失败回调函数, 都会调用吗?
当 promise 改变为对应状态时都会调用
改变 promise 状态和指定回调函数谁先谁后?
(1) 都有可能, 正常情况下是先指定回调再改变状态, 但也可以先改状态再指定回调
(2) 如何先改状态再指定回调?
① 在执行器中直接调用 resolve()/reject()
② 延迟更长时间才调用 then()
(3) 什么时候才能得到数据?
① 如果先指定的回调, 那当状态发生改变时, 回调函数就会调用, 得到数据
② 如果先改变的状态, 那当指定回调时, 回调函数就会调用, 得到数据
promise.then()返回的新 promise 的结果状态由什么决定?
(1) 简单表达: 由 then()指定的回调函数执行的结果决定
(2) 详细表达:
① 如果抛出异常, 新 promise 变为 rejected, reason 为抛出的异常
② 如果返回的是非 promise 的任意值, 新 promise 变为 resolved, value 为返回的值
③ 如果返回的是另一个新 promise, 此 promise 的结果就会成为新 promise 的结果
promise 如何串连多个操作任务?
(1) promise 的 then()返回一个新的 promise, 可以开成 then()的链式调用
(2) 通过 then 的链式调用串连多个同步/异步任务
promise 异常传透?
(1) 当使用 promise 的 then 链式调用时, 可以在最后指定失败的回调,
(2) 前面任何操作出了异常, 都会传到最后失败的回调中处理
中断 promise 链?
(1) 当使用 promise 的 then 链式调用时, 在中间中断, 不再调用后面的回调函数
(2) 办法: 在回调函数中返回一个 pendding 状态的 promise 对象

码农公寓