axios使用

axios和vue-resource一样，是一个vue中操作http的插件，遵循promise，vue官方也推荐使用axios。

安装axios

npm i axios -S

axios也是在运行时需要的，所以要保存在dependencies中。

引入axios

import axios from 'axios'
Vue.prototype.$http = axios

GET、POST示例

<template>
  <div>
    <router-link to="/news" tag="div">跳转到新闻页</router-link>
    <router-link to="/video">跳转到视频页</router-link>
    <router-view/>

    <div @click="dataGet">GET</div>
    <div @click="dataPost">POST</div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      addr: '/data.json'
    }
  },
  methods: {
    dataGet () {
      console.info('get')
      this.$http.get(this.addr, {
        params: {
          id: '1'
        },
        headers: {
          token: 'token'
        }
      }).then(res => {
        console.info(res.data)
      }).catch(err => {
        console.info(err)
      })
    },
    dataPost () {
      console.info('post')
      this.$http.post(this.addr, {
        id: '1'
      }, {
        headers: {
          token: 'token'
        }
      }).then(res => {
        console.info(res.data)
      }).catch(err => {
        console.info(err)
      })
    }
  }
}
</script>

axios还有并发多个请求（vue-resource不支持）、拦截器、配置型请求（类似jquery的ajax方法），不列了，一搜一大片，实际使用过程中再慢慢补充吧。

全局设置与拦截器

全局设置
axios实例中的defaults对象下可以全局设置该实例的参数，所有该实例的请求将使用此参数。
常用的三个：

// 基础地址，调用时会在每个请求前拼上这个地址
axios.defaults.baseURL = API.protocols + API.host + '/' + API.alias + '/' + API.version
// 超时时间
axios.defaults.timeout = API.timeout
// Content-Type设为表单
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'

拦截器
axios中的拦截器可以全局拦截所有实例下的请求与响应，在请求发出前与响应到达本地但返回给promise前可以做一系列公共的操作，比如给请求参数统一加一个token，可以用拦截器做。
下面例子是给请求加一系列参数，那么每个请求只关注自己要传的业务参数就行，公共参数就不需要单独写了。

// 请求全局处理
axios.interceptors.request.use(function (config) {
  const isExamine = apiUtil.isExamine()
  if (config.method.toLowerCase() === 'get') {
    // get方法
    // 获取get参数
    let params = config.params

    let appid = ''
    if (params.appid) {
      appid = params.appid
    }

    let page = ''
    if (params.page) {
      page = params.page
    }

    let step = ''
    if (params.step) {
      step = params.step
    }

    // 实例化公共参数
    let commonParam = new apiUtil.ApiCommonParam(appid, page, step)

    // 重置参数
    config.params = {
      ...commonParam,
      ...params
    }

    // 测试期参数
    if (isExamine && isExamine === 'true') {
      config.params.isExamine = 'true'
    }
  } else if (config.method.toLowerCase() === 'post') {
    // post方法
    // 获取post消息体
    let data = config.data
    console.info(data)
    let appid = ''
    if (data.appid) {
      appid = data.appid
    }

    let page = ''
    if (data.page) {
      page = data.page
    }

    let step = ''
    if (data.step) {
      step = data.step
    }

    // 重置参数
    let commonParam = new apiUtil.ApiCommonParam(appid, page, step)
    let requestData = {
      ...commonParam,
      ...data
    }

    // 测试期参数
    if (isExamine && isExamine === 'true') {
      requestData.isExamine = 'true'
    }
    // post默认使用payload方式提交数据，会造成参数无法从request中解析，需要把Content-Type设置为form之后，再用qs库转换一下
    config.data = qs.stringify(requestData)
  }
  return config
}, function (error) {
  return Promise.reject(error)
})

全局处理响应：

// 全局响应
axios.interceptors.response.use(function (response) {
  return response
}, function (error) {
  return Promise.reject(error)
})

完整的全局设置与拦截器的代码示例
api/index.js

import Vue from 'vue'
import axios from 'axios'
import qs from 'qs'
import {API} from '@/common/properties'
import * as apiUtil from '@/common/script/apiUtil'

Vue.prototype.$http = axios

// 基础地址，调用时会在每个请求前拼上这个地址
axios.defaults.baseURL = API.protocols + API.host + '/' + API.alias + '/' + API.version
// 超时时间
axios.defaults.timeout = API.timeout
// Content-Type设为表单,跨域时POST请求变为OPTIONS通过此项设置可解决
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'

// 请求全局处理
axios.interceptors.request.use(function (config) {
  const isExamine = apiUtil.isExamine()
  if (config.method.toLowerCase() === 'get') {
    // get方法
    // 获取get参数
    let params = config.params

    let appid = ''
    if (params.appid) {
      appid = params.appid
    }

    let page = ''
    if (params.page) {
      page = params.page
    }

    let step = ''
    if (params.step) {
      step = params.step
    }

    // 实例化公共参数
    let commonParam = new apiUtil.ApiCommonParam(appid, page, step)

    // 重置参数
    config.params = {
      ...commonParam,
      ...params
    }

    // 测试期参数
    if (isExamine && isExamine === 'true') {
      config.params.isExamine = 'true'
    }
  } else if (config.method.toLowerCase() === 'post') {
    // post方法
    // 获取post消息体
    let data = config.data
    console.info(data)
    let appid = ''
    if (data.appid) {
      appid = data.appid
    }

    let page = ''
    if (data.page) {
      page = data.page
    }

    let step = ''
    if (data.step) {
      step = data.step
    }

    // 重置参数
    let commonParam = new apiUtil.ApiCommonParam(appid, page, step)
    let requestData = {
      ...commonParam,
      ...data
    }

    // 测试期参数
    if (isExamine && isExamine === 'true') {
      requestData.isExamine = 'true'
    }
    // post默认使用payload方式提交数据，会造成参数无法从request中解析，需要把Content-Type设置为form之后，再用qs库转换一下
    config.data = qs.stringify(requestData)
  }
  return config
}, function (error) {
  return Promise.reject(error)
})

// 全局响应
axios.interceptors.response.use(function (response) {
  return response
}, function (error) {
  return Promise.reject(error)
})

export default axios

main.js中引用：

import './api'

简书中比较详细axios使用
https://www.jianshu.com/p/df464b26ae58