現如今，網絡請求在前端開發中扮演著至關重要的角色。隨著前端技術的發展，Vue也成為了廣受歡迎的前端框架之一。而在Vue中，封裝網絡請求也成為了一個不可避免的話題。

為什么要封裝網絡請求？首先，封裝網絡請求可以提高代碼的可維護性。如果不封裝，每個業務組件都要寫一遍請求數據的代碼，維護起來會非常麻煩。其次，封裝網絡請求可以使代碼更加優雅，讓代碼結構更清晰，也更好理解。

import axios from 'axios'
const service = axios.create({
baseURL: '',
timeout: 5000 // request timeout
})
service.interceptors.request.use(
config =>{
// 這里可以統一攔截請求，比如加上token之類的
return config
},
error =>{
// request error
Promise.reject(error)
}
)
// response interceptor
service.interceptors.response.use(
response =>{
const res = response.data
return res
},
error =>{
// 錯誤處理
return Promise.reject(error)
}
)
export default service

上面的代碼是一個基于axios的請求封裝，由于axios非常的靈活，關于它的具體使用可以去官網查看。

如何在Vue中使用這個封裝好的請求呢？下面是一個小例子：

import service from './request'
export function getExample(params) {
return service({
url: '/example/get',
method: 'get',
params
})
}
export function postExample(data) {
return service({
url: '/example/post',
method: 'post',
data
})
}

使用以上代碼，我們就可以對getExample和postExample發起請求了。這里使用了ES6的箭頭函數，使得代碼更加精簡明了。

除此之外，我們還可以在項目中設置一個全局的請求loading，這樣在請求過程中頁面就可以顯示loading了。

import Loading from '@/components/Loading.vue'
import { getExample } from '@/api/example.js'
export default {
data() {
return {
loadingInstance: null
}
},
methods: {
async requestExample() {
this.loadingInstance = this.$loading(Loading)
const res = await getExample()
this.loadingInstance.close()
console.log(res)
}
}
}

以上代碼中，我們引入了一個Loading組件，并使用了Vue的內置loading指令，使得頁面可以很方便地顯示loading。在請求過程中，首先調用this.$loading(Loading)顯示loading，等請求結束后再調用this.loadingInstance.close()關閉loading。這里用到了ES7的async/await語法，使得代碼更加簡潔。

當然，以上代碼僅僅是封裝網絡請求的一個基本例子。在實際的開發中，我們還需要考慮各種情況的處理，比如分頁、請求緩存等等。總之，對于封裝網絡請求，我們需要結合具體的業務需求來進行。