# 和服务端进行交互
## [#](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；
从上面的流程可以看出，为了方便管理维护，统一的请求处理都放在`@/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
其中，`@/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' #注入本地 api2 的根路径
~~~
之后根据环境变量创建`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, // api2 的 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)
[在 GitHub 上编辑此页](https://github.com/PanJiaChen/vue-element-admin-site/edit/master/docs/zh/guide/essentials/server.md)
