一.了解vue axios，vue-resource?
axios与vue-resource类似于 jQuery的$ajax, 用来处理请求与响应。
vue2.0之后，就不再对vue-resource更新，而是推荐使用axios，这里不过多介绍，感兴趣的可以去 https://github.com/pagekit/vue-resource
axios是基于Promise 用于浏览器和node.js的http客户端, axios主要是用于向后台发起请求的，还有在请求中做更多是可控功能。
二.安装和简单使用axios
npm install -save axios vue-axios
在入口文件main.js下引用，然后挂在原型下 。ps: axios不是插件，所以不能通过Vue.use() 进行注册
import Vue from 'vue'
Vue.prototype.$_axios = axios
// 组件中使用
this.$_axios.get(url).then((res) => {})
vue-axios 是按照vue插件的方式去写的，是为了符合规范，方便协作。
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
// 组件使用
this.$http.get()
this.axios.get()
三.axios封装使用
为什么要对axios进行封装？
axios 的定位是 HTTP 工具库，在设计上是作为前后端数据交互的接口层。是和业务无关的，不应该使用 this 和组件关联。应该抽象 API 层出来，在 API 层里面使用，
在具体页面只需要调用接口函数以及传入params即可。
做法.新建一个axios文件,在里面新建axios.js 和api.js。axios.js文件用来封装我们的axios，api.js用来统一管理我们的接口。
axios.js
import axios from 'axios'
import qs from 'qs' // 序列化post
// 创建实列， 创建不同实列处理(如果有多个请求地址，并且它们的请求和响应不同)
const instance = axios.create({
baseURL: '/api', // 自动加在 url之前
timeout: 1000, // 超时请求时间
headers: {'X-Requested-With': 'XMLHttpRequest'} // 自定义请求头部
})
instance.defaults.timeout = 2000 // 优先级高于实列初始值
// requets拦截(在请求响应then,或者catch前拦截它们) 根据返回情况统一弹出信息处理
instance.interceptors.request.use((config) => {
config.data = JSON.stringify(config.data)
config.headers = {
'Content-Type': 'application/x-www-form-urlencoded'
}
return config
}, (error) => {
return Promise.reject(error)
})
// response拦截
instance.interceptors.response.use((response) => {
// 成功处理, example: 返回信息添加msg
if (response.status === 200) {
response.msg = '请求成功'
}
return response
}, (error) => {
// 失败处理 example: 页面404
if(error.response.status === 404) {
console.log('页面404')
}
return Promise.reject(error)
})
/**
* 封装get方法
*/
export function get(url, params = {}) {
return new Promise((resolve, reject) => {
instance.get(url, {
params: params
}).then(res => {
resolve(res.data)
}).catch(err => {
reject(err.data)
})
})
}
/**
* 封装post请求
*/
export function post(url, data = {}) {
return new Promise((resolve, reject) => {
instance.post(url, qs.stringify(data))
.then(response => {
resolve(response.data)
}, err => {
reject(err)
})
})
}
api.js 以及组件里调用
// api 层，统一管理接口调用
import {get, post} from './axios.js'
// 1.组件直接导入 import {getWork} from '@/axios/api'
// 使用 getInfo().then(() => {})
export const getInfo = function(data) {
return get('/api/info', data)
}
// 2.挂载到vue原型上，暴露接口,main.js 引入。
// 全局使用: this.$_axios.getInfo().then()
export default {
install(Vue, options) {
Vue.prototype.$_axios = {
getInfo: function(data) {
return get('/info', data) // 这里的实际请求地址为 /api/info
}
}
}
}
参考文档
中文文档