快速提示！！！

大家好👋

在發出請求時，我真的厭倦了在每個組件上編寫相同的代碼。我想讓事情變得簡單，我猜你也想要。查看我的示例，了解我對此類事情的提示😃。

目前，當我們想從 API 中獲取某些東西時，我們會在下面編寫代碼……至少我是這樣做的 😃

<template>
  <div class="section-orders">
    <ul v-if="!loading && orders.length" class="orders">
      <li v-for="order in orders" :key="order.id">{{ order.name }}</li>
    </ul>

    <span v-if="loading">Loading...</span>

    <span v-if="errorMessage">{{ errorMessage }}</span>
  </div>
</template>

<script>
/**
 * External dependencies.
 */
import axios from 'axios';
import { ref } from '@vue/composition-api';

export default {
  name: 'OrdersSection',

  setup() {
    const errorMessage = ref('');
    const loading = ref(false);
    const orders = ref([]);
    const fetchOrders = async () => {
      if (loading.value) {
        return;
      }

      errorMessage.value = '';

      try {
        loading.value = true;
        const response = await axios.get('/orders');
        orders.value = response.data;
      } catch (error) {
        errorMessage.value = 'An error has ocurred!';
      } finally {
        loading.value = false;
      }
    };
    fetchOrders();

    return {
      orders,
      loading,
      errorMessage,
    };
  },
};
</script>

如果我們只在一個組件上使用它，這是可以的。但是如果我們想在不同的組件中檢索訂單，我們可以復制上面的代碼或創建一個組合函數來提取它的邏輯。

它可能看起來像這樣。

<template>
  <div class="section-orders">
    <ul v-if="!loading && orders.length" class="orders">
      <li v-for="order in orders" :key="order.id">{{ order.name }}</li>
    </ul>

    <span v-if="loading">Loading...</span>

    <span v-if="errorMessage">{{ errorMessage }}</span>
  </div>
</template>

<script>
/**
 * Internal dependencies.
 */
import useOrders from '@/components/bank-form/use-orders';

export default {
  name: 'OrdersSection',

  setup() {
    const { loading, errorMessage, orders } = useOrders();

    return {
      orders,
      loading,
      errorMessage,
    };
  },
};
</script>

和 useOrders 組合功能：

/**
 * External dependencies.
 */
import axios from 'axios';
import { ref } from '@vue/composition-api';

export default function useOrders() {
    const errorMessage = ref('');
    const loading = ref(false);
    const orders = ref([]);
    const fetchOrders = async () => {
        if (loading.value) {
            return;
        }

        errorMessage.value = '';

        try {
            loading.value = true;
            const response = await axios.get('/orders');
            orders.value = response.data;
        } catch (error) {
            errorMessage.value = 'An error has ocurred!';
        } finally {
            loading.value = false;
        }
    };
    fetchOrders();

    return {
        orders,
        loading,
        errorMessage,
    };
}

偉大的！！！！！

但是過了一段時間你需要為另一個請求做同樣的邏輯，寫同樣的“加載、錯誤消息和數據”狀態變得乏味。

使用 @cytools/vue-query 非常簡單 .

這是一個例子

<template>
  <div class="section-orders">
    <ul v-if="!isLoading && orders.length" class="orders">
      <li v-for="order in orders" :key="order.id">{{ order.name }}</li>
    </ul>

    <span v-if="isLoading">Loading...</span>

    <span v-if="error">{{ error }}</span>
  </div>
</template>

<script>
/**
 * Internal dependencies.
 */
import axios from 'axios';
import { useQuery } from '@cytools/vue-query';

export default {
  name: 'OrdersSection',

  setup() {
    const { isLoading, error, data: orders } = useQuery(
        'orders',
        async () => {
          return (await axios.get('/orders')).data;
        },
        {
          defaultData: [],
        },
    );

    return {
      orders,
      isLoading,
      error,
    };
  },
};
</script>

我們用更少的代碼完成了所有工作，並根據密鑰免費緩存數據。

這是該庫的鏈接以獲取更多詳細信息——https://github.com/cytools/vue-query

比上面的例子更有趣。