前端架构: 脚手架之使用Ora在终端中实现输出Loading

ora

• ora 它主要做的一件事情啊，就是去在命令行当中去输出loading的状态
• loading在web中容易实现，但是在终端中实现起来是非常复杂的
• 安装 $ npm i -S ora
• 可以看到其源码与chalk不同的是, 有很多第三方依赖库

1 ）基础用法

import ora from 'ora';

const spinner = ora('Loading').start(); // loading 开启
spinner.color = 'red';
spinner.prefixText = 'Downloading ora: ' // 加入前缀
let percent = 0;

const inTime = setInterval(() => {
  percent += 10;
  spinner.text = `Loading ${percent}%`;
  if (percent == 100) {
    spinner.stop();
    spinner.succeed('Download finished!')
    clearInterval(inTime)
  }
}, 300)

• 从上述交互细节可以看出
  • 在 stop 之前，Loading 都会独立占用整行终端空间
  • 在 stop 之后，独占的一行会被清空
• 在 ora 这个库中，还有一个个比较亮眼的功能，就是它提供一个promise方法
• 有一个 oraPromise，我们通过这个方法，可以针对异步任务
• 当异步任务完成的时候, 结束这个loading

2 ）高级用法

import ora, { oraPromise } from 'ora';

(async () => {
  const promise = new Promise((resolve) => {
    const timer = setTimeout(() => {
      clearTimeout(timer);
      resolve();
    }, 3000)
  })

  await oraPromise(promise, {
    successText: 'success!',
    failText: 'failed!',
    prefixText: 'Download ora',
    text: 'loading',
    spinner: {
      interval: 80,
      frames: ['-', '\\', '|', '/', '-'] // 这种切换，是在 里面几个字符之间做动画，替换默认的loading图标
    }
  });
})()

• 在promise当中去使用的时候，它有一个好处就是你不再需要去关注loading的开始和结束
• 只要关注你的promise任务就可以了，它是一个异步任务