在前端開發中，經常有需要獲取接口數據的情況。一般情況下，我們會通過 ajax 請求獲取接口數據，并且在等待數據返回時，會出現一個 loading 等待狀態。當使用 Vue 框架時，我們可以通過它提供的功能，輕松實現接口請求和 loading 狀態。

在 Vue 中，我們可以通過獲取數據的方式來實現 loading 狀態的顯示。通過 data 中定義一個 loading 的狀態，并在獲取數據的方法中觸發它的改變，從而實現 loading 狀態的變化。

data: {
loading: false
},
methods: {
getData() {
this.loading = true
Axios.get('/api/data')
.then(res =>{
this.loading = false
this.data = res.data
})
.catch(err =>{
this.loading = false
console.log(err)
})
}
}

上面的代碼中，我們在 data 中定義了一個 loading 狀態，并在獲取數據的方法中觸發它的改變。通過請求獲取數據的方法，當請求觸發時，我們將 loading 狀態改為 true。當請求數據成功時，我們將 loading 狀態改為 false，并將獲取到的數據賦值給 data。當請求數據失敗時，我們同樣將 loading 狀態改為 false，并在控制臺輸出錯誤信息。

在 Vue 中，我們可以通過設置 axios 的 interceptor 來實現請求攔截器和響應攔截器。在請求攔截器中，我們可以觸發 loading 狀態的改變。在響應攔截器中，我們同樣可以觸發 loading 狀態的改變，并在控制臺輸出錯誤信息。

Axios.interceptors.request.use(
config =>{
this.loading = true
return config
},
error =>{
this.loading = false
return Promise.reject(error)
}
)
Axios.interceptors.response.use(
response =>{
this.loading = false
return response
},
error =>{
this.loading = false
console.log(error)
return Promise.reject(error)
}
)

上面的代碼中，我們通過 axios 的 interceptor 來實現請求攔截器和響應攔截器。在請求攔截器中，我們將 loading 狀態改為 true。在響應攔截器中，我們同樣將 loading 狀態改為 false，并在控制臺輸出錯誤信息。通過這種方式，我們可以輕松實現攔截器功能，并對接口請求進行詳細的控制。

實現 loading 狀態在前端開發中是一個常見的需求，這個需求也可以通過 Vue 框架輕松實現。通過獲取數據的方式和設置 axios 的 interceptor 來實現 loading 狀態的顯示，我們可以更加輕松地控制接口請求過程中的 loading 狀態。