vue组件化中对读取文件的封装,解决读取文件的异步问题

普通文件读取方式

    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)
    }) 

封装成函数的方式(有漏洞)

    const fs = require('fs')
    const path = require('path')
    
    function getFileByPath(fpath) {
      fs.readFile(fpath, 'utf-8', (err, dataStr) => {
        // 如果报错了，进入if分支后，if后面的代码就没有必要执行了
        if (err) return throw err
        return dataStr   
      })
      // 当系统碰到文件读取的时候,会异步执行,这个读取程序,被移出当前流程,然后往下走,发现没代码执行了
      // 于是函数在没有return结果的情况下,默认返回undefined
    }
    
    var res = getFileByPath(path.join(__dirname, './files/1.txt'))
    console.log(res)
    // 注:这样的代码,这里console.log(res) 打印的只会是undefined,根本拿不到文件的内容
    //原因就是上面的fs.readfile 是异步的

解决上面的问题(回调函数)

    const fs = require('fs')
    const path = require('path')
    
    // 我们可以规定一下， callback 中，有两个参数，第一个参数，是 失败的结果；第二个参数是成功的结果；
    // 同时，我们规定了： 如果成功后，返回的结果，应该位于 callback 参数的第二个位置，此时， 第一个位置 
    // 由于没有出错，所以，放一个 null；  如果失败了，则 第一个位置放 Error对象，第二个位置放置一个 
    // undefined
    function getFileByPath(fpath, callback) {
      fs.readFile(fpath, 'utf-8', (err, dataStr) => {
        // 如果报错了，进入if分支后，if后面的代码就没有必要执行了
        if (err) return callback(err)  // 注意这里的return作用不是返回回调函数执行的结果,而是阻止函
                                    //  数往下继续运行
        // console.log(dataStr)
        // return dataStr
        callback(null, dataStr)
      })
    }
    
    getFileByPath(path.join(__dirname, './files/11.txt'), (err, dataStr) => {
      if (err) return console.log(err.message)
      console.log(dataStr)
    })