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

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

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

npm i @nuxtjs/axios

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

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

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

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

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

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

    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就是一个上下文对象，打印看一下

你可以通过context这个上下文对象，取出你想要的任何数据

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

如果对你有帮助，可以关注一下我的公众号支持一下：