Vue 触发器请求从 API 获取数据

Question

我刚刚接触 Vue，所以这个问题可能很愚蠢。我想从我的后端 Rails API 在 Vue 中显示数据。每次用户进入网站时，数据都应该显示出来。为此，我调用位于下方的 GET 端点：

imports.js

const fetchSyncedProductsResultRequest = (self) => {
  const jwtToken = self.$store.state.idToken;

  return axios
    .get(`/api/v1/imports/products/sync_result`, {
      headers: {
        Authorization: `Bearer ${jwtToken}`,
      }
    })
    .then(response => {
      self.unsyncedProducts = response.data['products']
    })
};

export {
  fetchSyncedProductsResultRequest
};

来自此 GET 的预期 JSON 响应将是：

{:products=>
  [{:id=>"611ea9a7392ab50013cf4713", :name=>"2-Tone Hoodie", :code=>"SS22CH013", :result=>nil, :last_sync_at=>nil},
   {:id=>"60ec84062f25d400150b351c", :name=>"5-Pocket Denim", :code=>"SS22WP014", :result=>nil, :last_sync_at=>nil},
   {:id=>"61966dc83e81dd001731ccd7", :name=>"Zip Shirt Jacket", :code=>"FW22WT001", :result=>nil, :last_sync_at=>nil},
   {:id=>"61d5cab6b41408001b0e9376", :name=>"Yankees Satin Varsity Jacket", :code=>"FW22WJ021", :result=>nil, :last_sync_at=>nil}]}

在我的 Vue 文件中我有：

sync_products.vue

<template>
  <div>
    <div class="panel">
      <div class="panel-body">
        <h4>Synchronize products</h4>
        <div v-for="product in fetchedProductSyncStatus" :key="product" class="status">
          {{product}}
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import {
  fetchUnsyncedProductsRequest,
} from '../../api/imports'

export default {
    name: 'BackboneSyncProducts',
    data(){
        return{
          fetchedProductSyncStatus: []
        }
    },
}
</script>

<style scoped>
</style>

似乎没有发送请求，因为没有显示任何内容，而且我在“网络”选项卡中也没有看到它。什么决定了这个请求的发送？

Answer 1

您需要将 fetchUnsyncedProductsRequest 函数挂接到 Vue 的生命周期，例如创建或安装。参见：https://vuejs.org/guide/essentials/lifecycle.html

我也会将函数更改为 return 数据。

const fetchSyncedProductsResultRequest = (token) => {    
  return axios
    .get(`/api/v1/imports/products/sync_result`, {
      headers: {
        Authorization: `Bearer ${token}`,
      }
    })
    .then(response => {
      return response.data['products']
    })
};

export {
  fetchSyncedProductsResultRequest
};

然后添加创建的钩子并将响应添加到 fetchedProductSyncStatus

export default {
    name: 'BackboneSyncProducts',
    data() {
        return{
          fetchedProductSyncStatus: []
        }
    },
    created () {
      const jwtToken = this.$store.state.idToken;
      fetchUnsyncedProductsRequest(jwtToken).then(data => {
        this.fetchedProductSyncStatus = data
      })
    }
}

编辑：修复了您评论的自我引用错误。关于这一点，将令牌像商店一样存储在客户端中是不好的做法

Vue 触发器请求从 API 获取数据

Vue trigger request to fetch data from API

javascript

vue.js

axios