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

一起探讨学习

每天给大家提供技术干货

博主技术笔记 https://notes.xiyankt.com

博主开源微服架构前后端分离技术博客项目源码地址，欢迎各位star https://gitee.com/bright-boy/xiyan-blog

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-niR70NO1-1619312859891)(https://www.freesion.com/images/430/785f7d5f55c202d80561d695b26ceeae.png)]

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UAU1HXvd-1619312859893)(https://www.freesion.com/images/712/28b3d972549b405b6a0fabe51176b650.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oosuUgbO-1619312859895)(https://www.freesion.com/images/766/5fe87e1a65ebd1467479750d846990ae.png)]

`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就是一个上下文对象，打印看一下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Lsy0SzrR-1619312859897)(https://www.freesion.com/images/101/11d6750437e80dbcc3323d195bf0c4fd.png)]
你可以通过context这个上下文对象，取出你想要的任何数据

另外附上：NUXT使用AXIOS的文档：HTTPS://AXIOS.NUXTJS.ORG/