Ajax要么就原生的JS写,要么就用Jquery的封装来写。要用封装,就必须要导入jquery.js。
Vue提倡:去Jquery化
Axios是新的与后端进行异步交互的方法,但是Axios不属于Vue,它是属于Vue的周边产品,使用时需要引入axios.js
npm i axios
http://www.axios-js.com/zh-cn/docs/#axios-request-config-1
axios.get("http://ip:port/project?key=value").then(function (response){
//response.data获取响应回来的数据
alert(response.data);
}).catch(function (e){
//e为异常
alert(e);
});
new Vue({
el:"div",
data:{
users:null,
},
created(){
//此处的then()里面函数必须使用lambda表达式,不然无法获取this.users
axios.get("http://172.16.2.67:8080/findAllUser.do?pageNum=1").then(response => {
this.users = response.data.list;
}).catch(function (e){
alert(e);
});
}
})
axios.post("http://ip:port/project","key=value").then(function (response){
//response.data获取响应回来的数据
alert(response.data);
}).catch(function (e){
//e为异常
alert(e);
});
new Vue({
el:"div",
data:{
users:null,
},
methods:{
},
created(){
//此处的then()里面函数必须使用lambda表达式,不然无法获取this.users
axios.post("http://172.16.2.67:8080/findAllUser.do","pageNum=1").then(response => {
this.users = response.data.list;
}).catch(function (e){
alert(e);
})
}
})
method1(){
return axios.get("http://ip:port/project?key=value");
},
method2(){
return axios.get("http://ip:port/project?key=value");
}
axios.all([this.method1(),this.method2()]).then(axios.spread(function (response1,response2){
alert(response1.data);
alert(response2.data);
}))
new Vue({
el:"div",
data:{
users:null,
byid:null,
},
methods:{
findAll(){
return axios.get("http://172.16.2.67:8080/findAllUser.do?pageNum=1");
},
findByid(){
return axios.get("http://172.16.2.67:8080/findByUid.do?uid=1");
}
},
created(){
//此处的axios.spread()里面函数必须使用lambda表达式,不然无法获取this.users
axios.all([this.findAll(),this.findByid()]).then(axios.spread((response1,response2) => {
this.users = response1.data.list;
this.byid = response2.data;
}))
}
})
<div id="app">
<input id="inputElement" name="file" type="file" accept="image/png, image/gif, image/jpeg" />
<button @click="upload">上传</button>
</div>
<script>
new Vue({
el:"#app",
data() {
return {
file: null
};
},
methods: {
upload() {
let inputElement = document.getElementById("inputElement");
//获取input-file中的file对象,只上传一个文件,索引就是0
let file = inputElement.files[0];
// 创建一个form对象
let param = new FormData();
// 通过append向form对象添加数据
param.append("file", file);
// 添加form表单中其他字段数据
param.append("key", "value");
// FormData私有类对象,访问不到,可以通过get判断值是否传进去
console.log(param.get("file"));
//配置多段请求,设置上传头
let config = {
headers: { "Content-Type": "multipart/form-data" }
};
axios.post("http://192.168.31.253:8080/upload", param, config);
}
}
});
</script>
1、添加axios到项目中
cnpm install axios
2、在主配置文件main.js中引入axios
import axios from 'axios'
3、在Vue原型中挂载axios(全局都可以使用)
Vue.prototype.$axios = axios
4、在其他位置使用axios
this.$axios.post().then
日常业务中我们通常会对axios进行封装来使用,这么做的好处是:我们可以在每次请求前对请求做处理还可以对错误进行统一处理,从而避免每次发请求都要做重复的工作。比如:我们每次发送请求前都需要对请求的url做处理,就可以用到axios请求拦截;对后端返回的错误或网络错误通过响应拦截进行统一处理等等。
filter.js,用于对Axios的请求和响应进行拦截,并对Axios进行配置
import Axios from 'axios';
let baseURL = '';
if (process.env.NODE_ENV == 'development') {
baseURL = '/';
} else if (process.env.NODE_ENV == 'production') {
baseURL = '/';
}
let _axios = Axios.create({
withCredentials: true, // 当前请求为跨域类型时是否在请求中协带cookie
baseURL,
timeout: 30000, // 设置超时时间
});
_axios.interceptors.request.use(
config => {
// 此处进行请求拦截
return config;
},
err => {
return Promise.reject(err);
}
);
_axios.interceptors.response.use(
resp => {
// 此处进行响应拦截
return resp
},
err => {
if (err && err.response) {
// 此处对err.response.status响应码进行判断
}
return Promise.resolve(err.response)
}
);
export default _axios;
api.js,对各种请求方法进行封装
import axios from '@/api/filter.js';
// 封装get方法
export function get(url,params={}){
return new Promise((resolve,reject) => {
axios.get(url,{
params:params
}).then(response => {
resolve(response.data);
}).catch(err => {
reject(err)
})
})
}
//封装get路径传参方法
export function getUrl(url,params={}){
return new Promise((resolve,reject) => {
axios.get(url+params).then(response => {
resolve(response.data);
}).catch(err => {
reject(err)
})
})
}
// 封装post请求
export function post(url, params ,way=0) {
return new Promise((resolve, reject) => {
axios.post(url,params,{
headers: {
'Content-Type':way == 0 ? 'application/json;charset=UTF-8' : 'application/x-www-form-urlencoded;charset=UTF-8'
}
}).then(res => {
resolve(res.data)
}).catch(err => {
reject(err)
})
})
}
// 封装post请求文件下载
export function postDownLoad(url, params,type=1) {
return new Promise((resolve, reject) => {
axios.post(url,params,{responseType: type == 0?'blob':'arraybuffer'},{
headers: {
'Content-Type':'application/json;charset=UTF-8'
}
}).then(res => {
resolve(res)
}).catch(err => {
reject(err)
})
})
}
// 封装post请求文件上传
export function postUpload(url, params) {
return new Promise((resolve, reject) => {
axios.post(url,params,{
headers: {
'Content-Type':'multipart/form-data;charset=utf-8'
}
}).then(res => {
resolve(res.data)
}).catch(err => {
reject(err)
})
})
}