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

原文：https://blog.csdn.net/Tomwildboar/article/details/95928616

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

1、安装axios，这里是安装Nuxt集成好的 @nuxtjs/axios
npm i @nuxtjs/axios
1
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 => {

})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
3、配置nuxt.config.js

4、非SSR使用（和在vue中使用是一样的）
getDataStat(){
this.$axios.get('homeBack/dataStat')
.then(res => {
this.dataStat = res.data
})
},
1
2
3
4
5
6

 

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:[],
}
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
6、说一下这个context对象，这里还可以引用其它对象，具体参看Nuxt文档
如果你想获取路由中的参数，或者想获取Vuex中的数据怎么做呢？

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

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

 

另外附上：nuxt使用axios的文档：https://axios.nuxtjs.org/
————————————————
版权声明：本文为CSDN博主「小道仙」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Tomwildboar/article/details/95928616