Vue.js 在呈现组件之前从api获取数据
在呈现页面之前,我将发送2个api请求:Vue.js 在呈现组件之前从api获取数据,vue.js,vue-component,vue-router,Vue.js,Vue Component,Vue Router,在呈现页面之前,我将发送2个api请求: const Profile = { template: '#profile', attributes: null, photos: [], data: function () { return {attributes: Profile.attributes, photos: Profile.photos}; }, beforeRouteEnter: function (to, from, n
const Profile = {
template: '#profile',
attributes: null,
photos: [],
data: function () {
return {attributes: Profile.attributes, photos: Profile.photos};
},
beforeRouteEnter: function (to, from, next) {
function getProfile() {
return axios.get('user/get-profile?access-token=1', {responseType: 'json'});
}
function getPhotos() {
return axios.get('photos?access-token=1', {responseType: 'json'});
}
axios.all([getProfile(), getPhotos()])
.then(axios.spread(function (profile, photos ) {
console.log(profile, photos );
next(vm => {
vm.setProfile(profile);
vm.setPhotos(photos);
})
}));
},
methods: {
setProfile: function (response) {
Profile.attributes = response.data;
console.log(Profile.attributes);
},
setPhotos: function (response) {
Profile.photos = response.data;
console.log(response);
},
}
};
问题是渲染发生在
setProfile
和setPhotos
方法之前。如何更正渲染我的组件?您只需返回调用axios返回的承诺即可。如:
return axios.all([getProfile(), getPhotos()])
// .then() => ...
或者,您可以向数据对象添加一个属性,并使用该属性显示加载程序,直到所有承诺都得到解决
const Profile = {
template: '#profile',
attributes: null,
photos: [],
data: function () {
return {attributes: Profile.attributes, photos: Profile.photos, isLoading: true};
},
beforeRouteEnter: function (to, from, next) {
function getProfile() {
return axios.get('user/get-profile?access-token=1', {responseType: 'json'});
}
function getPhotos() {
return axios.get('photos?access-token=1', {responseType: 'json'});
}
axios.all([getProfile(), getPhotos()])
.then(axios.spread(function (profile, memes) {
console.log(profile, memes);
this.isLoading = false
next(vm => {
vm.setProfile(profile);
vm.setPhotos(photos);
})
}));
},
methods: {
setProfile: function (response) {
Profile.attributes = response.data;
console.log(Profile.attributes);
},
setPhotos: function (response) {
Profile.photos = response.data;
console.log(response);
},
}
};
模板代码省略了,但是您可以根据isLoading切换显示的内容。如果您走这条路,那么最好为加载程序创建一个抽象
我还建议您可能希望查看vuex,而不是将所有数据耦合到任何特定组件状态 尝试使用async/await。我已经删除了路由之前的
,axios.spread
并添加了create
。所有请求发出后,组件将加载
const Profile = {
template: '#profile',
attributes: null,
photos: [],
data() {
return {
attributes: null,
photos: null
};
},
async created() {
const getProfile = await axios.get('user/get-profile?access-token=1', {
responseType: 'json'
});
const getPhotos = await axios.get('photos?access-token=1', {
responseType: 'json'
});
this.setProfile(profile);
this.setPhotos(photos);
},
methods: {
setProfile(response) {
this.attributes = response.data;
console.log(this.attributes);
},
setPhotos(response) {
this.photos = response.data;
console.log(response);
}
}
};
短的
const Profile = {
template: '#profile',
attributes: null,
photos: [],
data() {
return {
attributes: null,
photos: null
};
},
async created() {
this.attributes = await axios.get('user/get-profile?access-token=1', {
responseType: 'json'
});
this.photo = await axios.get('photos?access-token=1', {
responseType: 'json'
});
}
};
函数async created()未运行。我5分钟前就测试过了。您的浏览器可能不支持异步/等待功能。使用babeljs进行传输。vuejs组件的所有生命周期事件都是同步的。至少在v2.6版本中,它们不能是异步的。