欢迎大家进群，一起探讨学习
微信公众号，每天给大家提供技术干货
博主技术平台地址
博主开源微服架构前后端分离技术博客项目源码地址，欢迎各位star
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)(www.freesion.com/images/430/…)]
4、非SSR使用（和在VUE中使用是一样的）
`getDataStat(){`
`this.$axios.get('homeBack/dataStat')`
`.then(res => {`
`this.dataStat = res.data`
`})`
`},`
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UAU1HXvd-1619312859893)(www.freesion.com/images/712/…)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oosuUgbO-1619312859895)(www.freesion.com/images/766/…)]
`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)(www.freesion.com/images/101/…)]
你可以通过context这个上下文对象，取出你想要的任何数据
