在前端開發中,我們經常需要向后端發送請求并獲取響應數據,而axios是一個非常常用的網絡請求庫之一。在使用axios發送網絡請求之后,我們通常獲取到的響應數據是JSON格式的。下面我們將介紹如何使用axios獲取JSON數據。
// 引入axios庫 import axios from 'axios'; // 發送GET請求 axios.get('/api/data') .then(response =>{ // 獲取服務器返回的JSON數據 const data = response.data; console.log(data); }) .catch(error =>{ console.log(error); }); // 發送POST請求 axios.post('/api/save', { name: '張三', age: 20 }) .then(response =>{ // 獲取服務器返回的JSON數據 const data = response.data; console.log(data); }) .catch(error =>{ console.log(error); });
上面的代碼演示了如何使用axios發送GET和POST請求,并且獲取服務器返回的JSON數據。需要注意的是,通過response.data可以獲取到JSON數據,因為axios會自動將響應數據解析為JSON格式。
如果服務器返回的數據不是JSON格式,我們可以通過axios的transformResponse配置項手動解析數據。
// 定義解析JSON數據的方法 const parseJson = response =>{ try { const data = JSON.parse(response.data); return data; } catch (e) { return response.data; } }; // 發送GET請求,并手動解析JSON數據 axios.get('/api/data', { transformResponse: [parseJson] }) .then(response =>{ // 獲取服務器返回的JSON數據 const data = response.data; console.log(data); }) .catch(error =>{ console.log(error); });
在上面的代碼中,我們定義了一個叫做parseJson的方法來手動解析JSON數據。在axios發送GET請求的時候,我們通過transformResponse配置項將parseJson方法傳入,這樣就可以手動解析服務器返回的JSON數據了。
總的來說,使用axios獲取JSON數據非常簡單,只需要通過response.data獲取到服務器返回的JSON數據即可。如果需要手動解析數據,可以通過transformResponse配置項來實現。
下一篇mysql只查一條記錄