ES6中的Promise深入学习

2020-07-14 18:04:57 浏览数 (1)

01-Promise的含义

Promise是异步编程的一种新的解决方案，比传统的解决方案(纯回调函数)更加的方便和强大。简单来说，Promise就是一个容器，里面保存着某个未来才会结束的事情(通常是一个异步操作的结果)。

  • 具体表达：
    • 1.从语法上来说：Promise是一个构造函数
    • 2.从功能上来说：Promise对象用来封装一个异步操作并且可以获取其结果
  • 特点：
    • 1.对象的状态不受外界的影响。
    • 2.一旦状态改变就不会再变，任何时候都可以得到这个结果。

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

Promise对象的状态改变只有两种可能：a.从Pending变为Fulfilled(已成功) ；b.从Pending变为Rejected(已失败)。只要这两种情况发生，那么状态就不会再发送改变，就一直保持这个结果称为Resolved(已定型)

注意：虽然规范中用fulfill来表示成功，但在后世的 promise 实现多以resolve来指代之。

02-Promise的基本用法

Pormise对象是一个构造函数，用来生成Promise实例

注意：Promise构造函数接受一个函数作为参数，这个函数的两个参数分别是resolve和reject，由JavaScript引擎提供，不用自己部署。

代码语言：javascript复制
//1.创建一个Promise实例
let promise = new Promise(function (resolve, reject) {
      //2.执行异步操作任务
      setTimeout(()=>{
            const time = Date.now();//获取当前的时间，是偶数就表示成功，否则代表失败
            
            if(time%2 == 0){
            //3.1如果成功了，调用resolve(value)
                  resolve("异步操作成功" time);
            }else{
            //3.2如果失败了，调用reject(error)
                  reject("异步操作失败" time)
            }
      },1000)
})

resolve函数的作用：在异步操作成功时候调用，并将异步操作的结果作为参数传递出去；

reject函数的作用：在异步操作失败时候调用，并将异步操作报的错误作为参数传递出去；

Promise实例生成以后，可以用then方法分别指定Resolved状态和Rejected状态的回调函数：第一个回调函数(onResolved)是Promise对象状态变为Resolved(成功)时调用，第二个回调函数(onRejected)是Promise对象状态变为Rejected(失败)时调用。

注意：其中第二个函数(onRejected)是可选的，不一定要提供。这两个函数都接受Promise对象传出的值作为参数。

代码语言：javascript复制
promise.then(
    (value)=>{//接收得到成功的value数据
        console.log("成功的回调",value)
    },
    (error)=>{//接收得到失败的error数据
        console.log("失败的回调",error)
    }
);

03-为什么要使用Promise（灵活、解决回调地狱、then方法的基本流程）

3.1-指定回调函数的方式更加的灵活

例：使用纯回调方式去创建一个音频文件

缺点：必须要在启动异步任务之前就要给它指定回调函数

代码语言：javascript复制
//成功的回调函数
function successCallback(value){
    console.log("音频文件创建成功" value)
}
//失败的回调函数
function failureCallback(error){
    console.log("音频文件创建失败" error)
}
//使用纯回调函数
createAudioFileAsync(audioSettings,successCallback,failureCallback);

使用Promise方式来创建：可以在启动任务之后，甚至可以在完成异步任务之后指定回调函数，因此更加的灵活。

代码语言：javascript复制
const promise = createAudioFileAsync(audioSettings);//先启动异步任务
//可以在异步任务完成之后再指定回调函数
setTimeout(()=>{
    promise.then(successCallback,failureCallback)
},3000)

3.2-Promise支持链式调用，解决回调地狱问题

什么是回调地狱？回调函数的嵌套调用，外部回调函数异步执行的结果是嵌套的回调函数执行的条件

如：现在有一个读文件的需求，要一次读取a.txt、b.txt、c.txt文件，而fs.readFile又是异步读取(假设现在没有出现err错误)，那么我们就会写成下面这样。

代码语言：javascript复制
const fs = require("fs");
// 读a文件
fs.readFile(`${__dirname}/etc/a.txt`, 'utf-8', (err, data) => {
    console.log(data);
    fs.readFile(`${__dirname}/etc/b.txt`, 'utf-8', (err, data) => {
        console.log(data);
        fs.readFile(`${__dirname}/etc/c.txt`, 'utf-8', (err, data) => {
            console.log(data);
        })
    })
})

问题显而易见，如果当我们遇到这种需求用这种回调函数的嵌套去解决的话就会形成一个回调地狱，它不便于我们对代码的阅读以及不便于我们后期对代码的维护和异常处理。这个时候我们就可以用到了Promise中then方法的链式调用。

then方法返回的是一个新的Promise实例(注意：不是原来的那个Promise实例)。因此可以采用链式写法，即then方法后面再次调用另一个then方法。如：

下面的代码使用then方法依次指定了三个回调函数，第一个回调函数完成以后，会将返回结果作为参数传入第二个回调函数。第二个回调函数完成以后，如果没有return指定返回结果的话，那么下一个then方法中回调函数的value值将为undefined。

代码语言：javascript复制
getFile("/a.txt").then((value)=>{
    console.log(value)//promise中resolve函数传递过来的value值
    return 5;
}).then((value)=>{
    console.log(value)//5
}).then((value)=>{
    console.log(value)//undefined
})

采用链式的then可以指定一组按照次序掉用的回调函数。这时候，前一个回调函数有可能返回的还是一个Promise对象(即有异步操作),而最后一个回调函数就会等待这个Promise对象状态发生变化，再被调用。如：

代码语言：javascript复制
getFile("/a.txt").then((value)=>{
    getFile(value.url);
}).then(value=>{
    console.log("getFile(value.url)成功后resolve的参数:" value)
})

好了，明白了then方法的基本流程之后，我们就可以对上面读文件的代码进行Promise方式的改写，如下：

代码语言：javascript复制
function getReadfilePromise(filename) {
    return new Promise((resolve, reject) => {
        fs.readFile(`${__dirname}/etc/${filename}.txt`, 'utf-8', (err, data) => {
            if (err) {
                reject(err);
            } else {
                resolve(data);
            }
        })
    })
}

// 解决回调地狱
// 如果这个then方法，它能够返回一个promise对象，那就可以继续点出then方法,这样就能依次读取a、b、c三个文件。
getReadfilePromise("a").then((res) => {
    console.log(res);
    return getReadfilePromise("b");
}).then((res) => {
    console.log(res);
    return getReadfilePromise("c");
}).then((res) => {
    console.log(res);
})

04-Promise的API说明(catch、all、race、resolve、reject、finally)

更多详细API可以参考阮一峰的ES6入门教程-Promise：https://es6.ruanyifeng.com/#docs/promise

4.1-Promise.prototype.catch()

这个方法用于指定发生错误时候的回调函数，then的语法糖，相当于：then(null,onRejected)

下面的代码promise抛出一个错误就会被catch放指定的回调函数所捕获。

代码语言：javascript复制
//假设p是一个promise实例
p
.then((value)=>console.log("resolved成功后的" value))
.catch((error)=>console.log("reject失败后的" error));
//等同于
p
.then(value)=>console.log("resolved成功后的" value))
.then(null,(error)=>console.log("reject失败后的" error));

只要Promise抛出一个错误就会被catch方法指定的回调函数所捕获。如：

代码语言：javascript复制
let p = new Promise((resolve,reject)=>{
    throw new Error('test');
})
p.catch(error=>{
    console.log(error)//Error:test
})

由此我们可以知道reject方法的作用等同于抛出错误，如果Promise的状态已经变味resolved，那么再抛出错误是无效的。如：下面代码中，Promise在resolve语句后面再抛出错误，并不会被捕获，等于没有抛出。因为Promsie状态一旦改变，就会永久保持这哦状态，不会再改变了。

代码语言：javascript复制
let p = new Promise((resolve,reject)=>{
    resolve("ok");
    throw new Error('test');
})
p
.then(value=>{console.log(value)})
.catch(error=>{console.log(error)})//ok

Promise对象的错误具有“冒泡性质”，会一直向后传递，知道被捕获为止，也就是说错误总会被下一个catch语句捕获。也成为异常穿透。一般来说，不要在then方法中定义Rejected的回调函数(即then的第二个参数)，而使用catch方法才对。如下：

下面的第二种写法要好于第一种写法，因为第二种写法可以捕获前面then方法执行中的错误，更接近同步的写法(try/catch)。

代码语言：javascript复制
//第一种写法

4.2-Promise.all()

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

Promise.all方法接受一个数组作为参数，下面代码中p1,p2,p3都是Promise对象的实例；如果不是就会先调用Promise.resolve方法，将参数转为Promise实例再处理(Promise.all方法的参数不一定是数组，但是必须有Iterator接口，且返回的每个成员都是Promise实例)。

例：let p = Promise.all([p1,p2,p3])

p的状态由p1,p2,p3决定，分为两种情况：1.只有p1,p2,p3的状态都变成Resolved(成功),p的状态才会变成Resolved(成功)，此时p1、p2、p3的返回值组成一个数组返回给p的回调函数；2.只要p1,p2,p3有一个被Rejected，那么p的状态就也变成Rejected，此时第一个被Rejected的实例返回值会传递给p的回调函数。例：

代码语言：javascript复制
const getDataPromise = connectDatabase();//假设这个方法返回一个promise对象

const booksPromise = getDataPromise.then(findBooks);
const usersPromise = getDataPromise.then(getUsers);

Promise.all([booksPromise,usersPromise])
.then([books,user]=>{
    pickRecomment(books,user)
})

上面代码中，只有在booksPromise usersPromise ，两个异步操作都返回，才会触发pickRecomment

注意点：如果作为参数的Promise实例自身定义了catch方法，那么它被rejected时候并不会触发Promise.all()的catch方法。

代码语言：javascript复制
const p1 = new Promise((resolve, reject) => {
  resolve('hello');
})
.then(result => result)
.catch(e => e);

const p2 = new Promise((resolve, reject) => {
  throw new Error('报错了');
})
.then(result => result)
.catch(e => e);

Promise.all([p1, p2])
.then(result => console.log(result))
.catch(e => console.log(e));
// ["hello", Error: 报错了]

如果p2没有自己的catch方法，就会调用Promise.all()的catch方法。

代码语言：javascript复制
const p1 = new Promise((resolve, reject) => {
  resolve('hello');
})
.then(result => result);

const p2 = new Promise((resolve, reject) => {
  throw new Error('报错了');
})
.then(result => result);

Promise.all([p1, p2])
.then(result => console.log(result))
.catch(e => console.log(e));
// Error: 报错了

4.3-Promise.race()

Promise.race()方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例。

例：const p = Promise.race([p1, p2, p3]);

上面的代码中，只要p1、p2、p3中有一个实例率先改变状态，p的状态就会跟着改变。那个率先改变的Promise实例的返回值机会传递给P的回调函数；race方法的参数和all方法的参数一样，如果不是Promise实例，机会调用下面的resolve方法进行处理。

例：如果指定时间内没有获得结果，就将 Promise 的状态变为reject，否则变为resolve。

下面代码中，如果 5 秒之内fetch方法无法返回结果，变量p的状态就会变为rejected，从而触发catch方法指定的回调函数。

代码语言：javascript复制
const p = Promise.race([
  fetch('/resource-that-may-take-a-while'),
  new Promise(function (resolve, reject) {
    setTimeout(() => reject(new Error('request timeout')), 5000)
  })
]);

p
.then(value=>{console.log(value)})
.catch(value=>{console.log(error)});

4.4-Promise.prototype.finally()

finally()方法用于指定不管 Promise 对象最后状态如何，都会执行的操作。该方法是 ES2018 引入标准的。

例：下面的代码中，不管promise最后的状态，在执行完then或catch指定的回调函数以后，都会执行finally方法指定的回调函数。

代码语言：javascript复制
promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});

finally方法的回调函数不接受任何参数，因此finally方法里面的操作应该是与状态无关的，不依赖于Promise的执行结果。

finally方法总是会返回原来的值：

代码语言：javascript复制
// resolve 的值是 undefined
Promise.resolve(2).then(() => {}, () => {})

// resolve 的值是 2
Promise.resolve(2).finally(() => {})

// reject 的值是 undefined
Promise.reject(3).then(() => {}, () => {})

// reject 的值是 3
Promise.reject(3).finally(() => {})

4.5-Promise.resolve()

有时需要将现有对象转为 Promise 对象，Promise.resolve()方法就起到这个作用。

从下面这段可以看出，Promise.resolve()方法其实就是newPromise(resolve =>resolve('foo'))的一个语法糖。

代码语言：javascript复制
Promise.resolve('foo')
// 等价于
new Promise(resolve => resolve('foo'))
  • 对于resolve()方法的参数其实还分为四种情况：
    • 1.参数是一个Promise实例：不作任何修改。原封不动的返回这个实例
    • 2.参数是一个thenable对象：将这个对象转为Promise后，立即执行thenable对象的then方法
    • 3.参数是不具有then方法的对象或者根本不是对象：返回一个新的Promise对象，状态为Resolved
    • 4.不带任何参数：直接返回一个Resolved状态的Promise对象

4.6-Promise.reject()

Promise.reject(reason)方法也会返回一个新的 Promise 实例，该实例的状态为rejected。

注意：Promise.reject()方法的参数，会原封不动地作为reject的理由，变成后续方法的参数。这一点与Promise.resolve方法不一致。

05-Promise的关键问题以及注意点

01-如何改变promise的状态？

  • （1）resolve(value):如果当前是pendding就会变成resolved
  • （2）reject(error):如果当前是pendding就会变成rejected
  • （3）抛出异常：如果当前是pendding就会变成rejected

02-一个promise指定多个成功/失败回调函数，都会调用吗？

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

03-改变promise状态和指定回调函数谁先谁后？

都有可能，正常情况下是先指定回调函数再改变状态，但也可以先改变状态再指定回调函数

  • （2）如何先改状态再指定回调？
    • a.在执行器中直接调用resolve()/reject()
    • b.延迟更长时间再调用then方法
  • （3）什么时候才能得到数据？
    • a.如果先指定的回调函数，那当状态发生改变的时候，回调函数就会调用，得到数据
    • b.如果先改变的状态，那当指定回调函数的时候，回调函数就会调用，得到数据

04-立即resolve的Promise对象是在什么时候执行,Promise的回调是同步回调还是异步回调？

  • 1.立即resolve的Promise对象是在本轮“事件循环”结束时执行，而不是在下一轮“事件循环”开始时执行
  • 2.Promise的回调函数是同步回调函数，Promise一旦建立就会立即执行，无法中途取消

例：下面代码中

  • 1.console.log('hello')在promise建立时输出是立即执行，因此最先输出
  • 2.再是同步代码console.log('one')执行
  • 3.Promise.resolve().then()在本轮“事件循环”结束时执行
  • 4.setTimeout(fn, 0)在下一轮“事件循环”开始时执行，
代码语言：javascript复制
setTimeout(function(){
    console.log('three')
},0)

new Promise((resolve,reject)=>{
      //同步回调
      console.log('hello');//Promise一旦建立就会立即执行，无法中途取消
      resolve()
}).then(()=>{
      console.log("two");
})

console.log('one')
//hello
//one
//two
//three

注意点：调用resolve或者reject并不会终结Promise的参数函数的执行

例：下面的代码虽然调用resolve(1)，但是console.log(“2”)还是会执行，并且最先输出，因为立即resolve的Promise是在本轮事件循环的末尾执行，总是晚于本轮循环的同步任务。

代码语言：javascript复制
new Promise((resolve,reject)=>{
    resolve(1);
    console.log("2");
}).then(value=>{
    console.log(value);
})
//2
//1

一般来说，调用resolve或者reject，Promise的使命就完成了，后继操作应该放到then方法中，而不是写在resolve或者reject后面。

05-promise.then()返回的新promise的结果状态由什么决定？

  • （1）简单表达：由then()指定的回调函数执行的结果或返回的结果决定
  • （2）详细表达：
    • 如果抛出异常，新promise变为rejected，error值为抛出的异常
    • 如果返回的是非promise的任意值(没有异常)，新promise变为resolved，value为返回的值
    • 如果返回的是另一个新promise，此promise的结果就会成为新promise 的结果

06- promise如何串联多个(同步/异步)操作任务？

代码语言：javascript复制
new Promise((resolve, reject) => {
            setTimeout(() => {
                console.log("执行任务1(异步)");
                resolve(1)
            }, 1000)
        }).then(value => {
            console.log("任务1的结果:"   value);
            console.log("执行任务2(同步)");
            return 2;
        }).then(value => {
            console.log("任务2的结果:"   value);
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    console.log("执行任务3(异步)");
                    resolve(3);
                }, 1000)
            })
        }).then(value => {
            console.log("任务3的结果:"   value);
        })
//执行任务1(异步)
//任务1的结果:1
//执行任务2(同步)
//任务2的结果:2
//执行任务3(异步)
//任务3的结果:3

07-如何中断promise链？

如何在使用promise的then链式调用的时候。在中间中断？不再调用后面的回调函数？

方法：在回调函数中返回一个pendding状态的promise对象(return new Promise(()=>{}))

ecmascript javascript

0 人点赞