安裝axios
cnpm i axios -S
引入
import axios from 'axios';
asyncData方法會(huì)在組件(限于page頁面組件)每次加載之前被調(diào)用。它可以在服務(wù)端或路由更新之前被調(diào)用糟需。
因?yàn)?asyncData 在前端渲染頁面之前調(diào)用洲押,所以 asyncData 中沒有 this。
先通過 asyncData 中的代碼獲取到遠(yuǎn)程的數(shù)據(jù)杈帐,然后再把得到的遠(yuǎn)程數(shù)據(jù)合并到當(dāng)前前端組件 data 中体箕,然后在渲染頁面,這就是 ssr 渲染的過程跃须。
export default {
async asyncData({ params }) {
let { data } = await axios.get('/1.json');
console.log('data:', data);
return data; // 這個(gè)return會(huì)把結(jié)果和data屬性的值自動(dòng)合并菇民,視圖層直接調(diào)用即可第练。
}
};
如果不喜歡 es6 的 async/await娇掏,那么也可以使用回調(diào)函數(shù)驹碍。
asyncData({ params }, callback){
axios.get(`http://127.0.0.1:3000/goods`).then(res=>{
callback(null, {
a:1,
arr:res.data
})
})
}