0

我正在使用 Electron-vue 进行开发。我想逐行读取用户提供的大文本文件。另外，我想在阅读过程中显示一个加载图标（这意味着阅读应该是异步的）。
请注意，文本文件是用 shift-jis 编码的。

起初，我尝试了以下方法：
src/renderer/components/Import.vue

const dialog = require('electron').remote.dialog
export default {
  name: 'import',
  data () {
    return {
      loading: false
    }
  },
  methods: {
    mounted () {
      this.$refs.search.focus()
    },
    openDialog () {
      let filePath = dialog.showOpenDialog({
        properties: ['openFile'],
      })
      this.loading = true
      let that = this
      // Use the async function.
      this.getResultFileRead(that, filePath[0]).then(function (res) {
        // When the async function is completed, remove the loading icon.
        that.loading = false
        console.log(res)
      })
    },
    // Define async function here.
    async getResultFileRead (path) {
      return this.$electron.ipcRenderer.sendSync('readfile', path)
    }
  }
}

src/main/index.js

import fs from 'fs'
import readline from 'readline'
import iconv from 'iconv-lite'

ipcMain.on('readfile', (event, arg) => {
  // Using stream to decode shift-jis file.
  stream = fs.createReadStream(filePath).pipe(iconv.decodeStream('shift-jis'))
  let reader = readline.createInterface(stream, {})
  reader.on('line', line => {
     insertLine(line)
  })
  reader.on('close', () => {
    // do other stuff
  })
  event.returnValue = 'complete'
})

但这些都不起作用。当提供一个文件时，该文件是异步读取的，但是一旦提供了文件（即在完成操作之前），readfile 函数就会返回“完成”，因此加载图标永远不会出现。

如何在电子 vue 上同时实现“使用 shift-jis 异步读取文件”和“在读取文件时显示加载图标”？请注意，Electron-vue 似乎使用的是 Node.js 版本 8.9.3。

4

1 回答 1

1

我解决了这个问题如下。重点是 close 事件中的 resolve 函数。
src/main/index.js

import fs from 'fs'
import readline from 'readline'
import iconv from 'iconv-lite'

ipcMain.on('readfile', async (event, arg) => {
    await readLines()
    event.sender.send('readfile-reply', 'complete')
})

function readLines() {
    return new Promise((resolve, reject) => {
        stream = fs.createReadStream(filePath).pipe(iconv.decodeStream('shift-jis'))
        let reader = readline.createInterface(stream, {})
        reader
            .on('line', line => {
                insertLine(line)
            })
            .on('close', () => {
                resolve() // "Resolve" in the close event.
            })
            .on('error', function(err) {
                reject(err)
            })
    })
}

那么函数就可以异步使用了：
src/renderer/components/Import.vue

const dialog = require('electron').remote.dialog
export default {
    name: 'import',
    data() {
        return {
            loading: false
        }
    },
    methods: {
        mounted() {
            this.$refs.search.focus()
        },
        openDialog() {
            let filePath = dialog.showOpenDialog({
                properties: ['openFile'],
            })
            this.loading = true
            let that = this
            // Use the async function.
            this.asyncReadFile(that, filePath[0]).then(function(res) {
                // When the async function is completed, remove the loading icon.
                that.loading = false
                console.log(res)
                that.$electron.ipcRenderer.removeAllListeners('readfile-reply')
            })
        },
        asyncReadFile(that, path) {
            return new Promise(resolve => {
                this.$electron.ipcRenderer.send('readfile', path)
                this.$electron.ipcRenderer.on('readfile-reply', (event, result) => {
                    resolve(result)
                })
            })
        }
    }
}
于 2019-05-11T06:23:51.843 回答