# 和服務端進行交互
## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/server.html#%E5%89%8D%E7%AB%AF%E8%AF%B7%E6%B1%82%E6%B5%81%E7%A8%8B)前端請求流程
在`vue-element-admin`中，一個完整的前端 UI 交互到服務端處理流程是這樣的：
1. UI 組件交互操作；
2. 調用統一管理的 api service 請求函數；
3. 使用封裝的 request.js 發送請求；
4. 獲取服務端返回；
5. 更新 data；
從上面的流程可以看出，為了方便管理維護，統一的請求處理都放在`@/src/api`文件夾中，并且一般按照 model 緯度進行拆分文件，如：
~~~
api/
login.js
article.js
remoteSearch.js
...
~~~
## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/server.html#request-js)request.js
其中，`@/src/utils/request.js`是基于[axios](https://github.com/axios/axios)的封裝，便于統一處理 POST，GET 等請求參數，請求頭，以及錯誤提示信息等。具體可以參看[request.js](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/utils/request.js)。 它封裝了全局`request攔截器`、`response攔截器`、`統一的錯誤處理`、`統一做了超時處理`、`baseURL設置等`。
## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/server.html#%E4%B8%80%E4%B8%AA%E8%AF%B7%E6%B1%82%E6%96%87%E7%AB%A0%E5%88%97%E8%A1%A8%E9%A1%B5%E7%9A%84%E4%BE%8B%E5%AD%90%EF%BC%9A)一個請求文章列表頁的例子：
~~~
// api/article.js
import request from '../utils/request';
export function fetchList(query) {
return request({
url: '/article/list',
method: 'get',
params: query
})
}
// views/example/list
import { fetchList } from '@/api/article'
export default {
data() {
list: null,
listLoading: true
},
methods: {
fetchData() {
this.listLoading = true
fetchList().then(response => {
this.list = response.data.items
this.listLoading = false
})
}
}
}
~~~
## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/server.html#%E8%AE%BE%E7%BD%AE%E5%A4%9A%E4%B8%AA-baseurl)設置多個 baseURL
我們可以通過[環境變量](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/deploy.html#%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F)設置多個`baseURL`，從而請求不同的 api 地址。
~~~
# .env.development
VUE_APP_BASE_API = '/dev-api' #注入本地 api 的根路徑
VUE_APP_BASE_API2 = '/dev-api2' #注入本地 api 的根路徑
~~~
之后根據環境變量創建`axios`實例，讓它具有不同的`baseURL`。[@/utils/request.js](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/utils/request.js)
~~~
// create an axios instance
const service = axios.create({
baseURL: process.env.BASE_API, // api 的 base_url
timeout: 5000 // request timeout
})
const service2 = axios.create({
baseURL: process.env.BASE_API2, // api 的 base_url
timeout: 5000 // request timeout
})
~~~
或者
~~~
export function fetchList(query) {
return request({
url: '/article/list',
method: 'get',
params: query,
baseURL: 'xxxx' // 直接通過覆蓋的方式
})
}
~~~
## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/server.html#%E4%BB%8E-mock-%E7%9B%B4%E6%8E%A5%E5%88%87%E6%8D%A2%E5%88%B0%E6%9C%8D%E5%8A%A1%E7%AB%AF%E8%AF%B7%E6%B1%82)從 mock 直接切換到服務端請求
見[Mock 和聯調](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/mock-api.html)
