對(duì)接口后端的接口文檔之后
封裝請(qǐng)求模塊
項(xiàng)目中我們需要通過(guò)接口進(jìn)行數(shù)據(jù)請(qǐng)求，為了便于操作，要封裝用于請(qǐng)求操作的函數(shù)，那么在Vue.js中赌莺，我們通常是使用Axios進(jìn)行AJAX請(qǐng)求操作的，首先松嘶，就來(lái)安裝Axios吧
npm i axios
在utils目錄下，創(chuàng)建request.js文件挎扰，作為請(qǐng)求功能模塊翠订，在文件中引入Axios
// utils/request.js
import axios from 'axios'
// 創(chuàng)建axios實(shí)例
const request = axios.create({
})
export default request
顯而易見(jiàn)，每次請(qǐng)求接口的基地址都有2個(gè)遵倦，每次請(qǐng)求接口書(shū)寫(xiě)完整地址就非常的繁瑣
這個(gè)時(shí)候就可以給request設(shè)置攔截器來(lái)判斷url前綴尽超，再將對(duì)應(yīng)基地址設(shè)置給config.baseURL
- axios具有請(qǐng)求攔截器和響應(yīng)攔截器，用于在請(qǐng)求與響應(yīng)前進(jìn)行提前處理
- 請(qǐng)攔截器config為本次請(qǐng)求的相關(guān)配置信息梧躺，這里通過(guò)baseURL來(lái)修改請(qǐng)求的基地址
- 操作完畢之后似谁，一定要返回config讓配置生效，否則請(qǐng)求無(wú)法成功
import axios from 'axios'
// 創(chuàng)建axios實(shí)例
const request = axios.create({
})
// 封裝URL基地址檢測(cè)函數(shù)
function getBaseURL (url) {
if (url.startsWith('/這里是后臺(tái)接口的前綴')) {
return '這里是后臺(tái)接口的服務(wù)URL'
} else {
return '這里是前臺(tái)接口的服務(wù)URL'
}
}
// 設(shè)置請(qǐng)求攔截器
request.interceptors.request.use(function (config) {
// 判斷config.url的前綴是什么掠哥，然后進(jìn)行請(qǐng)求baseURL的設(shè)置
config.baseURL = getBaseURL(config.url)
return config
})
export default request
測(cè)試請(qǐng)求巩踏，測(cè)試后可刪除
// App.vue
<script>
import request from '@/utils/request'
request({
method: 'GET',
// 請(qǐng)求某個(gè)前臺(tái)接口
url: '/front/ad/getAdList',
// 請(qǐng)求某個(gè)后臺(tái)數(shù)接口
// url: '/boss/v2/api-docs?group=edu-boss-boot'
}).then(res => {
console.log(res)
})
export default {
}
</script>
