最近在使用axios請求本地json文件時遇到了一個問題,請求總是失敗,于是我開始了我的排錯之旅。
首先我查看了我的代碼,發現我使用的是相對路徑,而不是絕對路徑。為了排除這個問題,我試圖使用絕對路徑,但結果還是失敗了。
axios.get('/json/data.json') .then(response =>console.log(response)) .catch(error =>console.log(error))
之后我開始嘗試使用其他方法來獲取數據,比如使用XMLHttpRequest或者fetch,但結果都是一樣的。
const request = new XMLHttpRequest() request.open('GET', '/json/data.json', true) request.onload = function () { if (request.status === 200) { console.log(request.responseText) } } request.send() fetch('/json/data.json') .then(response =>response.json()) .then(data =>console.log(data)) .catch(error =>console.log(error))
最后我決定查看瀏覽器的控制臺,看看有沒有錯誤信息。果不其然,我發現瀏覽器報了一個404錯誤,說明我的json文件并沒有被正確地加載。
GET http://localhost:3000/json/data.json 404 (Not Found)
于是我檢查了我的目錄結構,發現我把json文件放到了public目錄下,但我使用的是npm run serve命令啟動的應用,而不是把文件放到了dist目錄下,因此在運行應用時,我需要在我請求的路徑前面加上/public。
axios.get('/public/json/data.json') .then(response =>console.log(response)) .catch(error =>console.log(error))
經過這番排錯,我終于成功地獲取了本地的json數據。希望這篇文章可以幫到遇到相似問題的人。
下一篇js畫圖vue