快速提示!!!
大家好👋
在發出請求時,我真的厭倦了在每個組件上編寫相同的代碼。我想讓事情變得簡單,我猜你也想要。查看我的示例,了解我對此類事情的提示😃。
目前,當我們想從 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
比上面的例子更有趣。
上一篇
Vue JS 中的路由器
下一篇
VueX 會發生什麼