Promise入门到精通(1.5w字详解)

导读:本篇文章讲解 Promise入门到精通(1.5w字详解),希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

Promise详解

Promise的出现

我们在此之前,要知道什么是同步,异步,在这里我就不过多篇幅地去整理了

我们知道,我们异步编程的场景,⼤部分情况都是通过回调函数来进⾏

那么,什么是回调?

回调的定义

把函数 A 传给另一个函数 B 调用,那么函数 A 就是回调函数。

例如在浏览器中发送 ajax 请求,就是常⻅的⼀个异步场景,发送请求后,需要等待一段时间,等服务端响应之后我们才能拿到结果。如果我们希望在异步结束之后执⾏某个操作,就只能通过回调函数这样的⽅式进⾏操作。

    let dynamicFunc = function (callback) {
      setTimeout(function () {
        callback();
      }, 1000);
    };

    dynamicFunc(function () {
      console.log('shaka');
    });

例如上⾯这个例⼦,dynamicFunc 就是⼀个异步函数,⾥⾯ setTimeout 会在 1s 之后调⽤传⼊的 callback 函数。按照上⾯的调⽤⽅式,最终 1s 之后,会打印 shaka 这个结果。

回调的缺点

回调的写法比较直观,不需要 return,层层嵌套即可。但也存在两个问题:

  1. 如果嵌套过深,则会出现回调地狱的问题。
  2. 不同的函数,回调的参数,在写法上可能不一致,导致不规范、且需要单独记忆

我们来具体看看这两个问题。
如果多个异步函数存在依赖关系(比如,需要等第一个异步函数执行完成后,才能执行第二个异步函数;等第二个异步函数执行完毕后,才能执行第三个异步函数),就需要多个异步函数进⾏层层嵌套,⾮常不利于后续的维护,而且会导致回调地狱的问题。

关于回调地狱,我们来举一个形象的例子:

假设买菜、做饭、洗碗、倒厨余垃圾都是异步的。

但真实的场景中,实际的操作流程是:买菜成功之后,才能开始做饭。做饭成功后,才能开始洗碗。洗碗完成后, 再倒厨余垃圾。这里的一系列动作就涉及到了多层嵌套调用,也就是回调地狱。

关于回调地狱,我们来看看几段代码举例。

1.1、定时器的代码举例:(回调地狱)

    setTimeout(() => {
      //第一层回调
      console.log('延迟1s后输出')

      setTimeout(() => {
        //第二层回调
        console.log('延迟2s后输出')

        setTimeout(() => {
          //第三层回调
          console.log('延迟3s后输出');
        }, 3000)
      }, 2000)
    }), 1000

1.2、Node.js 读取文件的代码举例:(回调地狱)

fs.readFile(A, 'utf-8', function (err, data) {
    fs.readFile(B, 'utf-8', function (err, data) {
        fs.readFile(C, 'utf-8', function (err, data) {
            fs.readFile(D, 'utf-8', function (err, data) {
                console.log('shaka:' + data);
            });
        });
    });
});

上面代码的逻辑为:先读取 A 文本内容,再根据 A 文本内容读取 B,然后再根据 B 的内容读取 C。为了实现这个业务逻辑,上面的代码就很容易形成回调地狱。

1.3、ajax 请求的代码举例:(回调地狱)

// 伪代码
ajax('a.json', (res1) => {
    console.log(res1);
    ajax('b.json', (res2) => {
        console.log(res2);
        ajax('c.json', (res3) => {
            console.log(res3);
        });
    });
});

2、回调的写法不一致问题

// Node.js 读取文件时,成功回调和失败回调,是通过 error参数来区分
readFile('d:\\readme.text', function (err, data) {
    if (error) {
        console.log('文件读取失败');
    } else {
        console.log('文件读取成功');
    }
});

// jQuery的 ajax 写法中,成功回调和失败回调,是通过两个回调函数来区分
$.ajax({
    url: '/ajax.json',
    success: function (response) {
        console.log('文件读取成功');
    },
    error: function (err) {
        console.log('文件读取失败');
    },
});

我们可以看到,上面的代码中,成功回调和失败回调,写法不统一,需要单独记忆,容易出错。

小结

  1. 代码耦合性太强,牵一发而动全身,难以维护
  2. 大量冗余的代码相互嵌套,代码的可读性变差

在 ES5 中,当进行多层嵌套回调时,会导致代码层次过多,很难进行后续维护和二次开发;而且会导致回调地狱的问题。ES6 中的 Promise 就可以解决这些问题。

Promise的介绍

  1. Promise 是一个构造函数
  • 我们可以创建 Promise 的实例 const p = new Promise()
  • new 出来的 Promise 实例对象,代表一个异步操作
  1. Promise.prototype 上包含一个 .then() 方法
  • 每一次 new Promise() 构造函数得到的实例对象
  • 都可以通过原型链的方式访问到 .then() 方法,例如 p.then()
  1. .then() 方法用来预先指定成功和失败的回调函数
  • p.then(成功的回调函数,失败的回调函数)
  • p.then(result => { }, error => { })
  • 调用 .then() 方法时,成功的回调函数是必选的、失败的回调函数是可选的

Promise 对象, 可以用同步的表现形式来书写异步代码(也就是说,代码看起来是同步的,但本质上的运行过程是异步的)。使用 Promise 主要有以下好处:

  • 1、可以很好地解决回调地狱的问题(避免了层层嵌套的回调函数)。
  • 2、语法简洁、可读性强,便于后期维护。
  • 3、Promise 对象提供了简洁的 API,使得管理异步操作更加容易。比如多任务等待合并
// 伪代码1
myPromise()
    .then(
        function () {},
        function () {}
    )
    .then(
        function () {},
        function () {}
    )
    .then(
        function () {},
        function () {}
    );

// 伪代码2
是时候展现真正的厨艺了().然后(买菜).然后(做饭).然后(洗碗);

上面的伪代码可以看出,即便在业务逻辑上是层层嵌套,但是代码写法上,却十分优雅,也没有过多的嵌套。

以上也说了Promise的步骤
(1)通过 new Promise() 构造出一个 Promise 实例。Promise 的构造函数中传入一个参数,这个参数是一个函数,该函数用于处理异步任务。

(2)函数中传入两个参数:resolve 和 reject,分别表示异步执行成功后的回调函数和异步执行失败后的回调函数。代表着我们需要改变当前实例的状态到已完成或是已拒绝

(3)通过 promise.then() 和 promise.catch() 处理返回结果(这里的 promise 指的是 Promise 实例)。

promise 的 3 个状态

  • 初始化(等待中):pending

  • 成功:fulfilled

  • 失败:rejected

当 new Promise()执行之后,promise 对象的状态会被初始化为pending,这个状态是初始化状态。new Promise()这行代码,括号里的内容是同步执行的。括号里可以再定义一个 异步任务的 function,function 有两个参数:resolve 和 reject。如下:

  • 如果请求成功了,则执行 resolve(),此时,promise 的状态会被自动修改为 fulfilled。

  • 如果请求失败了,则执行 reject(),此时,promise 的状态会被自动修改为 rejected

(2)promise.then()方法:只有 promise 的状态被改变之后,才会走到 then 或者 catch。也就是说,在 new Promise()的时候,如果没有写 resolve(),则 promise.then() 不执行;如果没有写 reject(),则 promise.catch() 不执行。

then()括号里面有两个参数,分别代表两个函数 function1 和 function2:

  • 如果 promise 的状态为 fulfilled(意思是:如果请求成功),则执行 function1 里的内容

  • 如果 promise 的状态为 rejected(意思是,如果请求失败),则执行 function2 里的内容

另外,resolve()和 reject()这两个方法,是可以给 promise.then()传递参数的。

关于 promise 的状态改变,以及如何处理状态改变,伪代码及注释如下:

// 创建 promise 实例
let promise = new Promise((resolve, reject) => {
    //进来之后,状态为pending
    console.log('同步代码'); //这行代码是同步的
    //开始执行异步操作(这里开始,写异步的代码,比如ajax请求 or 开启定时器)
    if (异步的ajax请求成功) {
        console.log('333');
        resolve('请求成功,并传参'); //如果请求成功了,请写resolve(),此时,promise的状态会被自动修改为fulfilled(成功状态)
    } else {
        reject('请求失败,并传参'); //如果请求失败了,请写reject(),此时,promise的状态会被自动修改为rejected(失败状态)
    }
});
console.log('222');

//调用promise的then():开始处理成功和失败
promise.then(
    (successMsg) => {
        // 处理 promise 的成功状态:如果promise的状态为fulfilled,则执行这里的代码
        console.log(successMsg, '成功了'); // 这里的 successMsg 是前面的 resolve('请求成功,并传参')  传过来的参数
    },
    (errorMsg) => {
        //处理 promise 的失败状态:如果promise的状态为rejected,则执行这里的代码
        console.log(errorMsg, '失败了'); // 这里的 errorMsg 是前面的 reject('请求失败,并传参') 传过来的参数
    }
);

Promise 的状态一旦改变,就不能再变

代码举例:

const p = new Promise((resolve, reject) => {
    resolve(1); // 代码执行到这里时, promise状态是 fulfilled
    reject(2); // 尝试修改状态为 rejected,是不行的。因为状态执行到上一行时,已经被改变了。
});

p.then((res) => {
    console.log(res);
}).catch((err) => {
    console.log(err);
});

上方代码的打印结果是 1,而不是 2,详见注释。

Promise 的状态改变,是不可逆的

小结

1、promise 有三种状态:等待中、成功、失败。等待中状态可以更改为成功或失败,已经更改过状态后⽆法继续更改(例如从失败改为成功)。

2、promise 实例中需要传⼊⼀个函数,这个函数接收两个参数,执⾏第⼀个参数之后就会改变当前 promise 为「成功」状态,执⾏第⼆个参数之后就会变为「失败」状态。

3、通过 .then ⽅法,即可在上⼀个 promise 达到成功时继续执⾏下⼀个函数或 promise。同时通过 resolve 或 reject 时传⼊参数,即可给下⼀个函数或 promise 传⼊初始值。

4、失败的 promise,后续可以通过 promise 自带的 .catch ⽅法或是 .then ⽅法的第⼆个参数进⾏捕获。

封装定时器

传统写法

写法 1:

// 定义一个异步的延迟函数:异步函数结束1秒之后,再执行cb回调函数
function fun1(cb) {
    setTimeout(function () {
        console.log('即将执行cb回调函数');
        cb();
    }, 1000);
}

// 先执行异步函数 fun1,再执行回调函数 myCallback
fun1(myCallback);

// 定义回调函数
function myCallback() {
    console.log('我是延迟执行的cb回调函数');
}

写法 2:(精简版,更常见)

// 定义一个异步的延迟函数:异步函数结束1秒之后,再执行cb回调函数
function fun1(cb) {
    setTimeout(cb, 1000);
}

// 先执行异步函数fun1,再执行回调函数
fun1(function () {
    console.log('我是延迟执行的cb回调函数');
});

上⾯的例⼦就是最传统的写法,在异步结束后通过传入回调函数的方式执⾏函数。

学习 Promise 之后,我们可以将这个异步函数封装为 Promise,如下。

Promise 写法

function myPromise() {
    return new Promise((resolve) => {
        setTimeout(resolve, 1000);
    });
}

/* 【重要】上面的 myPromise 也可以写成:
function myPromise() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve();
        }, 1000);
    });
}
*/

// 先执行异步函数 myPromise,再执行回调函数
myPromise().then(() => {
    console.log('我是延迟执行的回调函数');
});

读取文件

传统写法

//读取文件 1.txt
fs.readFile('./files/1.txt', 'utf8', (err1, r1) => {
  if (err1) return console.log(err.message);//读取文件1失败
  console.log(r1);//读取文件1成功
  //读取文件 2.txt
  fs.readFile('./files/2.txt', 'utf8', (err2, r2) => {
    if (err2) return console.log(err.message);//读取文件2失败
    console.log(r2);//读取文件2成功
    //读取文件 3.txt
    fs.readFile('./files/3.txt', 'utf8', (err3, r3) => {
      if (err3) return console.log(err.message);//读取文件3失败
      console.log(r3);//读取文件3成功
    })
  })
})

基于 then-fs 读取文件内容

由于 node.js 官方提供的 fs 模块仅支持以回调函数的方式读取文件,不支持 Promise 的调用方式。因此,需要先运行如下的命令,安装 then-fs 这个第三方包,从而支持我们基于 Promise 的方式读取文件的内容:
首先先安装一下
在这里插入图片描述
调用 then-fs 提供的 readFile() 方法,可以异步地读取文件的内容,它的返回值是 Promise 的实例对象。因此可以调用 .then() 方法为每个 Promise 异步操作指定成功和失败之后的回调函数。示例代码如下:

import thenFs from 'then-fs'

thenFs.readFile('./files/1.txt', 'utf8').then((r1) => {console.log(r1)})
thenFs.readFile('./files/2.txt', 'utf8').then((r2) => {console.log(r2)})
thenFs.readFile('./files/3.txt', 'utf8').then((r3) => {console.log(r3)})

上述的代码无法保证文件的读取顺序,需要做进一步的改进!

Promise进行改进

import thenFs from 'then-fs'

thenFs
  .readFile('./files/11.txt', 'utf8')
  .then((r1) => {
    console.log(r1)
    return thenFs.readFile('./files/2.txt', 'utf8')
  })
  .then((r2) => {
    console.log(r2)
    return thenFs.readFile('./files/3.txt', 'utf8')
  })
  .then((r3) => {
    console.log(r3)
  })

在 Promise 的链式操作中如果发生了错误,可以使Promise.prototype.catch 方法进行捕获和处理

import thenFs from 'then-fs'

thenFs
  .readFile('./files/11.txt', 'utf8')
  .then((r1) => {
    console.log(r1)
    return thenFs.readFile('./files/2.txt', 'utf8')
  })
  .then((r2) => {
    console.log(r2)
    return thenFs.readFile('./files/3.txt', 'utf8')
  })
  .then((r3) => {
    console.log(r3)
  })
  .catch(err => {  //捕获第一行发生的错误,并输出
    console.log(err.message);
  })

如果不希望前面的错误导致后续的 .then 无法正常执行,则可以将 .catch 的调用提前,示例代码如下:

import thenFs from 'then-fs'

thenFs
  .readFile('./files/11.txt', 'utf8')
  .catch((err) => {
    console.log(err.message)
  })
  .then((r1) => {
    console.log(r1)
    return thenFs.readFile('./files/2.txt', 'utf8')
  })
  .then((r2) => {
    console.log(r2)
    return thenFs.readFile('./files/3.txt', 'utf8')
  })
  .then((r3) => {
    console.log(r3)
  })

Promise 的常用 API 分类

Promise 的实例方法

实例方法:我们需要先 new 一个 promise 实例对象,然后通过 promise 对象去调用 thencatchfinally方法。这几个方法就是 Promise 的实例方法。

Promise 的自带 API 提供了如下实例方法:

  • promise.then():获取异步任务的正常结果。

  • promise.catch():获取异步任务的异常结果。

  • promise.finaly():异步任务无论成功与否,都会执行。

Promise 的静态方法

之前讲的都是 Promise 的实例方法;现在,我们来详细讲一下 Promise 的静态方法

静态方法:可以直接通过大写的Promise.xxx调用的方法。这里的xxx就称之为静态方法。

Promise 的自带 API 提供了如下静态方法:

  • Promise.resolve()

  • Promise.reject()

  • Promsie.all():并发处理多个异步任务,所有任务都执行成功,才算成功(走到 resolve);只要有一个失败,就会马上走到 reject,整体都算失败。

  • Promise.race():并发处理多个异步任务,返回的是第一个执行完成的 promise,且状态和第一个完成的任务状态保持一致。

  • Promise.allSettled():并发处理多个异步任务,返回所有任务的执行结果(包括成功、失败)。当你有多个彼此不依赖的异步任务执行完成时,或者你想知道每个 promise 的结果时,通常使用它。

  • Promise.all()

  • Promise.any()

Promise.all()

Promsie.all([p1, p2, p3]):并发处理多个异步任务,所有任务都执行成功,才算成功(才会走到 then);只要有一个任务失败,就会马上走到 catch,整体都算失败。参数里传的是 多个 promise 实例组成的数组。

简单理解:Promise.all() 方法会发起并行的 Promise 异步操作,等所有的异步操作全部结束后才会执行下一步的 .then
操作(等待机制)

语法举例

1、异步任务都执行成功时

const promise1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('执行 promise1');
        resolve('promise 1 成功');
    }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('执行 promise2');
        resolve('promise 2 成功');
    }, 2000);
});

const promise3 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('执行 promise3');
        resolve('promise 3 成功');
    }, 3000);
});

Promise.all([promise1, promise2, promise3])
    .then((res) => {
        // 三个异步任务都执行成功,才会走到这里
        // 这里拿到的 res,是三个成功的返回结果组成的数组
        console.log(JSON.stringify(res));
    })
    .catch((err) => {
        // 只要有一个异步任务执行失败,就会马上走到这里
        console.log(err);
    });

打印结果:

// 1秒后
执行 promise1

// 2秒后
执行 promise2

// 3秒后
执行 promise3
["promise 1 成功","promise 2 成功","promise 3 成功"]

2、异步任务有至少一个执行失败时

const promise1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('执行 promise1');
        resolve('promise 1 成功');
    }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('执行 promise2');
        // 这里通过 reject() 的方式,表示任务执行失败
        reject('promise 2 失败');
    }, 2000);
});

const promise3 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('执行 promise3');
        resolve('promise 3 成功');
    }, 3000);
});

Promise.all([promise1, promise2, promise3])
    .then((res) => {
        // 三个异步任务都执行成功,才会走到这里
        console.log('走到 then:' + JSON.stringify(res));
    })
    .catch((err) => {
        // 只要有一个异步任务执行失败,就会马上走到这里
        console.log('走到 catch:' + err);
    });

打印结果:

// 1秒后
执行 promise1

// 2秒后
执行 promise2
走到 catch:promise 2 失败

// 3秒后
执行 promise3

可以看到,当 promise2 执行失败之后,马上就走到了 catch,而且 promise3 里的 resolve 并没有执行。

读文件例子

import thenFs = require("then-fs");

//1. 定义一个数组,存放3个读文件的异步操作
const promiseArr = [
  thenFs.readFile('./files/1.txt', 'utf8'),
  thenFs.readFile('./files/2.txt', 'utf8'),
  thenFs.readFile('./files/3.txt', 'utf8'),
]
//2. 将Promise的数组,作为Promise.all()的参数
Promise.all(promiseArr)
  .then(([r1, r2, r3]) => {  //2.1 所有文件读取成功
    console.log(r1, r2, r3);
  })
  .catch(err => {
    console.log(err.message);  //2.2 捕获Promise异步操作中的错误
  })

Promise.race()

Promise.race([p1, p2, p3]):并发处理多个异步任务,返回的是第一个执行完成的 promise,且状态和第一个完成的任务状态保持一致。参数里传的是多个 promise 实例组成的数组。

上面这句话,第一次读时,可能很绕口。我说的再通俗一点:在多个同时执行的异步任务中,先找出哪个异步任务最先执行完成(无论是走到 resolve,还是走到 reject,都算执行完成),整体的状态就跟这个任务保持一致。如果这个任务执行成功,那整体就算成功(走到 then);如果这个任务执行失败,那整体就算失败(走到 catch)。

race的中文翻译,可以理解为“竞赛”。意思是,谁先抢到名额,就认定谁了。无论这个人最终的结局是成功或者失败,整体的结局,都以这个人的结局为准。

我刚开始学 Promise.race()的时候,误以为它的含义是“只要有一个异步执行成功,整体就算成功(走到 then);所有任务都执行失败,整体才算失败(走到 catch)”。现在想来,真是大错特错,过于懵懂。

现在我顿悟了,准确来说,Promise.race()强调的是:只要有一个异步任务执行完成,整体就是完成的。

Promise.race()的应用场景:在众多 Promise 实例中,最终结果只取一个 Promise,谁返回得最快就用谁的 Promise

简单理解:Promise.race() 方法会发起并行的 Promise 异步操作,只要任何一个异步操作完成,就立即执行下一步的.then操作(赛跑机制)。

示例代码如下:

语法举例

场景 1、所有任务都执行成功时

const promise1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('执行 promise1');
        resolve('promise 1 成功');
    }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('执行 promise2');
        resolve('promise 2 成功');
    }, 2000);
});

const promise3 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('执行 promise3');
        resolve('promise 3 成功');
    }, 3000);
});

Promise.race([promise1, promise2, promise3])
    .then((res) => {
        // 第一个完成的任务,如果执行成功,就会走到这里
        // 这里拿到的 res,是第一个成功的 promise 返回的结果,不是数组
        console.log(JSON.stringify(res));
    })
    .catch((err) => {
        // 第一个完成的任务,如果执行失败,就会走到这里
        console.log(err);
    });

打印结果:

// 1秒后
执行 promise1
"promise 1 成功"

// 2秒后
执行 promise2

// 3秒后
执行 promise3

场景 2、第一个任务成功、第二个任务失败时

const promise1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('执行 promise1');
        resolve('promise 1 成功');
    }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('执行 promise2');
        // 第二个任务执行失败时
        reject('promise 2 失败');
    }, 2000);
});

const promise3 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('执行 promise3');
        resolve('promise 3 成功');
    }, 3000);
});

Promise.race([promise1, promise2, promise3])
    .then((res) => {
        // 第一个完成的任务,如果执行成功,就会走到这里
        console.log('走到then:' + res);
    })
    .catch((err) => {
        // 第一个完成的任务,如果执行失败,就会走到这里
        console.log('走到catch:' + err);
    });

打印结果:

// 1秒后
执行 promise1
走到then:promise 1 成功

// 2秒后
执行 promise2

// 3秒后
执行 promise3

可以看出,场景 2 的打印结果和场景 1 的打印结果,是一样的。因为最新执行完成的任务,是成功的,所以整体会马上走到 then,且整体就算成功。

场景 3、第一个任务失败、第二个任务成功时

const promise1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('执行 promise1');
        // 第一个任务执行失败时
        reject('promise 1 失败');
    }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('执行 promise2');
        resolve('promise 2 成功');
    }, 2000);
});

const promise3 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('执行 promise3');
        resolve('promise 3 成功');
    }, 3000);
});

Promise.race([promise1, promise2, promise3])
    .then((res) => {
        // 第一个完成的任务,如果执行成功,就会走到这里
        console.log('走到then:' + res);
    })
    .catch((err) => {
        // 第一个完成的任务,如果执行失败,就会走到这里
        console.log('走到catch:' + err);
    });

打印结果:

// 1秒后
执行 promise1
走到catch:promise 1 失败

// 2秒后
执行 promise2

// 3秒后
执行 promise3

读取文件例子

import thenFs from 'then-fs'
// 1.定义一个数组,存放3个读文件的异步操作
const promiseArr = [
  thenFs.readFile('./files/3.txt', 'utf8'),
  thenFs.readFile('./files/2.txt', 'utf8'),
  thenFs.readFile('./files/1.txt', 'utf8'),
]
// 2.将Promise的数组,作为Promise.race()的参数
Promise.race(promiseArr)
  .then(result => { //2.1 只要任何一个异步操作完成,就立即执行成功的回调函数(赛跑机制)
    console.log(result)
  })
  .catch(err => { //2.2 捕获promise异步操作的错误
    console.log(err.message);
  })

基于 Promise 封装读文件的方法

方法的封装要求:

  1. 方法的名称要定义为 getFile
  2. 方法接收一个形参 fpath,表示要读取的文件的路径
  3. 方法的返回值为 Promise 实例对象

1. getFile 方法的基本定义

//1. 方法的名字为getFile
//2.方法接收一个形参fpath,表示要读取的文件的路径
function getFile(fpath) {
//3. 返回一个Promise实例对象
  return new Promise() 
}

第 5 行代码中的 new Promise() 只是创建了一个形式上的异步操作

2. 创建具体的异步操作

如果想要创建具体的异步操作,则需要在 new Promise() 构造函数期间,传递一个 function 函数,将具体的异步操作定义到 function 函数内部。示例代码如下:

//1. 方法的名字为getFile
//2.方法接收一个形参fpath,表示要读取的文件的路径
function getFile(fpath) {
//3. 返回一个Promise实例对象
  return new Promise(function(){
	//4。这行表示一个具体的、读文件的异步操作
	fs.readFile(fpath,'utf8',(err,dataStr) => { } )
}) 
}

3.获取 .then 的两个实参

通过 .then() 指定的成功和失败的回调函数,可以在 function 的形参中进行接收,示例代码如下:
在这里插入图片描述

4. 调用 resolve 和 reject 回调函数

Promise 异步操作的结果,可以调用 resolve 或 reject 回调函数进行处理。示例代码如下:

import fs from 'fs'


function getFile(fpath) {
  return new Promise(function (resolve, reject) {
    fs.readFile(fpath, 'utf8', (err, dataStr) => {
      if (err) return reject(err)
      resolve(dataStr)
    })
  })
}

getFile('./files/11.txt')
  .then((r1) => {
    console.log(r1)
  })
  .catch((err) => console.log(err.message))

Promise.resolve() 和 Promise.reject()

当我们在定义一个 promise 的过程中,如果涉及到异步操作,那就需要通过new Promise的方式创建一个 Promise 实例。

但有些场景下,我们并没有异步操作,但仍然想调用 promise.then,此时,我们可以用 Promise.resolve() 将其包装成成功的状态。同理,Promise.reject()可以包装成失败的状态。

比如说,有的时候,promise 里面并不涉及异步操作,我只是单纯地想通过 promise 对象返回一个字符串(有的业务就是有这样的需求),那就可以通过 Promise.reslove('字符串') Promise.reject('字符串') 、这种简写的方式返回。

这两种情况,我们来对比看看。

例 1:

function foo(flag) {
    if (flag) {
        return new Promise((resolve) => {
            // 这里可以做异步操作
            resolve('success');
        });

        // return Promise.resolve('success2');
    } else {
        return new Promise((reslove, reject) => {
            // 这里可以做异步操作
            reject('fail');
        });
    }
}

// 执行 reslove 的逻辑
foo(true).then((res) => {
    console.log(res);
});

// 执行 reject 的逻辑
foo(false).catch((err) => {
    console.log(err);
});

例 2:(见证奇迹的时刻)

function foo(flag) {
    if (flag) {
        // Promise的静态方法:直接返回字符串
        return Promise.resolve('success');
    } else {
        // Promise的静态方法:直接返回字符串
        return Promise.reject('fail');
    }
}

// 执行 reslove 的逻辑
foo(true).then((res) => {
    console.log(res);
});

// 执行 reject 的逻辑
foo(false).catch((err) => {
    console.log(err);
});

例 1 和例 2 的打印结果是一样的。这两段代码的区别在于:例 1 里面可以封装异步任务;例 2 只能单纯的返回一个字符串等变量,不能封装异步任务。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/79707.html

(0)
小半的头像小半

相关推荐

极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!