如何在NuxtJS中使用axios添加全局拦截器?

时间:2020-04-28 05:46:52

标签: axios nuxt.js interceptor

我正在使用NuxtJS。所以我想阅读一些响应头并将其保存在VueJS存储中。我看到了以下文档:https://axios.nuxtjs.org/extend.html。 据说,我可以添加一些axios插件来处理请求,响应... 这是nuxt站点上建议的配置: nuxt.config.js

{
  modules: [
    '@nuxtjs/axios',
  ],

  plugins: [
    '~/plugins/axios'
  ]
}

问题1: 为什么未将插件声明为〜/ plugins / axios.js? 〜/ plugins / axios有什么区别吗? 为了避免出现以下错误:

 ERROR  Failed to compile with 1 errors                                        friendly-errors 13:12:58

This dependency was not found:                                                 friendly-errors 13:12:58
                                                                               friendly-errors 13:12:58
* eventsource-polyfill in multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js
                                                                               friendly-errors 13:12:58
To install it, you can run: npm install --save eventsource-polyfill  

我写:

plugins: [
        '~/plugins/axios.js'
      ]

要在plugins / axios.js中编写以下代码拦截器:

export default function ({ $axios, redirect }) {
   $axios.onRequest(config => {
        console.log('Making request to ' + config.url)
    }),


    $axios.onResponse(response => {
        console.log(" RESPONSE  ####################### ")
    })
}

当我运行我的应用程序并执行一些请求时。我看不到控制台登录。 问题2: 缺少什么?

然后我检查我的包裹json:

 {
  "name": "wp-nuxt",
  "version": "1.0.0",
  "description": "Headless WordPress with Nuxt",
  "author": "Me",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.10.2",
    "nuxt": "^2.0.0"
  },
  "devDependencies": {
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.0"
  }
}

问题3: 为什么我在nuxt模块内部没有axios模块?

问题4: 如何在auxt节点模块下安装axios?

谢谢您的帮助。

1 个答案:

答案 0 :(得分:-1)

nuxt.config.js:

module.exports = {
  modules: [
   '@nuxtjs/axios',
  ],

  axios: {
    // proxyHeaders: false
  }
}

更新:Axios模块与Nuxt.js集成。如果您想将AxiosNuxt.js项目一起使用,将是很好的集成。您可以查看更多信息-> https://axios.nuxtjs.org/setup.html#install