在使用vue進行ajax請求時,我們一般都會在created鉤子函數中發起請求。下面是一個簡單的例子,在created中發起get請求:
created() { axios.get('/api/data') .then(response =>{ this.data = response.data }) }
可以看到,在created中使用了axios庫發起了一個get請求,并將返回數據賦值給了Vue實例中的data屬性。
當然,我們也可以在created中發起post請求。下面是一個例子:
created() { axios.post('/api/data', { param1: 'value1', param2: 'value2' }) .then(response =>{ this.data = response.data }) }
可以看到,在post請求中需要傳遞參數,我們將參數寫在對象中傳入axios.post函數中即可。
除此之外,我們還可以在created之外的函數中發起ajax請求。下面是一個例子:
methods: { fetchData() { axios.get('/api/data') .then(response =>{ this.data = response.data }) } }, created() { this.fetchData() }
可以看到,在created中調用fetchData方法,在該方法中使用axios發起get請求,最終將返回值賦值給Vue實例的data屬性。
使用Vue進行ajax請求非常方便,只需要在created或其他合適的函數中使用axios庫發起請求即可。需要注意的是,在get和post請求中需要傳遞的參數不同,需要根據需求進行相應的編寫。