图示流程
先上我的流程图
vuex+axios数据流.png
目录结构
src目录结构
我是这样做的
axios相关配置
定义全局配置，当然是网上抠的，再稍改一些
src/server/config.js：
import axios from 'axios'
import qs from 'qs'
axios.defaults.timeout = 5000;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
axios.defaults.baseURL = 'http://xxxx.com'; //默认URL，在请求时添加url参数，会在其后面追加
//POST传参序列化
axios.interceptors.request.use((config) => {
if (config.method === 'post') {
config.data = qs.stringify(config.data);
}
return config;
}, (error) => {
return Promise.reject(error);
});
//code状态码200判断
axios.interceptors.response.use((res) => {
/* if (res.data.status != '200') {
return Promise.reject(res); //对Promise理解不深，这段使用的话，我的请求就没法正常显示，就先屏蔽，先忙其他的
}*/
return res;
}, (error) => {
return Promise.reject(error);
})
export default axios
src/server/api.js
api.js计划只作为一个管理接口、接口参数的文件，而且因为axios原本就是返回一个Promise，所以直接return，所有逻辑留待调用它的地方处理
import http from './config'
const goods = {
//获取全部商品
all(page) {
return http({
url: '/yiqiyun-api/goods-list',
method: 'post',
data: {
page
}
}
)
}
}
export default {
goods,
}
直接在*.vue组件中调用请求
请求的话，如果没有通过vuex管理，那么直接可以调用 api.js 文件进行请求
import api from '@/server/api'
api.goods.all(self.page).then(res => {
// code...
})
