安装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.paramslet 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.dataconsole.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.paramslet 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.dataconsole.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