對(duì)于Vue，axios是一個(gè)基于Promise的HTTP庫(kù)，可以在瀏覽器和Node.js上使用。Vue結(jié)合axios可以輕松實(shí)現(xiàn)異步請(qǐng)求數(shù)據(jù)，常見(jiàn)的請(qǐng)求方式有g(shù)et、post、put和delete等。在實(shí)際開(kāi)發(fā)中，尤其是大型項(xiàng)目中，我們需要對(duì)axios進(jìn)行封裝，以滿足業(yè)務(wù)需求。下面將介紹如何封裝Vue axios的get請(qǐng)求。

首先，我們需要?jiǎng)?chuàng)建一個(gè)request.js文件，在該文件中我們會(huì)使用axios.create()方法創(chuàng)建一個(gè)axios實(shí)例。在創(chuàng)建axios實(shí)例時(shí)，我們可以設(shè)置一些默認(rèn)的請(qǐng)求參數(shù)，例如：請(qǐng)求地址、請(qǐng)求超時(shí)時(shí)間、請(qǐng)求頭等。以下是基本封裝代碼：

import axios from 'axios';
const service = axios.create({
baseURL: 'http://localhost:8080/api',
timeout: 5000
});
export default service;

上述代碼中的baseURL是設(shè)置請(qǐng)求地址的，timeout是設(shè)置超時(shí)時(shí)間的。我們將該文件導(dǎo)出后，在別的組件中即可通過(guò)import引入。

接下來(lái)，我們就可以開(kāi)始封裝get請(qǐng)求了。對(duì)于get請(qǐng)求，我們通常需要傳遞參數(shù)，一般使用查詢字符串的形式進(jìn)行傳遞。以下是完整的Vue axios get請(qǐng)求封裝代碼：

import service from './request';
export function fetchData(url, params) {
return new Promise((resolve, reject) =>{
service.get(url, { params: params })
.then(res =>{
resolve(res.data);
})
.catch(err =>{
reject(err.data);
});
});
}

我們可以把封裝的get請(qǐng)求放在單獨(dú)的文件中，例如fetch.js，并將其導(dǎo)出。在需要進(jìn)行g(shù)et請(qǐng)求的組件中，通過(guò)import即可引入。

上述代碼中，fetchData函數(shù)接收兩個(gè)參數(shù)：url和params。其中，url是請(qǐng)求地址，params是查詢字符串參數(shù)。在函數(shù)體內(nèi)，我們返回了一個(gè)Promise對(duì)象，使用axios的get方法發(fā)起HTTP請(qǐng)求，在請(qǐng)求時(shí)將params傳入。最終，我們根據(jù)請(qǐng)求的結(jié)果進(jìn)行resolve或reject的處理。

當(dāng)需要獲取數(shù)據(jù)時(shí)，我們可以通過(guò)以下方式來(lái)進(jìn)行調(diào)用：

import { fetchData } from '@/api/fetch';
fetchData('/user/list', { name: 'sample' })
.then(data =>{
console.log(data);
})
.catch(error =>{
console.log(error);
});

調(diào)用fetchData函數(shù)時(shí)，我們需要傳入兩個(gè)參數(shù)：請(qǐng)求地址和查詢字符串參數(shù)。通過(guò)then()方法處理成功的返回，通過(guò)catch()方法處理失敗的返回。

在封裝get請(qǐng)求時(shí)，我們還可以針對(duì)不同的業(yè)務(wù)需求進(jìn)行優(yōu)化。例如，對(duì)于分頁(yè)數(shù)據(jù)，我們可以將查詢字符串拼接成類似于"/user/list?name=sample&page=1&size=10"的形式，以便于后端在服務(wù)端進(jìn)行解析和處理。通過(guò)對(duì)get請(qǐng)求進(jìn)行封裝，我們可以快速、高效地完成開(kāi)發(fā)工作。