mirror of https://github.com/sundowndev/http.git
feat: upgrade for nuxt rc8
BREAKING CHANGE: app.axios is not available anymore (without $) should always use app.$axiosmaster
parent
a75097dcef
commit
a341185f5b
29
README.md
29
README.md
|
@ -8,7 +8,7 @@
|
||||||
|
|
||||||
[![js-standard-style](https://cdn.rawgit.com/standard/standard/master/badge.svg)](http://standardjs.com)
|
[![js-standard-style](https://cdn.rawgit.com/standard/standard/master/badge.svg)](http://standardjs.com)
|
||||||
|
|
||||||
> 🔒 Secure and easy [axios](https://github.com/mzabriskie/axios) integration with Nuxt.js.
|
> Secure and Easy [Axios](https://github.com/mzabriskie/axios) integration with Nuxt.js.
|
||||||
|
|
||||||
[📖 **Release Notes**](./CHANGELOG.md)
|
[📖 **Release Notes**](./CHANGELOG.md)
|
||||||
|
|
||||||
|
@ -49,7 +49,7 @@
|
||||||
|
|
||||||
```js
|
```js
|
||||||
async asyncData({ app }) {
|
async asyncData({ app }) {
|
||||||
const ip = await app.axios.$get('http://icanhazip.com')
|
const ip = await app.$axios.$get('http://icanhazip.com')
|
||||||
return { ip }
|
return { ip }
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
@ -57,29 +57,20 @@ async asyncData({ app }) {
|
||||||
### Store `nuxtServerInit`
|
### Store `nuxtServerInit`
|
||||||
```js
|
```js
|
||||||
async nuxtServerInit ({ commit }, { app }) {
|
async nuxtServerInit ({ commit }, { app }) {
|
||||||
const ip = await app.axios.$get('http://icanhazip.com')
|
const ip = await app.$axios.$get('http://icanhazip.com')
|
||||||
commit('SET_IP', ip)
|
commit('SET_IP', ip)
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
### Store actions
|
### Store actions
|
||||||
If you need axios instance in store actions, you may have to pass it when dispatching.
|
(Needs Nuxt >= 1.0.0-RC8)
|
||||||
|
|
||||||
```js
|
```js
|
||||||
// In components
|
|
||||||
export default {
|
|
||||||
methods: {
|
|
||||||
updateIP() {
|
|
||||||
this.$store.dispatch('getIP', { axios: this.$axios })
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// In store
|
// In store
|
||||||
{
|
{
|
||||||
actions: {
|
actions: {
|
||||||
async getIP ({ commit }, { axios }) {
|
async getIP ({ commit }) {
|
||||||
const ip = await axios.$get('http://icanhazip.com')
|
const ip = await this.$axios.$get('http://icanhazip.com')
|
||||||
commit('SET_IP', ip)
|
commit('SET_IP', ip)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -159,10 +150,10 @@ requestInterceptor: (config, { store }) => {
|
||||||
Axios plugin also supports fetch style requests with `$` prefixed methods:
|
Axios plugin also supports fetch style requests with `$` prefixed methods:
|
||||||
```js
|
```js
|
||||||
// Normal usage with axios
|
// Normal usage with axios
|
||||||
let data = (await axios.get('...')).data
|
let data = (await $axios.get('...')).data
|
||||||
|
|
||||||
// Fetch Style
|
// Fetch Style
|
||||||
let data = await axios.$get('...')
|
let data = await $axios.$get('...')
|
||||||
```
|
```
|
||||||
|
|
||||||
### `setHeader(name, value, scopes='common')`
|
### `setHeader(name, value, scopes='common')`
|
||||||
|
@ -245,9 +236,9 @@ Start Nuxt
|
||||||
|
|
||||||
Now you can make requests to backend: (Works fine in both SSR and Browser)
|
Now you can make requests to backend: (Works fine in both SSR and Browser)
|
||||||
```js
|
```js
|
||||||
async asyncData({app}) {
|
async asyncData({ app }) {
|
||||||
// Magically makes request to http://www.mocky.io/v2/59388bb4120000dc00a672e2
|
// Magically makes request to http://www.mocky.io/v2/59388bb4120000dc00a672e2
|
||||||
const nuxt = await app.axios.$get('59388bb4120000dc00a672e2')
|
const nuxt = await app.$axios.$get('59388bb4120000dc00a672e2')
|
||||||
|
|
||||||
return {
|
return {
|
||||||
nuxt // -> { nuxt: 'Works!' }
|
nuxt // -> { nuxt: 'Works!' }
|
||||||
|
|
12
lib/index.js
12
lib/index.js
|
@ -43,7 +43,7 @@ module.exports = function nuxtAxios (moduleOptions) {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Register plugin
|
// Register plugin
|
||||||
addPlugin.call(this, {
|
this.addPlugin({
|
||||||
src: path.resolve(__dirname, 'plugin.template.js'),
|
src: path.resolve(__dirname, 'plugin.template.js'),
|
||||||
fileName: 'axios.js',
|
fileName: 'axios.js',
|
||||||
options
|
options
|
||||||
|
@ -53,14 +53,4 @@ module.exports = function nuxtAxios (moduleOptions) {
|
||||||
console.log(`[AXIOS] Base URL: ${chalk.green(options.baseURL)} , Browser: ${chalk.green(options.browserBaseURL)}`)
|
console.log(`[AXIOS] Base URL: ${chalk.green(options.baseURL)} , Browser: ${chalk.green(options.browserBaseURL)}`)
|
||||||
}
|
}
|
||||||
|
|
||||||
// Temporary fix for nuxt/nuxt.js#1127
|
|
||||||
function addPlugin (template) {
|
|
||||||
const { dst } = this.addTemplate(template)
|
|
||||||
// Add to nuxt plugins
|
|
||||||
this.options.plugins.unshift({
|
|
||||||
src: path.join(this.options.buildDir, dst),
|
|
||||||
ssr: template.ssr
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports.meta = require('../package.json')
|
module.exports.meta = require('../package.json')
|
||||||
|
|
|
@ -1,25 +1,6 @@
|
||||||
import Axios from 'axios'
|
import Axios from 'axios'
|
||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
|
|
||||||
const axiosPlugin = {
|
|
||||||
install() {
|
|
||||||
if(Vue.__nuxt_axios_installed__) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
Vue.__nuxt_axios_installed__ = true
|
|
||||||
|
|
||||||
if (!Vue.prototype.hasOwnProperty('$axios')) {
|
|
||||||
Object.defineProperty(Vue.prototype, '$axios', {
|
|
||||||
get () {
|
|
||||||
return this.$root.$options.$axios
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Vue.use(axiosPlugin)
|
|
||||||
|
|
||||||
// We cannot extend Axios.prototype
|
// We cannot extend Axios.prototype
|
||||||
const axiosExtraProto = {}
|
const axiosExtraProto = {}
|
||||||
|
|
||||||
|
@ -111,7 +92,7 @@ const baseURL = process.browser
|
||||||
? (process.env.API_URL_BROWSER || '<%= options.browserBaseURL %>')
|
? (process.env.API_URL_BROWSER || '<%= options.browserBaseURL %>')
|
||||||
: (process.env.API_URL || '<%= options.baseURL %>')
|
: (process.env.API_URL || '<%= options.baseURL %>')
|
||||||
|
|
||||||
export default (ctx) => {
|
export default (ctx, inject) => {
|
||||||
const { app, store, req } = ctx
|
const { app, store, req } = ctx
|
||||||
|
|
||||||
// Create a fresh objects for all default header scopes
|
// Create a fresh objects for all default header scopes
|
||||||
|
@ -182,12 +163,8 @@ export default (ctx) => {
|
||||||
// Error handler
|
// Error handler
|
||||||
axios.interceptors.response.use(undefined, errorHandler.bind(ctx));
|
axios.interceptors.response.use(undefined, errorHandler.bind(ctx));
|
||||||
|
|
||||||
// Make accessible using context
|
// Publish axios to the context
|
||||||
app.axios = app.$axios = axios
|
inject('axios', axios)
|
||||||
ctx.axios = ctx.$axios = axios
|
|
||||||
if (store) {
|
|
||||||
store.axios = store.$axios = axios
|
|
||||||
}
|
|
||||||
|
|
||||||
// Setup axios helpers
|
// Setup axios helpers
|
||||||
setupHelpers(axios)
|
setupHelpers(axios)
|
||||||
|
|
|
@ -30,12 +30,12 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"axios": "^0.16.2",
|
"axios": "^0.16.2",
|
||||||
"chalk": "^2.1.0",
|
"chalk": "^2.1.0",
|
||||||
"nuxt": "^1.0.0-rc4",
|
"nuxt": "^1.0.0-rc8",
|
||||||
"whatwg-url": "^6.1.0"
|
"whatwg-url": "^6.1.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"codecov": "^2.3.0",
|
"codecov": "^2.3.0",
|
||||||
"eslint": "^4.4.1",
|
"eslint": "^4.5.0",
|
||||||
"eslint-config-standard": "^10.2.1",
|
"eslint-config-standard": "^10.2.1",
|
||||||
"eslint-plugin-import": "^2.7.0",
|
"eslint-plugin-import": "^2.7.0",
|
||||||
"eslint-plugin-jest": "^20.0.3",
|
"eslint-plugin-jest": "^20.0.3",
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
async asyncData ({ app }) {
|
async asyncData ({ app }) {
|
||||||
let res = await app.axios.$get('foo/bar')
|
let res = await app.$axios.$get('foo/bar')
|
||||||
return {
|
return {
|
||||||
res
|
res
|
||||||
}
|
}
|
||||||
|
|
|
@ -10,7 +10,7 @@ export default {
|
||||||
async fetch ({ app, route }) {
|
async fetch ({ app, route }) {
|
||||||
let doLogin = route.query.login !== undefined
|
let doLogin = route.query.login !== undefined
|
||||||
if (doLogin) {
|
if (doLogin) {
|
||||||
app.axios.setHeader('sessionId', reqCtr++)
|
app.$axios.setHeader('sessionId', reqCtr++)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
Loading…
Reference in New Issue