nprogress 基本使用

页面跳转过程中的 loading 效果
更新于: 2023-10-31 06:55:49

cheatsheet

使用代码
基本使用
<link rel="stylesheet" href="https://unpkg.com/nprogress@0.2.0/nprogress.css" />
<script src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>
<script>
// start
NProgress.start();
// end
NProgress.done();
</script>
与自己实现的 interceptor 配合
import createLoaingIntercepotrs from '@jswork/nprogress-interceptor';

const loadingIntercepotrs = createLoaingIntercepotrs();

const opts = {
  adapter: 'Axios',
  slim: true,
  interceptors: [...interceptorRequest, ...interceptorResponse, ...loadingIntercepotrs],
  transformResponse(inResponse) {
    return inResponse.data;
  },
};

nx.$api = httpSchema(schema, opts);

参考