Чтение JSON через вызов ajax в VUE.js

Question

У меня есть json в моем локальном vue "сервере", в той же папке, где находится приложение.Я хотел сделать 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, но я собираюсь заняться чем-то другим.Я не знаю, как использовать функцию makeAjaxCall в $ .get ("books.json" .. Есть идеи?

Answer 1

Переместите makeAjaxCall функцию в секцию methods и присвойте результат обещания items на created:

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

Я лично советую вам более новую технологию для запроса ajax, такую ​​как fetch-apiили axios.