好久没写博客了,今天突发奇想,写一篇(虽然没什么逻辑关系..)。
最近做车载后台系统,用到了vue2.0,里面的ajax请求,选用的axios,这个单词我我不知道怎么发音,估计是a ke si ou si吧,类似这样的。
vue官方人员说,2.0后将不再继续维护vue-resource了,并推荐大家使用 axios ,同时为了显得高大上,我就用了axios。
1.同样,需要先安装axios。
npm install axios --save
2.页面引用
安装好了axios,就可以开始用啦。为了方便管理,我新建了一个api.js的文件,专门用来存放API接口,放在了router文件夹。所以,我的文件结构是这样的:
然后在main.js里面引入这个api.js就可以啦。
import './router/api.js'
3.编写API
a.先引入axios
import Vue from 'vue'
import axios from 'axios'
import qs from 'qs'
axios依赖于vue,所以前面两句就不说了。后面这个qs,是axios自带的一个格式化数据工具,后面我们将用它来将请求数据转为json字符串。
b.axios基础配置
axios.defaults.baseURL = 'XXXXXXX' // 设置请求地址,后面的接口都将基于这个基本请求地址
// 设置请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
axios.defaults.headers.put['Content-Type'] = 'application/x-www-form-urlencoded'
axios.defaults.headers.patch['Content-Type'] = 'application/x-www-form-urlencoded'
//如果在发送来自其他域的XMLHttpRequest请求之前,未设置withCredentials 为true,那么就不能为它自己的域设置cookie值。而通过设置withCredentials 为true获得的第三方cookies,将会依旧享受同源策略
//axios 默认不发送cookie,这样设置可以保存登陆成功的token和cid在cookie中
axios.defaults.withCredentials = true
//拦截器,将请求数据在发送前进行拦截,将其转化为json字符串在发送
axios.interceptors.request.use(function (config) {
if (config.method !== 'get') {
config.data = qs.stringify(config.data)
}
return config
})
4.举个栗子
// API接口
const API_LOGIN = 'signIn'
我们在vue的原型链上扩展了一个对象,里面包含各种接口函数
Vue.prototype.$ajax = {
autoService: {
login (params) {
return axios({
method: 'POST',
url: API_LOGIN,
cache: true,
data: params
})
},
}
}
这样使用
methods: {
login () {
let params = {
cid: md5(String(new Date().getTime() + Math.random())),
email: this.email,
password: this.password
}
this.$ajax.autoService
.login(params)
.then((res) => {
// 成功回调
}, (res) => {
// 失败回调
})
},
}
最后,上一个官方文档:axios官网