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部分，并将承诺结果分配给items上的created：

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

我个人为您建议一些用于ajax请求的较新技术，例如fetch-api或axios。

通过VUE.js中的Ajax调用进行JSON阅读

1 个答案: