和服务端进行交互

前端请求流程

在Mall3s中，一个完整的前端UI交互到服务端处理流程是这样的：

• UI 组件交互操作；

• 调用统一管理的 api service 请求函数；

• 使用封装的 request.js 发送请求；

• 获取服务端返回；

• 更新 data；

从上面的流程可以看出，为了方便管理维护，统一的请求处理都放在 src/api 文件夹中，并且一般按照 model 纬度进行拆分文件，如：

api/
apply/
    order.js
    requestLog.js
    ...
workFlow/
    ...
common.js
message.js
...

request.js

其中 src/utils/request.js 是基于 axios 的封装，便于统一处理 POST，GET 等请求参数，请求头，以及错误

提示信息等。具体可以参看 request.js。 它封装了全局 request拦截器 、 response拦截器 、 统一的错误处

理 、 统一做了超时处理 、 baseURL设置 等。

请求示例

// api/extend/bigData.js
import request from '@/utils/request'
// 获取数据列表（分页）
export function BigDataList(data) {
return request({
    url: '/api/Extend/BigData',
    method: 'get',
    data
    })
}
// views/extend/bigData/index
import { BigDataList } from '@/api/extend/bigData'
export default {
data() {
    keyword: '',
    list: [],
    total: 0,
    listLoading: true,
    listQuery: {
    currentPage: 1,
    pageSize: 20,
    sort: 'desc'
    }
},
methods: {
    initData() {
        this.listLoading = true
        let query = {
        ...this.listQuery,
        keyword: this.keyword
    }
    BigDataList(query).then(res => {
        this.list = res.data.list
        this.total = res.data.pagination.total
        this.listLoading = false
        })
       }
   }
}