在使用 vue 的 ssr框架 （nuxt）时，我们使用 @nuxtjs/axios 去发生请求，因为在这个方面，有很多错误，想要记录一下，待以后有办法了，就解决掉他 。

1. 发送请求

1、下载

> npm i @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 （客户端渲染）生命周期中使用
注意，vue 的生命周期中，要在请求方法前面加一个 $ 。

pages > index.vue

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

axios 的 @nuxtjs/axios 官网介绍。

2. 拦截器

2.1 拦截器的设置：

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

export default function ({ $axios }) {
	// 请求拦截
	$axios.onRequest(config => {
        /* 获取本地存储中的 token
	    	const token = localStorage.getItem('token');
	    	// 如果 token 存在，就设置请求头
	    	if(token) {
	        	config.headers.Authorization = 'Bearer ' + token;
	    	} 
    	*/
        console.log('请求拦截，我们所在客户端触发的');
        return config;
    })

	// 响应拦截
	$axios.onResponse(res => {
        console.log('响应拦截,我们所在客户端触发的');
        return res;
    })

	// 错误处理
	$axios.onError(err => {
         // 服务端返回的状态码
         let status = err.response.status;
         // 服务端返回的错误代码
         let messageData = err.response.data.message;
        /** 
         * 根据返回的状态码，来跳转页面 和 提示用户 如：
         * 把 错误信息 对用户进行提示，使用组件的ui提示,
         * 例如 element-ui 的 message
         * import { Message } from "element-ui";
         * Message({
         *  message: error,
         *  type: messageData
         * })
         * 
         * 还有进行页面的跳转
         * if (status === 422) {
		 *		跳转到登录页面
		 *	}
         */
         ...............
    })
}

我们的错误处理 和 vue 时的 axiso 不一样，vue 时，是在响应拦截器 中进行处理的，而 nuxt 是在 错误处理 这个来进行处理的。

2、然后在 nuxt.config.js 中配置我们这个插件：

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

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

参考文章：

2.2 提问时间：

提问1： nuxt 的拦截器是用来干嘛的呢？

因为，在 vue 中使用 axiso 来设置拦截器，分别有（简单说
1、请求拦截器： 携带本地的 token，让后端可以知道我们发起请求的人是谁。
2、响应拦截器：获取错误信息，给用户做出提示。

那 nuxt 中的拦截器，是要在 服务端渲染时，对请求进行拦截，还是在客户端渲染时的请求进行拦截呢？

在配置拦截器插件时，使用了 mode: 'client' 在客户端渲染时，才触发，应该不会和 nuxt 的拦截器产生违背吧 ！？