在實(shí)際的開發(fā)中，我們經(jīng)常需要調(diào)用 API 來(lái)獲取數(shù)據(jù)，Vue 是一款非常流行的前端框架，Vue 也提供了非常便捷的方法來(lái)調(diào)用 API，本文將介紹 Vue 怎樣調(diào)用 API。

首先，我們需要先安裝 Axios，Axios 是一個(gè)基于 Promise 的 HTTP 庫(kù)，可以用于瀏覽器和 Node.js 環(huán)境。在 Vue 項(xiàng)目中，用來(lái)調(diào)用 API 最常用的就是 Axios。

// 安裝 Axios
npm install axios --save

安裝完成 Axios 后，我們就可以在 Vue 組件中引入 Axios。通常來(lái)說(shuō)，我們會(huì)在單獨(dú)的 js 文件當(dāng)中定義一些 API。下面是一個(gè)簡(jiǎn)單的 API 示例。

import axios from 'axios';
const api = axios.create({
baseURL: 'https://api.example.com',
});
export default {
async fetchData() {
const response = await api.get('/data');
return response.data;
},
};

上面代碼的意思是，創(chuàng)建一個(gè)名為 api 的對(duì)象，指定 baseURL 為 https://api.example.com。我們對(duì)外暴露了一個(gè) fetchData 方法，它會(huì)調(diào)用 API ，并返回獲取到的數(shù)據(jù)。

接著，我們就可以在 Vue 組件中使用該 API。假設(shè)你定義了一個(gè)名為 Example 的組件，下面是 Example 組件中如何使用 API 的示例代碼。

import ExampleAPi from '@/api/example';
export default {
async created() {
const data = await ExampleAPI.fetchData();
console.log(data);
},
};

上面代碼中，我們引入了 ExampleAPI 文件，并在 created 鉤子函數(shù)中調(diào)用了 fetchData() 方法。在 fetchData() 方法中，我們使用了 Axios 提供的 get 方法，向 API 發(fā)送了一個(gè)請(qǐng)求，并通過 response.data 獲取到了返回的數(shù)據(jù)。

以上是一個(gè)簡(jiǎn)單的 Vue 調(diào)用 API 的過程。當(dāng)我們?cè)趯?shí)際項(xiàng)目中使用時(shí)，還需要考慮很多其他的因素，如接口參數(shù)、請(qǐng)求頭、響應(yīng)攔截等等，但是總體來(lái)說(shuō)，Vue 配合 Axios 使用是非常方便的。