Skip to content

Instantly share code, notes, and snippets.

@nhatphamcdn

nhatphamcdn/axios.js plugin

Forked from bovas85/axios.js plugin
Created September 16, 2023 12:46
Show Gist options
  • Save nhatphamcdn/1939300366837e12a79ba2772ab615bb to your computer and use it in GitHub Desktop.
Save nhatphamcdn/1939300366837e12a79ba2772ab615bb to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @bovas85 bovas85 revised this gist Oct 21, 2018. 2 changed files with 19 additions and 0 deletions.
    15 changes: 15 additions & 0 deletions axios.js plugin
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,15 @@
    import { cacheAdapterEnhancer } from 'axios-extensions'
    import LRUCache from 'lru-cache'
    const ONE_HOUR = 1000 * 60 * 60

    const defaultCache = new LRUCache({ maxAge: ONE_HOUR })

    export default function ({ $axios }) {
    const defaults = $axios.defaults
    // https://github.com/kuitos/axios-extensions
    defaults.adapter = cacheAdapterEnhancer(defaults.adapter, {
    enabledByDefault: false,
    cacheFlag: 'useCache',
    defaultCache
    })
    }
    4 changes: 4 additions & 0 deletions nuxt.config.js
    View file
    Original file line number Diff line number Diff line change
    @@ -15,5 +15,9 @@ module.exports = {
    })
    }
    },
    plugins: [
    '~/plugins/axios.js',
    // ...other plugins here
    ]
    ... // other config
    }
  2. @bovas85 bovas85 revised this gist Oct 21, 2018. 2 changed files with 13 additions and 85 deletions.
    1 change: 0 additions & 1 deletion nuxt.config.js
    View file
    Original file line number Diff line number Diff line change
    @@ -7,7 +7,6 @@ module.exports = {
    ** Generate dynamic pages configuration
    */
    generate: {
    interval: 2000,
    routes: function () {
    return axios.get(`${Config.wpDomain}${Config.api.projects}`).then(res => {
    return res.data.map(project => {
    97 changes: 13 additions & 84 deletions store.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,99 +1,28 @@
    import Vuex from 'vuex'
    import Config from '~/assets/config.js'
    let arr = []
    let count = 0

    const createStore = () => {
    return new Vuex.Store({
    state: {
    homePage: [],
    projects: [],
    window: 320,
    connection: null,
    navOpen: false,
    current: null,
    modalOpen: false,
    menuScrolled: false
    homePage: []
    },
    mutations: {
    resetMenus (state) {
    state.modalOpen = false
    state.navOpen = false
    },
    hideMenuBg (state) {
    state.menuScrolled = false
    },
    showMenuBg (state) {
    state.menuScrolled = true
    },
    closeMenu (state) {
    state.navOpen = false
    state.modalOpen = false
    },
    openMenu (state) {
    state.navOpen = true
    state.modalOpen = true
    },
    sortProjects (state, obj) {
    // sorting alphabetically
    if (obj != null) {
    try {
    let filteredProjects = obj.sort(function (a, b) {
    return a.slug.localeCompare(b.slug)
    })
    state.projects = filteredProjects
    } catch (e) {}
    }
    },
    setHomePage (state, obj) {
    setHomepage (state, obj) {
    state.homePage = obj
    },
    setProjects (state, obj) {
    state.projects = obj
    },
    windowResize (state, size) {
    state.window = size
    },
    setConnection (state, type) {
    state.connection = type
    }
    },
    actions: {
    async nuxtServerInit ({ commit }, { app }) {
    /**
    * This is the secret sauce.
    * If the data being requested is cached, subsequent API calls will not be made
    * Also, if using nuxt generate, nuxtServerInit will be called for every page
    * Because of this caching, the API calls will only be done once
    */
    if (count === 0 || count > 15) {
    count = 0
    arr = []
    console.log('============= Server Init API calls =============')
    try {
    console.log('home')
    let home = await app.$axios.get(
    Config.wpDomain + Config.api.homePage
    )
    arr.push(home.data)
    commit('setHomePage', home.data)

    console.log('case studies')
    let projects = await app.$axios.get(
    Config.wpDomain + Config.api.projects
    )
    arr.push(projects.data)
    commit('setProjects', projects.data)
    count++
    } catch (e) {
    console.log('error with API')
    arr = []
    }
    } else {
    count++
    console.log('using cached api')
    commit('setHomePage', arr[0])
    commit('setProjects', arr[1])
    async nuxtServerInit ({ commit }, { app, route }) {
    console.log('============= Server Init API calls =============')
    try {
    console.log('home')
    const home = await app.$axios.get(
    Config.wpDomain + Config.api.homePage,
    { useCache: true }
    )
    commit('setHomepage', home.data)
    } catch (e) {
    console.log('error with API', e)
    }
    }
    }
  3. @bovas85 bovas85 created this gist Aug 11, 2018.
    20 changes: 20 additions & 0 deletions nuxt.config.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,20 @@
    const Config = require('./assets/config')
    const axios = require('axios')

    module.exports = {
    ... // other config
    /*
    ** Generate dynamic pages configuration
    */
    generate: {
    interval: 2000,
    routes: function () {
    return axios.get(`${Config.wpDomain}${Config.api.projects}`).then(res => {
    return res.data.map(project => {
    return { route: '/' + project.slug, payload: project }
    })
    })
    }
    },
    ... // other config
    }
    103 changes: 103 additions & 0 deletions store.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,103 @@
    import Vuex from 'vuex'
    import Config from '~/assets/config.js'
    let arr = []
    let count = 0

    const createStore = () => {
    return new Vuex.Store({
    state: {
    homePage: [],
    projects: [],
    window: 320,
    connection: null,
    navOpen: false,
    current: null,
    modalOpen: false,
    menuScrolled: false
    },
    mutations: {
    resetMenus (state) {
    state.modalOpen = false
    state.navOpen = false
    },
    hideMenuBg (state) {
    state.menuScrolled = false
    },
    showMenuBg (state) {
    state.menuScrolled = true
    },
    closeMenu (state) {
    state.navOpen = false
    state.modalOpen = false
    },
    openMenu (state) {
    state.navOpen = true
    state.modalOpen = true
    },
    sortProjects (state, obj) {
    // sorting alphabetically
    if (obj != null) {
    try {
    let filteredProjects = obj.sort(function (a, b) {
    return a.slug.localeCompare(b.slug)
    })
    state.projects = filteredProjects
    } catch (e) {}
    }
    },
    setHomePage (state, obj) {
    state.homePage = obj
    },
    setProjects (state, obj) {
    state.projects = obj
    },
    windowResize (state, size) {
    state.window = size
    },
    setConnection (state, type) {
    state.connection = type
    }
    },
    actions: {
    async nuxtServerInit ({ commit }, { app }) {
    /**
    * This is the secret sauce.
    * If the data being requested is cached, subsequent API calls will not be made
    * Also, if using nuxt generate, nuxtServerInit will be called for every page
    * Because of this caching, the API calls will only be done once
    */
    if (count === 0 || count > 15) {
    count = 0
    arr = []
    console.log('============= Server Init API calls =============')
    try {
    console.log('home')
    let home = await app.$axios.get(
    Config.wpDomain + Config.api.homePage
    )
    arr.push(home.data)
    commit('setHomePage', home.data)

    console.log('case studies')
    let projects = await app.$axios.get(
    Config.wpDomain + Config.api.projects
    )
    arr.push(projects.data)
    commit('setProjects', projects.data)
    count++
    } catch (e) {
    console.log('error with API')
    arr = []
    }
    } else {
    count++
    console.log('using cached api')
    commit('setHomePage', arr[0])
    commit('setProjects', arr[1])
    }
    }
    }
    })
    }

    export default createStore