通过 VUE.js 中的 ajax 调用读取 JSON

Posted 2023-02-22

【中文标题】通过 VUE.js 中的 ajax 调用读取 JSON

【英文标题】：JSON reading through an ajax call in VUE.js

【发布时间】：2019-05-14 10:32:28

【问题描述】：

我的本​​地 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".. 有什么想法吗？

【参考方案1】：

将makeAjaxCall 函数移动到methods 部分，并将承诺结果分配给created 上的items：

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

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

【讨论】：

感谢您的帮助和建议。我一直在阅读有关 axios 的信息，它在我的愿望清单上。