vue-ssr之nuxt.js 服务端的异步数据交互
在web项目开发中，数据请求是必不可少的；我们通常在vue中使用的数据请求，都是基于浏览器进行的异步请求；那么在nuxt.js框架中,如何实现数据请求呢？现在用一个例子来演示怎么使用axios，实现服务端的异步数据请求。
PS. axios在nuxt.js框架是作为模块在初始化项目的时候就让选择安装的。但是亲测发现似乎没有安装，还是需要运行
npm install @nuxtjs/axios --save
在nuxt.config.js中进行如下配置
...
/*
** Nuxt.js modules
*/
modules: [
'@nuxtjs/axios'
],
axios: {
prefix: '/api/',
proxy: true // Can be also an object with default options
},
proxy: {
'/api/': {
target: 'https://www.domian.com/',
pathRewrite: { '^/api/': '' }
}
},
...
在index.vue页面中使用
<template>
<div>
<img :src="item.content" alt="" v-for="(item, index) in bannerData.banners" key="index">
</div>
</template>
<script>
export default {
data(){
return {
bannerData: {}
}
},
# 这里发起请求，这个请求在页面变异前进行的，所有不能使用this
async asyncData(content) {
const res = await content.$axios.$post("/getFDBanner", { location: "88" });
if (res.resultCode === "1") {
console.log(res.resultdata);
return { bannerData: res.resultdata };
}
}
}
</script>
<style>
</style>
asyncData 方法
asyncData方法会在组件（限于页面组件）每次加载之前被调用。它可以在服务端或路由更新之前被调用。 在这个方法被调用的时候，第一个参数被设定为当前页面的上下文对象，你可以利用 asyncData方法来获取数据，Nuxt.js 会将
asyncData 返回的数据融合组件 data 方法返回的数据一并返回给当前组件。
注意：由于asyncData方法是在组件 初始化 前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象
