使用 Nuxt.js实现SSR服务器端渲染之@nuxtjs/axios的使用

在使用NuxtJS进行项目开发的时候不可避免的要涉及到数据请求尤其是服务器端的异步数据请求。首先我们在官网中看下异步数据请求中在对asyncData 方法，进行介绍的是提到了。

我们使用 axios 重构 HTTP 请求, 我们 强烈建议您 使用 axios 模块 用于您的Nuxt项目中。

看到没？强烈推荐axios，想必axios大家并不陌生了。

那么axios如何在Nuxt.js中使用呢？

我们可以直接

npm install axios

通过安装axios 来进行数据获取，同时也可以使用Nuxt.js中自带的@nuxtjs/axios

虽然是自带的但也不是直接就能拿来用的，我们需要在nuxt.config.js中对@nuxtjs/axios进行简单的配置以后就可以使用了

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

当然，如果有必要我们还可以对nutjs/axios进行更多的配置

	axios: {
		proxy: true, // Can be also an object with default options
		retry: {
			retries: 3 //默认情况下，如果将 retry 值设置为 true，则重试次数将为3次。您可以通过传递这样的对象来
		},
		 credentials: false, // 表示跨域请求时是否需要使用凭证
		 debug: process.env._ENV == "production" ? false : true,
		//设置不同环境的请求地址
		 baseURL: process.env.BASE_URL || "https://www.baidu.com",
		 withCredentials: true
	},

还可以设置代理

proxy: {
 '/api/': { 
 target: 'https://h5api.zhefengle.cn',
 pathRewrite: {
 '^/api/': '/',
 changeOrigin: true
 } 
 }
 }

使用过程中@nuxtjs/axios与 Vue中的axios也不完全一样。

在方法中直接调用：

mounted() {
 this.$axios.get("/index.html").then(res=>{
 console.log(res)
 })
 },

在使用 axios 的时候，你想获取 $axios 可以直接通过 context.app.$axios 来获取.当然你需要在方法中传入 context

asyncData(context){
 return context.$axios.$post(url, data,);
}

Axios插件提供帮助程序，可以更轻松，更快速地注册axios拦截器。

• onRequest(config)
• onResponse(response)
• onError(err)
• onRequestError(err)
• onResponseError(err)

拦截器的代码放在plugins文件夹下。

示例：（plugins/axios.js）

 $axios.onError(error => {
 const code = parseInt(error.response && error.response.status)
 if (code === 400) {
 redirect('/400')
 }
 })