zoukankan      html  css  js  c++  java
  • 初步认识Promise

    在解释什么是Promise之前,先看一道练习题,做完练习题也就知道Promise到底是干嘛用的了。

    假设现在有个需求:你要封装一个方法,我给你一个要读取文件的路径,你这个方法能帮我读取文件,并把内容返回给我。
    function getFileByPath(fpath, callback) {
    fs.readFile(fpath, 'utf-8', (err, dataStr) => {
    if (err) return callback(err)
    callback(null, dataStr)
    })
    }
    那么我们在下边调用一下
    getFileByPath(path.join(__dirname, './files/1.txt'), (err, dataStr) => {
    if (err) return console.log(err.message)
    console.log(dataStr)
    })
    当我们调用了这个函数,无论读取过程成功了还是失败了,它们都共用了一个回调函数,我们为了区别到底是成功了还是失败了,我们想到一个办法,就是规定callback的参数第一个位置永远放err,第二个位置放成功的结果,对于一些大佬可能很好理解,对于初学者来说并不好理解,那么我们换另外一种写法,将callback拆分成两个函数,成功回调函数和失败回调函数。
    function getFileByPath(fpath, succCb, errCb) {
    fs.readFile(fpath, 'utf-8', (err, dataStr) => {
    if (err) return errCb(err)
    succCb(dataStr)
    })
    }
    在上述代码中,succCb和errCb为函数的形参,它们到底要干嘛我们不知道,但是,调用者知道他们是干嘛的。接下来我们调用一下:
    getFileByPath(path.join(__dirname, './files/11.txt'), function (data) {
    console.log(data + '娃哈哈,成功了!!!')
    }, function (err) {
    console.log('失败的结果,我们使用失败的回调处理了一下:' + err.message)
    })
    那么,我们再改一下需求,先读取文件1,再读取文件2,最后再读取文件3
    getFileByPath(path.join(__dirname, './files/1.txt'), function (data) {
    console.log(data)

    getFileByPath(path.join(__dirname, './files/2.txt'), function (data) {
    console.log(data)

    getFileByPath(path.join(__dirname, './files/3.txt'), function (data) {
    console.log(data)
    })
    })
    })
    假如读取10个呢,一层套一层的写下去。如此写下去,我们成为回调地狱。
    如何改造一下呢,我们可以使用ES6中Promise对象解决回调地域的问题。
    Promise的本质就是为了解决回调地狱问题,并没有说可以帮我们减少代码量。
    Promise到底是什么。我们可以在浏览器控制台上打印一下

    首先我们看一下Promise是一个函数,再看他的名字,首字母大写通常我们把它当做构造函数。
    1. Promise 是一个 构造函数,既然是构造函数, 那么,我们就可以 new Promise() 得到一个 Promise 的实例;
    2. 在 Promise 上,有两个函数,分别叫做 resolve(成功之后的回调函数) 和 reject(失败之后的回调函数)
    3. 在 Promise 构造函数的 Prototype 属性上,有一个 .then() 方法,也就说,只要是 Promise 构造函数创建的实例,都可以访问到 .then() 方法
    4. Promise 表示一个 异步操作;每当我们 new 一个 Promise 的实例,这个实例,就表示一个具体的异步操作;
    5. 既然 Promise 创建的实例,是一个异步操作,那么,这个 异步操作的结果,只能有两种状态:
    5.1 状态1: 异步执行成功了,需要在内部调用 成功的回调函数 resolve 把结果返回给调用者;
    5.2 状态2: 异步执行失败了,需要在内部调用 失败的回调函数 reject 把结果返回给调用者;
    5.3 由于 Promise 的实例,是一个异步操作,所以,内部拿到 操作的结果后,无法使用 return 把操作的结果返回给调用者; 这时候,只能使用回调函数的形式,来把 成功 或 失败的结果,返回给调用者;
    6. 我们可以在 new 出来的 Promise 实例上,调用 .then() 方法,【预先】 为 这个 Promise 异步操作,指定 成功(resolve) 和 失败(reject) 回调函数;

    注意:这里 new 出来的 promise, 只是代表 【形式上】的一个异步操作;
    什么是形式上的异步操作:就是说,我们只知道它是一个异步操作,但是做什么具体的异步事情,目前还不清楚
    var promise = new Promise()


    这是一个具体的异步操作,其中,使用 function 指定一个具体的异步操作
    var promise = new Promise(function(){
    // 这个 function 内部写的就是具体的异步操作!!!
    })
    再回到我们的问题,我们的初衷是: 给路径,返回读取到的内容
    function getFileByPath(fpath) {
    return new Promise(function (resolve, reject) {
    fs.readFile(fpath, 'utf-8', (err, dataStr) => {
    if (err) return reject(err)
    resolve(dataStr)
    })
    })
    }

    getFileByPath('./files/1.txt')
    .then(function (data) {
    console.log(data + '-------')
    }, function (err) {
    console.log(err.message)
    })
    这样我们在连续读取三个文件的时候可以写成
    getFileByPath('./files/1.txt')
    .then(function (data) {
    console.log(data)
    // 读取文件2
    return getFileByPath('./files/2.txt')
    }, function (err) {
    console.log('这是失败的结果:' + err.message)
    // return 一个 新的 Promise
    return getFileByPath('./files/2.txt')
    })
    .then(function (data) {
    console.log(data)

    return getFileByPath('./files/3.txt')
    })
    .then(function (data) {
    console.log(data)
    }).then(function (data) {
    console.log(data)
    })
    上述代码中加了一个错误回调,如果第一个出错也希望程序继续将2,3文件读取完毕。如果其中一个出错不想继续执行,那么在结尾加上.catch(),它表示代码出错后捕获错误并输出。我们可以根据需求灵活的使用。

  • 相关阅读:
    用错每日活跃用户(DAU)这个指标,无异于挖坑给自己跳
    自我修复型设计-常用的架构设计原则
    UParams
    nodejs的使用场景
    问题
    GitHub Copilot可对整行或全部代码给出AI分析建
    Your AI pair programmer
    飞冰React框架如何配置懒加载
    【630】keras 实现多输出模型
    【629】图像增强(imgaug 包)
  • 原文地址:https://www.cnblogs.com/zmyxixihaha/p/10529743.html
Copyright © 2011-2022 走看看