Axios初步

昏睡的云雪發表於2024-07-15
iOS
首先匯入CDN 
        <!--匯入vue與axios--> 
        <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
        <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

然後在“script”標籤書寫。其中先建立一個字尾名為“json”的檔案，該檔案有兩種參考寫法，且都不支援註釋

寫法一：每個獨立的物件都被包裝在一個頂層物件中，其中的鍵是自定義的名稱。這樣就符合了JSON的語法規則。每個內部物件都有自己的鍵值對，並且整個結構由一個大括號包圍，表示這是一個單一的JSON物件。

{
    "hunshuideyunxue": {
        "name": "hunshuideyunxue",
        "age": 20,
        "address": "qiludadi"
    },
    "百度": {
        "name": "hunshuidezhangyu",
        "url": "https://www.baidu.com"
    },
    "B站": {
        "name": "B站",
        "url": "https://www.bilibili.com"
    }
}

或者所有物件都被放置在一個陣列中，由方括號包圍。

[
    {
        "name": "hunshuideyunxue",
        "age": 20,
        "address": "qiludadi"
    },
    {
        "name": "yun",
        "url": "https://www.baidu.com"
    },
    {
        "name": "B站",
        "url": "https://www.bilibili.com"
    }
]

　　然後在“html”檔案中的“script”標籤中寫

mounted(){ //鉤子函式，鏈式程式設計
           axios.get('data.json').then(response=>(console.log(response.data)));
           //連線“deta.json”檔案，拿到後在控制檯輸出“data.json”中的內容
　　　　　　　//注意該檔案與當下的這個檔案的位置關係
       }

此時執行後在瀏覽器控制檯中就可以檢視輸出內容，本次用的HbuiderX所寫。可能因為環境等問題導致瀏覽器無法顯示檔案內的元素，求解！！！

相關文章