我的vuex+axios请求数据的分层

图示流程

先上我的流程图

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...
})