在前端開發中,我們經常需要向后端發起請求獲取數據,并將返回的數據呈現在頁面上。而axios就是一款比較流行的請求庫,它可以幫助我們處理各種類型的數據,包括json、formdata等。那么本文將會重點介紹如何使用axios處理json數據。
首先,我們需要在項目中引入axios庫:
然后,我們可以發起一個GET請求獲取json數據:
axios.get('/api/data.json') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
接下來,我們可以在控制臺中查看返回的response對象,判斷請求是否成功,然后可以通過response.data獲取服務器返回的json數據:
axios.get('/api/data.json') .then(function (response) { console.log(response); if (response.status === 200) { console.log(response.data); } }) .catch(function (error) { console.log(error); });
如果我們需要在POST請求中發送json數據,可以通過設置Content-Type為application/json來告訴服務器發送的數據類型為json:
axios.post('/api/data', { name: 'john', age: 18 }, { headers: { 'Content-Type': 'application/json' } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
在以上例子中,我們發送了一個json對象{name: 'john', age: 18}給服務器,并在請求頭中設置了Content-Type為application/json。
總結來說,axios非常適合處理json數據,我們只需要設置一下請求頭的Content-Type,就可以輕松地發起GET和POST請求,并使用response.data獲取服務器返回的json數據。