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

  • 相关阅读:
    mariadb数据库galera群集配置
    视频降噪处理
    测试
    WPF RichTextBox
    WPF ListBox
    WPF SelectedIndex
    项目-答题
    Show 或者 ShowDialog时出现的错误
    项目-数据库实体生成器
    Alfred 使用教程
  • 原文地址:https://www.cnblogs.com/xuhua123/p/12188906.html
Copyright © 2011-2022 走看看