Axios,vue官方推荐的Ajax插件。
安装
//使用npm下载
sudo cnpm install axios --save
配置
导入
在main.js中进行配置。
//导入
import axios from 'axios';
//挂载到原形上,设置为全局变量,可通过this.axios调用。
Vue.prototype.axios = axios
//或者如下配置,通过this.$http调用。
//加$,为了与我们定义的数据、方法、计算属性名称产生冲突
Vue.prototype.$http = axios
使用 import axios from 'axios';
,导入axios。from后边的名为axios,以package.json文件中的为准。
拦截器
请求拦截器、响应拦截器,在Ajax发送之前与接收到响应之后进行一些处理,可使用拦截器。使用方法,见下边的案例。
发起Ajax请求
注意,get、delete请求使用params设置参数。post、put、patch请求使用data设置参数。
//在vue文件中使用:
//设置全局URL
this.axios.defaults.baseURL = 'http://qsdbl.site:8080/myinterface';
// 发送 POST 请求
this.axios({//建议axios接收的参数只添加一个config对象即可(清晰明了),包含method、url、responseType等等属性,还可添加自定义属性例如下边的isShowProgress
method: 'post',
//设置了全局URL,会拼接到此url前边,故可只写后边的url即可。若此处写完全url(即带上http://前缀的完全地址)则全局URL不会拼接在前边
url: '/user/12345',
//默认的响应数据类型为json,此处可不写json。其值可以是 "arraybuffer", "blob", "document", "json", "text", "stream"等。
responseType:'json',
data: {
//请求携带的数据
firstName: 'Fred',
lastName: 'Flintstone'
},
isShowProgress: false//自定义config属性
}).then(()=>{
//ajax请求正常响应的回调
}).catch(()=>{
//ajax请求异常的回调
});
//注意:get请求携带数据使用params,post请求携带数据使用data
更多笔记,见菜鸟教程。
案例
某项目中axios的配置如下(main.js文件):
- 设置全局URL。
- 使用请求拦截器,将登录成功后获得的token添加到HTTP请求的header中的Authorization字段(自定义的字段)。
- 使用请求拦截器,启用进度条插件(NProgress)。
- 使用响应拦截器,关闭进度条插件。
- 使用响应拦截器,检查token是否已失效(根据后台返回的,位于header中的code字段。自定义的字段)。
- 将axios挂载到VUE原形上,后续通过$http调用axios发起Ajax请求。
- 注意:要使用elementui的弹窗组件(响应拦截器中有使用到),需要保证下边的配置在elementui的import之后。
//Ajax请求
import axios from 'axios';
//axios全局配置
// axios.defaults.withCredentials = true; //跨域请求是否提供凭据信息(cookie、HTTP认证及客户端SSL证明等)也可以简单的理解为,当前请求为跨域类型时是否在请求中协带cookie。
axios.defaults.baseURL = 'http://localhost:8090/cashier_system/v1'; //设置全局URL
// axios.defaults.headers.post['Content-Type'] = 'application/json';
// axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
// 在request(请求)拦截器中, 添加请求头信息Authorization(自定义的,用于后端鉴权)
// 请求在到达服务器之前,先会调用use中的这个回调函数
axios.interceptors.request.use(config => {
NProgress.start(); //进度条
if (window.sessionStorage.getItem("token") != null) {
config.headers.Authorization = window.sessionStorage.getItem('token'); // 为请求头对象,添加Authorization字段
}
return config; //在最后必须 return config
})
// response(响应)拦截器中, 隐藏进度条NProgress.done()
axios.interceptors.response.use(config => {
NProgress.done();
if (config.headers.code == "401") {
//判断当前页是否有el-message标签,如果没有则执行弹窗操作
if (document.getElementsByClassName('el-message').length === 0) {
elementui.MessageBox({ //组件在前边导入为“elementui”
title: '提示',
message: "您的登录状态已失效, 请重新登录!"
}).then(() => {
window.sessionStorage.clear();
router.push("/login");
})
}
}
return config;
})
//挂载到原形上,设置为全局变量,可通过this.$http调用。
//加$,为了与我们定义的数据、方法、计算属性名称产生冲突
Vue.prototype.$http = axios
扩展
给NProgress动画增加条件判断,控制是否显示。
//拦截器中添加如下判断,默认在发起请求时显示进度条
//1.默认开启
//请求拦截
if (config.isShowProgress || config.isShowProgress === undefined) {
NProgress.start(); //进度条
}
//响应拦截
if (config.isShowProgress || config.isShowProgress === undefined) {
NProgress.done();
}
//2.默认不开启
//请求拦截
if (config.isShowProgress) {
NProgress.start(); //进度条
}
//响应拦截
NProgress.done();
//当不需要显示进度条时,请求的config对象中添加isShowProgress属性即可(isShowProgress = false)
this.$http({
method: 'get',
url: `/accounts/icon`,
responseType: 'text',
params: {
username: this.loginForm.username
},
isShowProgress: false,//不显示progress动画(默认开启)
//isShowProgress: true//不显示progress动画(默认不开启)
})
.then(respon => {
...
})
.catch(err => {
...
});