前后端分离后，它们之间主要的沟通方式是ajax请求响应。vue官方的vue-resource，和axios都可以实现。这里讲讲使用axios来实现ajax请求。

安装axios

npm i axios -S

开始使用

建立文件夹src/request/，所有ajax请求都在这里进行。

相关文件

首先创建iaxios.js文件实例化axios

import axios from 'axios'
import utils from './utils'

const transformRequest = data => {
  if (utils.isFormData(data) ||
    utils.isArrayBuffer(data) ||
    utils.isBuffer(data) ||
    utils.isStream(data) ||
    utils.isFile(data) ||
    utils.isBlob(data) ||
    utils.isArrayBufferView(data) ||
    utils.isURLSearchParams(data)
  ) {
    return data
  }
  if (utils.isObject(data)) {
    for (var pkey in data) {
      if (data[pkey] === null || typeof (data[pkey]) === 'undefined') {
        delete data[pkey]
      }
    }
    data = utils.params(data)
    return data
  }
  return data
}

axios.defaults.transformRequest.unshift(transformRequest)

const instance = axios.create({
  baseURL: process.env.VUE_APP_SERVER_PATH || location.protocol + '//' + location.host
})

instance.interceptors.request.use(config => {
  // 可以在这里加入ajax请求前处理的业务，如加入access_token
  return config
})

instance.interceptors.response.use(response => {
  return response.data
}, error => {
  let response = error.response
  return Promise.reject(response.data)
})

export default instance

这里有个函数transformRequest ，功能是把Object的参数转换成String参数。这里考虑的是java作为服务端的时候，Object的参数不能正确接收。如果服务端支持Json参数。则不需要这个转换器。

axios.defaults.transformRequest.unshift(transformRequest)

这行代码是向axios插入转换器。
创建axios实例instance。下面是配置两个实例的拦截器，像请求加入token，或者对所有的请求统一做一些处理，或者对响应的结果做一些处理等就可以在这里处理。
最后export实例。

工具

在上面引入了utils.js文件，这里实现了一些工具，主要参考了vue-resource源码中的参数转换的实现。vue-resource已经考虑了向类似java服务器的传参问题。下面是utils.js的代码：

import _ from 'lodash'

var isBuffer = _.isBuffer

/* global toString:true */

// utils is a library of generic helper functions non-specific to axios

var toString = Object.prototype.toString

/**
 * Determine if a value is an ArrayBuffer
 *
 * @param {Object} val The value to test
 * @returns {boolean} True if value is an ArrayBuffer, otherwise false
 */
function isArrayBuffer (val) {
  return toString.call(val) === '[object ArrayBuffer]'
}

/**
 * Determine if a value is a FormData
 *
 * @param {Object} val The value to test
 * @returns {boolean} True if value is an FormData, otherwise false
 */
function isFormData (val) {
  return (typeof FormData !== 'undefined') && (val instanceof FormData)
}

/**
 * Determine if a value is a view on an ArrayBuffer
 *
 * @param {Object} val The value to test
 * @returns {boolean} True if value is a view on an ArrayBuffer, otherwise false
 */
function isArrayBufferView (val) {
  var result
  if ((typeof ArrayBuffer !== 'undefined') && (ArrayBuffer.isView)) {
    result = ArrayBuffer.isView(val)
  } else {
    result = (val) && (val.buffer) && (val.buffer instanceof ArrayBuffer)
  }
  return result
}

/**
 * Determine if a value is an Object
 *
 * @param {Object} val The value to test
 * @returns {boolean} True if value is an Object, otherwise false
 */
function isObject (val) {
  return val !== null && typeof val === 'object'
}

/**
 * Determine if a value is a File
 *
 * @param {Object} val The value to test
 * @returns {boolean} True if value is a File, otherwise false
 */
function isFile (val) {
  return toString.call(val) === '[object File]'
}

/**
 * Determine if a value is a Blob
 *
 * @param {Object} val The value to test
 * @returns {boolean} True if value is a Blob, otherwise false
 */
function isBlob (val) {
  return toString.call(val) === '[object Blob]'
}

/**
 * Determine if a value is a Function
 *
 * @param {Object} val The value to test
 * @returns {boolean} True if value is a Function, otherwise false
 */
function isFunction (val) {
  return toString.call(val) === '[object Function]'
}

/**
 * Determine if a value is a Stream
 *
 * @param {Object} val The value to test
 * @returns {boolean} True if value is a Stream, otherwise false
 */
function isStream (val) {
  return isObject(val) && isFunction(val.pipe)
}

/**
 * Determine if a value is a URLSearchParams object
 *
 * @param {Object} val The value to test
 * @returns {boolean} True if value is a URLSearchParams object, otherwise false
 */
function isURLSearchParams (val) {
  return typeof URLSearchParams !== 'undefined' && val instanceof URLSearchParams
}

/**
 * Encodes a Url parameter string.
 *
 * @param {Object} obj
 */
function params (obj) {
  let params = []
  let escape = encodeURIComponent
  params.add = function (key, value) {
    if (_.isFunction(value)) {
      value = value()
    }
    if (value === null) {
      value = ''
    }
    this.push(escape(key) + '=' + escape(value))
  }
  serialize(params, obj)
  return params.join('&').replace(/%20/g, '+')
}

function serialize (params, obj, scope) {
  let array = _.isArray(obj)
  let plain = _.isPlainObject(obj)
  let hash = null
  _.forEach(obj, (value, key) => {
    hash = _.isObject(value) || _.isArray(value)
    if (scope) {
      key = scope + '[' + (plain || hash ? key : '') + ']'
    }
    if (!scope && array) {
      params.add(value.name, value.value)
    } else if (hash) {
      serialize(params, value, key)
    } else {
      params.add(key, value)
    }
  })
}

export default {
  isArrayBuffer: isArrayBuffer,
  isBuffer: isBuffer,
  isFormData: isFormData,
  isArrayBufferView: isArrayBufferView,
  isObject: isObject,
  isFile: isFile,
  isBlob: isBlob,
  isStream: isStream,
  isURLSearchParams: isURLSearchParams,
  params: params
}

基础实现

base.js，导出基本的ajax请求函数，这里只导出了get和post。更多的同理导出即可。在所有ajax请求时，都调用这里的函数完成。代码如下：

import _ from 'lodash'
import iaxios from './iaxios'

const defaultPagination = {
  current: 1,
  size: 10
}

const paginationBody = (body, pagination) => {
  let _body = _.cloneDeep(body || {})
  pagination = _.defaultsDeep(pagination, defaultPagination)
  let _pag = {
    sort: pagination.sort || null,
    order: pagination.order || null,
    pageOffset: pagination.pageOffset || pagination.current || 1,
    pageSize: pagination.pageSize || pagination.size || 10
  }
  return _.defaultsDeep(_body, _pag)
}

export default {
  defaultPagination,
  paginationBody,
  get (url, options) {
    return iaxios.get(url, options)
  },
  post (url, body, options) {
    return iaxios.post(url, body, options)
  }
}

说明：paginationBody用于把数据分页参数与筛选参数合并起来。分页参数根据服务端的命名进行修改。如下面的一段请求：

import Service from '../base'

export default {
  find (pagination, options) {
    return Service.post('/userapi/user/user/find', Service.paginationBody(options, pagination))
  }
}

在页面组件中，把分页和筛选的参数分开来记录，使用vuex时，也可以分开维护状态。请求时合并成一个对象。

使用示例

如上面的find接口在页面中的使用如下。

<script>
import _ from 'lodash'
import UserService from '@/request/user/user'
export default {
  name: 'AdminUserUser',
  data () {
    return {
      options: {
        name: null
      },
      pagination: {
        sort: null,
        order: null,
        size: 10,
        total: 0,
        current: 1,
        layout: 'total, sizes, prev, pager, next, jumper',
        sizes: [10, 20, 30, 40, 50, 100]
      },
      users: []
    }
  },
  methods: {
    listUser () {
      UserService.find(this.pagination, this.options).then(res => {
        this.users = _.clone(res.result || [])
      })
    }
  }
}
</script>