Nuxt 中使用 axios【ssr访问和非ssr访问】

梦里梦外; 2021-12-09 23:27 341阅读 0赞

> 1、所有文章优先发表在个人博客，后续如果有修改的话，可能忘记更新到CSDN了，给你带来不便，抱歉。  
> 2、个人博客本篇文章地址 ： [https://www.xdx97.com/article/649619506351570944][https_www.xdx97.com_article_649619506351570944]

### 1、安装axios，这里是安装Nuxt集成好的 @nuxtjs/axios ###

npm i @nuxtjs/axios

### 2、在 plugins 下面创建axios.js,并配置 ###

我这个进行了一点简单的拦截器配置，下面会给出干净的代码。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70]

export default function ({ store, redirect, app: {  $axios }})  { 
    	// 数据访问前缀
    	$axios.defaults.baseURL = 'http://127.0.0.1:8185/api/'
    	
    	// request拦截器，我这里设置了一个token，当然你可以不要
    	$axios.onRequest(config => { 
    		config.headers.common['X-Access-Token'] = store.state.token
    	})
    	$axios.onError(error => { 
    		
    	})
    	// response拦截器，数据返回后，你可以先在这里进行一个简单的判断
        	$axios.interceptors.response.use(response => { 
    		
    	})
    }

### 3、配置nuxt.config.js ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 1]

### 4、非SSR使用（和在vue中使用是一样的） ###

getDataStat(){ 
    	this.$axios.get('homeBack/dataStat')
    	.then(res => { 
    		this.dataStat = res.data				
    	})
    },

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 2]

### 5、SSR使用，也就是要在渲染页面之前把数据返回 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 3]

async asyncData (context) { 
            let parms = { 
                page: 1,
                blogCatgId: '1'
            }
            let[res1,res2] = await Promise.all([
                // 获取博客文章数据
                context.$axios.post('blogArticle/frontList',parms)
                .then((res) => { 
                    return res              
                }),
                // 获取友情连接数据
                context.$axios.get('myFriend/homePageList')
                .then((res) => { 
                    return res
                }),
            ])
    
            return{ 
                blogList : res1.data, 
                blogTotal : res1.total * 1,
                friendList : res2.data,
            }
        },
        data(){ 
            return { 
                // 博客列表数据
                blogList:[], 
                // 博客总条数
                blogTotal:0,
                // 友情链接数据
                friendList:[],
            }
        },

### 6、说一下这个context对象，这里还可以引用其它对象，具体参看Nuxt文档 ###

如果你想获取路由中的参数，或者想获取Vuex中的数据怎么做呢？

这个context就是一个上下文对象，打印看一下

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 4]  
你可以通过context这个上下文对象，取出你想要的任何数据

###### 另外附上：nuxt使用axios的文档：[https://axios.nuxtjs.org/][https_axios.nuxtjs.org] ######

如果对你有帮助，可以关注一下我的公众号支持一下：  
![在这里插入图片描述][20200301145304655.jpg]

[https_www.xdx97.com_article_649619506351570944]: https://www.xdx97.com/article/649619506351570944
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70]: /images/20211209/84f1b61cbfc44871a2c37be260a3fee4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 1]: /images/20211209/92924ee2f79e4b1aaf0c50f7de334688.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 2]: /images/20211209/ed865048d8e14d20b7338f0999d26068.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 3]: /images/20211209/57f9ebfdc4184c8896965f6d40b91d47.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 4]: /images/20211209/f6d3b68d5422466195f02f9629e4c21e.png
[https_axios.nuxtjs.org]: https://axios.nuxtjs.org/
[20200301145304655.jpg]: /images/20211209/040756d0f32948bca0afda0c30753da0.png