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

main.js中引用：

import './api'

簡書中比較詳細axios使用
https://www.jianshu.com/p/df464b26ae58