Permalink
Browse files

feat: integrate with nuxt progress bar

  • Loading branch information...
pi0 committed Jan 28, 2018
1 parent 44c9f35 commit 41a0964b7ec8a26f8f82f1604eb7a89a0d50aae0
Showing with 67 additions and 16 deletions.
  1. +19 −12 README.md
  2. +1 −0 lib/module.js
  3. +47 −4 lib/plugin.template.js
@@ -32,9 +32,18 @@
If you are coming from an older release please be sure to read [Migration Guide](https://github.com/nuxt-community/axios-module/wiki/Migration-guide)
## Features
✓ Automatically set base URL for client & server side
✓ Exposes `setToken` function to `$axios` so we can easily and globally set authentication tokens
✓ Throws _nuxt-friendly_ errors and optionally redirect on specific error codes
✓ Automatically enables `withCredentials` when requesting to base URL
✓ Proxy request headers in SSR (Useful for auth)
✓ Fetch Style requests
✓ Automatically integrate with Nuxt.js progress bar
# Table of Contents
* [Features](#features)
* [Setup](#setup)
* [Usage](#usage)
* [Component](#component)
@@ -50,33 +59,25 @@ If you are coming from an older release please be sure to read [Migration Guide]
* [Prefix, Host and Port](#prefix-host-and-port)
* [baseURL](#baseurl)
* [browserBaseURL](#browserbaseurl)
* [progress](#progress)
* [credentials](#credentials)
* [debug](#debug)
* [proxyHeaders](#proxyheaders)
* [proxyHeadersIgnore](#proxyheadersignore)
* [disableDefaultErrorHandler](#disabledefaulterrorhandler)
## Features
* Automatically set base URL for client & server side
* Exposes `setToken` function to `$axios` so we can easily and globally set authentication tokens
* Throws _nuxt-friendly_ errors and optionally redirect on specific error codes
* Automatically enables `withCredentials` when requesting to base URL
* Proxy request headers in SSR (Useful for auth)
* Fetch Style requests
## Setup
Install with yarn:
```bash
>_ yarn add @nuxtjs/axios
yarn add @nuxtjs/axios
```
Install with npm:
```bash
>_ npm install @nuxtjs/axios
npm install @nuxtjs/axios
```
**nuxt.config.js**
@@ -296,6 +297,12 @@ Base URL which is used and prepended to make requests in client side.
Environment variable `API_URL_BROWSER` can be used to **override** `browserBaseURL`.
### `progress`
* Default: `true`
Integrate with Nuxt.js progress bar to show a loading bar while making requests. (Only on browser, when loading bar is available.)
### `credentials`
* Default: `false`
@@ -38,6 +38,7 @@ module.exports = function nuxtAxios (_moduleOptions) {
proxyMode: false,
credentials: false,
proxyHeaders: true,
progress: true,
proxyHeadersIgnore: ['accept', 'host'],
debug: false,
disableDefaultErrorHandler: false
@@ -72,8 +72,7 @@ const setupDebugInterceptor = axios => {
return res
})
}
<% } %>
}<% } %>
<% if (options.credentials) { %>
const setupCredentialsInterceptor = axios => {
@@ -85,8 +84,51 @@ const setupCredentialsInterceptor = axios => {
}
}
})
}
<% } %>
}<% } %>
<% if (options.progress) { %>
const setupProgress = (axios, ctx) => {
if (process.server) {
return
}
// A noop loading inteterface for when $nuxt is not yet ready
const noopLoading = {
finish: () => { },
start: () => { },
fail: () => { },
set: () => { }
}
const $loading = () => window.$nuxt ? window.$nuxt.$loading : noopLoading
let currentRequests = 0
axios.onRequest(() => {
currentRequests++
})
axios.onResponse(() => {
currentRequests--
if (currentRequests <= 0) {
currentRequests = 0
$loading().finish()
}
})
axios.onError(() => {
currentRequests--
$loading().fail()
})
const onProgress = e => {
const progress = ((e.loaded * 100) / (e.total * currentRequests))
$loading().set(progress)
}
axios.defaults.onUploadProgress = onProgress
axios.defaults.onDownloadProgress = onProgress
}<% } %>
export default (ctx, inject) => {
const axiosOptions = {
@@ -126,6 +168,7 @@ export default (ctx, inject) => {
// Setup interceptors
<% if (options.debug) { %>setupDebugInterceptor(axios) <% } %>
<% if (options.credentials) { %>setupCredentialsInterceptor(axios)<% } %>
<% if (options.progress) { %>setupProgress(axios, ctx)<% } %>
// Inject axios to the context as $axios
ctx.$axios = axios

0 comments on commit 41a0964

Please sign in to comment.