前戲
如果你是使用vscode軟件進行開發前端項目，進行ajax調試的時候，建議安裝liveServer插件。這樣我們打開一個文件的時候，會以服務的方式打開。
vue中常用的ajax庫有兩個，一個是vue-resource，這個是在vue1.x中廣泛使用的插件。還有一個是axios，在vue2.x中，官方強烈推薦的第三方ajax請求庫。
vue-resource
參考文檔：https://github.com/pagekit/vue-resource/blob/develop/docs/http.md
在Vue的生命周期中，我們知道created()是最早可以獲取到data數據的，所以我們一般都是在created()里寫ajax請求
因為vue-resource是第三方庫，所以我們需要先進行安裝，才能使用
npm install vue-resource
創建一個json文件，假設我的叫name.json
[
{"name":"張三","age":18},
{"name":"李四","age":66}
]
有json文件了，我們使用vue-resource請求數據
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./node_modules/vue/dist/vue.js"></script> <!-- 導入 vue-resource --> <script src="./node_modules/vue-resource/dist/vue-resource.js"></script> </head> <body> <div id="app"> <h1>{{ message }}</h1> </div> <script> new Vue({ el: "#app", data: { message: [] // 聲明一個數組,后面用ajax請求的值重新賦值 }, // 發送異步請求 created(){ this.$http.get("http://127.0.0.1:5500/vue-01-core/name.json").then(response=>{ // 回調函數需要使用箭頭函數（this Vue實例，不然this代表window） // 獲取到的數據存在response.data中 console.log(response.data) this.message = response.data },response=>{ // 錯誤時的回調函數 console.log(response.statusText) }) } }) </script> </body> </html>
這樣我們的name.json里的數據就都在h1標簽里了
axios
在vue2.x里，官方推薦我們使用axios，參考文檔：https://github.com/axios/axios/blob/master/README.md
首先來安裝
npm install axios
我們還是使用上面的name.json文件，使用axios發送ajax請求
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./node_modules/vue/dist/vue.js"></script> <!-- 導入 axios --> <script src="./node_modules/axios/dist/axios.js"></script> </head> <body> <div id="app"> <h1>{{ res }}</h1> </div> <script> new Vue({ el: "#app", data: { res: [] // 聲明一個數組,后面用ajax請求的值重新賦值 }, // 發送異步請求 created(){ axios.get("http://127.0.0.1:5500/vue-01-core/name.json") .then(response=>{ // 成功的回調函數 // 成功的數據也在response.data里 console.log(response.data) this.res = response.data }) .catch(error=>{ // 失敗時的回調函數 // 失敗的數據在error.message里 console.log(error.message) }) .finally(()=>{ // 始終都會執行的回調函數，也可以不寫 console.log('finally') }) } }) </script> </body> </html>
注意：一定要使用箭頭函數，如果沒有參數時，小括號不能舍去，如果有一個參數時，小括號可以舍去