zoukankan      html  css  js  c++  java
  • nuxtjs 环境中添加全局axios

    nuxtjs官方文档: https://zh.nuxtjs.org/

    身为小白的我,在使用axios做小demo的时候; 做了几个页面后,在需要通过发送axios请求获取数据时,发现每个组件都需要重新引入 axios 依赖,这样也太浪费时间了不是吗?;

    但可以看见nuxtjs没有像vue-cli一样直接添到全局的 main.js 和app.vue; 

    废话不多,直接代码:

    首先需要在  nuxt.config.js  添加代码

    {
      modules: [
        '@nuxtjs/axios',
      ],
    
      plugins: [
        '~/plugins/axios'
      ]
    }

    然后在根目录的 plugins/axios.js  (所有的插件都是在这个 plugins中)

    export default function ({ $axios, redirect }) {
      $axios.onRequest(config => {
        console.log('Making request to ' + config.url)
      })
    
      $axios.onError(error => {
        const code = parseInt(error.response && error.response.status)
        if (code === 400) {
          redirect('/400')
        }
      })
    }

    然后在该项目的任意组件中以   this.$axios  来使用axios; 在js文件中 使用  app.$axios  来使用axios

  • 相关阅读:
    Git
    canvas画布
    Node.js
    node的consoidate的插件统一
    使用nodejs去做一个验证码
    node的cookie-parser和express-session
    node的router路由。
    node的经典事件监听
    使用node去爬虫
    node的读写流
  • 原文地址:https://www.cnblogs.com/xuhua123/p/12188906.html
Copyright © 2011-2022 走看看