nuxt的@nuxtjs/axios 使用

一、发送请求

1、下载

npm i @nuxtjs/axios 或者 yarn add @nuxtjs/axios 

2、然后在nuxt.config.js配置文件中配置

modules: [
    '@nuxtjs/aixos'
]

3、使用：

不用导入 axios，因为在 配置文件中导入了，所以可以在 nuxt 上下文中得到，我们就可以解构出来
在 nuxt 生命周期中使用

 // pages > index.vue

<script>
export default {
    async asyncData({ $axios }) {
        let data = await $axios.get('xxxxx');
        return data;
    }
}
</script>

在 vue （客户端渲染）生命周期中使用

// pages > index.vue

<script>
export default {
  methods: {
    // 点击按钮触发
    async getData() {
      let data = await this.$axios.get('http://rap2api.txxx/login');
      console.log(data)
    }
  },
}
</script>

二、拦截器

2.1 拦截器的设置：
1、在 plugins 文件夹下创建 拦截器的文件 axios.js ( 起什么名字都可以
和在 vue 中设置 拦截器的时候有点不一样 。

import { Message ,Loading} from 'element-ui'
export default function ({ store, redirect, app: { $axios } }) {
  // 后端接口地址
  $axios.defaults.baseURL = process.env.NODE_ENV == "development" ? "/api" : "https://aabbcc.com/api"

  // Request拦截器：设置Token
  $axios.onRequest((config) => {
    // 使用Vuex存储Token，并做持久化处理
    config.headers['Authorization'] = "Bearer" + localStorage.getItem("token")
  })
  // Error拦截器：出现错误的时候被调用，根据状态码做对应判断并显示全局Message
  $axios.onError((error) => {
    const code = parseInt(error.response && error.response.status)
    switch (code) {
      case 400:
        Message.error('请求错误')
        break;
      // 未登录
      case 401:
        Message.error("Token过期")
        localStorage.clear();
        break;
      case 403:
        Message.error('拒绝访问')
        break;
      case 404:
        Message.error(`请求地址出错: ${error.response.config.url}`)
        break;
      case 408:
        Message.error('请求超时')
        break;
      case 500:
        Message.error('服务器内部错误')
        break;
      case 501:
        Message.error('服务未实现')
        break;
      case 502:
        Message.error('网关错误')
        break;
      case 503:
        Message.error('服务不可用')
        break;
      case 504:
        Message.error('网关超时')
        break;
      case 505:
        Message.error('HTTP版本不受支持')
        break;
      default:
        break;
    }
  })
}

我们的错误处理 和 vue 时的 axiso 不一样，vue 时，是在响应拦截器 中进行处理的，而 nuxt 是在 错误处理 这个来进行处理的。
2、然后在 nuxt.config.js 中配置我们这个插件：

// nuxt.config.js
export default {
	plugins: [
		{
			src: '~/plugins/axios',
			mode: 'client' // 设置 这个插件就是在客户端渲染时，才会触发
		}
	]
}

然后你就可以发送一次请求，在服务端渲染时，是不会触发这个 拦截器插件 的，只有在 客户端渲染时，才会触发， 因为设置了 mode: ‘client’。