美文网首页
由浅入深理解es6中的promise

由浅入深理解es6中的promise

作者: sxh不是帅小伙 | 来源:发表于2019-08-20 22:07 被阅读0次
const fs = require('fs');
const path= require('path');

//这是普通读取文件的方式
fs.readFile(path.join(__dirname, './files/1.txt'), 'utf-8', (err, dataStr) => {
  if (err) throw err;
  console.log(dataStr);
})

将上面方法封装为函数
给定文件路径,返回读取文件的内容

function getFileByPath(fpath) {
  fs.readFile(path.join(__dirname, './files/1.txt'), 'utf-8', (err, dataStr) => {
    if (err) throw err;
    console.log(dataStr);
  })
 }

let result = getFileByPath(path.join(__dirname, './files/1.txt'));
console.log(result);

主程序会打印出undefined,因为getFileByPath内部是异步读取文件的方法,再执行到给result赋值的语句时,程序进入函数内部进行执行,进入函数内部发现是异步读取文件的方法,于是主程序将读取文件的操作交给其他线程去执行,主程序会跳出方法执行下一句打印result的值,由于主程序执行速度快所以文件读取的操作还没有完成主程序就执行到了打印result的语句,由于result未定义所以打印出了undefined

为了防止这种现象可以为函数添加一个回调函数:

function getFileByPath(fpath, callback) {
  fs.readFile(path.join(__dirname, './files/1.txt'), 'utf-8', (err, dataStr) => {
    if (err) return callback(err);
    return(dataStr);
  })
 }

let result = getFileByPath(path.join(__dirname, './files/1.txt'), (info) => {
  console.log('info=>' + info);//打印信息
});
console.log(result);

进一步对函数进行封装,方便用户对成功信息与失败信息的区分(如果成功了返回的结果位于callback函数的第二个位置,此时第一个位置由于没有出错,所以放置null,如果失败了,则第一个位置放置error对象,第二个位置放置undefined):

function getFileByPath(fpath, callback) {
  fs.readFile(path.join(__dirname, './files/1.txt'), 'utf-8', (err, dataStr) => {
    if (err) return callback(err);
    return(dataStr, err);
  })
 }

let result = getFileByPath(path.join(__dirname, './files/1.txt'), (error, info) => {
  if (err) return console.log(err.message);
  console.log(info);
});

还可以将回调函数拆开,读取文件成功后执行一个回调函数,如果文件读取失败后执行另一个对应的回调函数:

function getFileByPath(fpath, succCb, failCb) {
  fs.readFile(path.join(__dirname, './files/1.txt'), 'utf-8', (err, dataStr) => {
    if (err) return failCb(err);
    succCb(dataStr);
  })
 }

getFileByPath(
  path.join(__dirname, './files/1.txt'),
  data => {
    console.log('读取文件成功!内容是:' + data);
  },
  err => {
    console.log('读取文件失败!原因是:' + err);
  }
);

有了以上的学习后接下来看一项实际需求:
先读取文件1,再读取文件2,最后读取文件3,下面是解决方法(使用异步嵌套方法):

function getFileByPath(fpath, succCb, failCb) {
    fs.readFile(path.join(__dirname, './files/1.txt'), 'utf-8', (err, dataStr) => {
      if (err) return failCb(err);
      succCb(dataStr);
    })
 }

getFileByPath(
    path.join(__dirname, './files/1.txt'),
    data => {
        console.log('读取文件成功!内容是:' + data);
        getFileByPath(
            path.join(__dirname, './files/2.txt'),
            data => {
                console.log('读取文件成功!内容是:' + data);
                getFileByPath(
                    path.join(__dirname, './files/3.txt'),
                    data => {
                        console.log('读取文件成功!内容是:' + data);
                    },
                    err => {
                        console.log('读取文件失败!原因是:' + err);
                    }
                );
            },
            err => {
                console.log('读取文件失败!原因是:' + err);
                getFileByPath(
                    path.join(__dirname, './files/3.txt'),
                    data => {
                        console.log('读取文件成功!内容是:' + data);
                    },
                    err => {
                        console.log('读取文件失败!原因是:' + err);
                    }
                );
            }
        )
    },
    err => {
        console.log('读取文件失败!原因是:' + err);
        getFileByPath(
            path.join(__dirname, './files/2.txt'),
            data => {
                console.log('读取文件成功!内容是:' + data);
                getFileByPath(
                    path.join(__dirname, './files/3.txt'),
                    data => {
                        console.log('读取文件成功!内容是:' + data);
                    },
                    err => {
                        console.log('读取文件失败!原因是:' + err);
                    }
                );
            },
            err => {
                console.log('读取文件失败!原因是:' + err);
                getFileByPath(
                    path.join(__dirname, './files/3.txt'),
                    data => {
                        console.log('读取文件成功!内容是:' + data);
                    },
                    err => {
                        console.log('读取文件失败!原因是:' + err);
                    }
                );
            }
        )
    }
)

不难看出以上方法会导致代码难以阅读,并且代码格式也不美观。
可以使用ES6的promise解决以上现象(回调地狱),promise是一个构造函数,可以通过new Promise()得到一个promise实例,在promise身上有两个函数,resolve(成功以后的回调函数),reject(失败以后的回调函数),在promise的prototype上有一个.then方法
promise表示一个异步操作,每当new一个promise的实例,那么这个实例就表示一个具体的异步操作,由于promise的实例是一个异步操作,内部拿到结果无法将操作的结果return,所以只能使用回调函数的形式将成功与否的结果返回给调用者。当异步操作成功时需要调用resolve函数,异步操作失败后调用reject函数。
我们可以在.then方法中预先为promise这个异步方法指定成功和失败的回调函数。
这是一个具体的异步操作,其中function指定一个具体的异步操作

let promise = new Promise( function() {
  //这个function内部写的就是具体的异步操作
})

以下是使用promise封装的异步读取文件的方法

function getFileByPath(fpath) {//2
  return new Promise((resolve, reject) => {//3
    fs.readFile(fpath, 'utf-8', (err, dataStr) => {//5
      if (err) return reject(err);
      resolve (dataStr);
    })
  })
}

getFileByPath('./files/1.txt');//1
.then(//4
  dataStr => {console.log('文件读取成功!内容是:' + dataStr)},
  err => {console.log('文件读取失败!原因是:' + err )}
)

以下是使用promise解决异步回调地狱的实例:

function getFileByPath(fpath) {
  return new Promise((resolve, reject) => {
    fs.readFile(fpath, 'utf-8', (err, dataStr) => {
      if (err) return reject(err);
      resolve (dataStr);
    })
  })
}

getFileByPath('./files/1.txt');
.then(
  dataStr => {
    console.log('文件读取成功!内容是:' + dataStr);
    return getFileByPath('./files/2.txt');
  },
  err => {
    console.log('文件读取失败!原因是:' + err );
    return getFileByPath('./files/2.txt');
  }
)
.then(
  dataStr => {
    console.log('文件读取成功!内容是:' + dataStr);
    return getFileByPath('./files/3.txt');
  },
  err => {
    console.log('文件读取失败!原因是:' + err );
    return getFileByPath('./files/3.txt');
  }
)
.then(
  dataStr => {
    console.log('文件读取成功!内容是:' + dataStr);
  },
  err => {
    console.log('文件读取失败!原因是:' + err );
  }
)

如果有这样一个需求:如果后续的promise执行依赖于前面promise的执行结果,如果前面的promise执行失败了,则后面的promise执行没有意义了,即如果有一个promise执行失败则终止所有的promise,代码实现如下:

function getFileByPath(fpath) {
  return new Promise((resolve, reject) => {
    fs.readFile(fpath, 'utf-8', (err, dataStr) => {
      if (err) return reject(err);
      resolve (dataStr);
    })
  })
}

getFileByPath('./files/1.txt');
.then(
  dataStr => {
    console.log('文件读取成功!内容是:' + dataStr);
    return getFileByPath('./files/2.txt');
  },
)
.then(
  dataStr => {
    console.log('文件读取成功!内容是:' + dataStr);
    return getFileByPath('./files/3.txt');
  },
)
.then(
  dataStr => {
    console.log('文件读取成功!内容是:' + dataStr);
  },
)
.catch(
  err => {
    console.log(err);
  }
)

以上代码取消了promise执行失败的回调函数,并在代码末尾加了.catch,其作用是:如果以上的promise中只要有一个执行失败那么就终止所有的promise执行,直接进入.catch内部进行异常的捕获。

相关文章

  • 由浅入深理解es6中的promise

    将上面方法封装为函数给定文件路径,返回读取文件的内容 主程序会打印出undefined,因为getFileByPa...

  • 全局 Promise 异常捕捉

    《深入理解ES6》阅读随笔 在 ES6 的 Promise 中,对于直接 reject 的异常未处理任务,不会进行...

  • ES6 中的 Promise(三)

    《深入理解ES6》阅读随笔 响应多个 Promise 在 Promise 中还有两个静态方法,可以用来控制响应多个...

  • Promise对象原理解析

    Promise对象原理解析 ES6 原生提供了 Promise 对象。所谓 Promise,就是一个对象,用来传递...

  • Promise的理解和使用

    Promise是什么? 理解 1. 抽象表达 Promise是一门新的技术(ES6规范) Promise是JS中进...

  • ES6--Promise

    学过ES6的同学大概都知道Promise,可想而知Promise在ES6中很重要。 Promise对象代表了未来将...

  • es6解读5:promise

    Promise作为ES6中最重要的特性之一,我们有必要掌握并理解透彻。本文将由浅到深,讲解Promise的基本概念...

  • 解析Promise

    Promise作为ES6中最重要的特性之一,我们有必要掌握并理解透彻。本文将由浅到深,讲解Promise的基本概念...

  • es6解读5-promise

    Promise作为ES6中最重要的特性之一,我们有必要掌握并理解透彻。本文将由浅到深,讲解Promise的基本概念...

  • ES6 中的 Promise(二)

    《深入理解ES6》阅读随笔 对于 Promise 中的一些基础概念,需要了解一下: Promise 的生命周期 P...

网友评论

      本文标题:由浅入深理解es6中的promise

      本文链接:https://www.haomeiwen.com/subject/brgrsctx.html