通過VUE.js中的Ajax調用進行JSON閱讀

Question

我的本地Vue“服務器”中有一個json，與應用程序所在的文件夾相同。 我想使用promise進行ajax調用，但是我不確定如何將其連接到我的代碼。 這是我的代碼：

 export default { name: "app", data() { return { items: [] }; }, created: function() { this.fetchData(); }, methods: { fetchData: function() { var self = this; $.get("books.json", function(data) { self.items = data; }); } } }; function makeAjaxCall(url, methodType){ var promiseObj = new Promise(function(resolve, reject){ var xhr = new XMLHttpRequest(); xhr.open(methodType, url, true); xhr.send(); xhr.onreadystatechange = function(){ if (xhr.readyState === 4){ if (xhr.status === 200){ console.log("xhr done ok"); var response = xhr.responseText; var respJson = JSON.parse(response); resolve(respJson); } else { reject(xhr.status); console.log("xhr failed"); } } else { console.log("xhr processing"); } } console.log("request sent succesfully"); }); return promiseObj; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <template> <div id="app"> <span>{{items}}</span> <ul> <li v-for="item in items.books" :key="item.name">- <span class="name">{{item.name}}</span> <br> <span class="genre">{{item.genre}}</span> </li> </ul> </div> </template> 

通常我會使用jQuery，但是我還會去做別的事情。 我不知道如何在$ .get（“ books.json” ..中使用函數makeAjaxCall。有什么想法嗎？

Answer 1

將makeAjaxCall函數移至methods部分，並將promise結果分配給created items ：

created: function() {
    this.makeAjaxCall("books.json", "get").then(res => {
        this.items = res
        return res
    })
}

我個人為您提供一些針對ajax請求的更新技術，例如fetch-api或axios 。