Vue中，我們經(jīng)常需要通過異步請(qǐng)求來獲取數(shù)據(jù)。fetch是一種現(xiàn)代的網(wǎng)絡(luò)請(qǐng)求API，它可以通過基于Promise和async/await的方式來處理異步請(qǐng)求。在Vue中，我們同樣可以使用fetch來發(fā)送網(wǎng)絡(luò)請(qǐng)求。

// 假設(shè)我們有一個(gè)API接口地址為：https://api.example.com/user/1
// 使用fetch發(fā)送GET請(qǐng)求：
fetch('https://api.example.com/user/1').then(response =>{
return response.json();
}).then(data =>{
console.log(data);
}).catch(error =>{
console.log(error);
})

上面的代碼中，我們先使用fetch發(fā)送了一個(gè)請(qǐng)求，然后使用.then()方法來處理響應(yīng)的結(jié)果。在.then()方法中，我們首先通過response.json()將響應(yīng)體轉(zhuǎn)換為JSON格式的數(shù)據(jù)。然后使用.then()方法來處理JSON數(shù)據(jù)。最后使用.catch()方法來處理請(qǐng)求錯(cuò)誤。

在Vue中，我們可以將fetch封裝在一個(gè)方法中，以便多次使用。以下是一個(gè)簡(jiǎn)單的Vue組件，它使用fetch來加載數(shù)據(jù)。

<template>
<div>
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: []
}
},
async created() {
await this.loadData();
},
methods: {
async loadData() {
const response = await fetch('https://api.example.com/items');
const data = await response.json();
this.items = data;
}
}
}
</script>

在上面的代碼中，我們首先在data對(duì)象中定義了一個(gè)數(shù)組items。然后在created鉤子中，我們調(diào)用了loadData方法來異步加載數(shù)據(jù)。loadData方法使用了async/await語法糖來簡(jiǎn)化Async操作。首先使用fetch方法來發(fā)送一個(gè)網(wǎng)絡(luò)請(qǐng)求，然后使用await語法糖等待響應(yīng)結(jié)果。最后，我們使用await語法糖將響應(yīng)體轉(zhuǎn)換為JSON格式的數(shù)據(jù)。最后，我們將數(shù)據(jù)存儲(chǔ)在items數(shù)組中，以便在組件的模板中使用。