get请求：
this.$axios.get("http://www.wwtliu.com/sxtstu/news/juhenews.php",{
params:{//是否添加.get都是使用get方式发送请求,axios的默认方式
type:"junshi",
count:30
}
})
.then(res => {
this.newsData = res.data;
})
.catch(error => {})
post请求：
form-data:?name=iwen&age=20
x-www-form-urlencoded:{name:"iwen",age:20}
注意：axios接受的post请求参数的格式是form-data格式
this.$axios.post("http://www.wwtliu.com/sxtstu/blueberrypai/login.php",
qs.stringify({
user_id:"iwen@qq.com",
password:"iwen123",
verification_code:"crfvw"
}))
.then(res => {})
.catch(error => {})
全局axios默认值
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
全局拦截器
axios.interceptors.request.use(function (config) {
//在发送请求之前的处理
if (config.method == "post") {//处理post请求
config.data = qs.stringify(config.data);
}
return config;
}, function (error) {
//对请求错误处理
return Promise.reject(error);
});
//响应拦截器
axios.interceptors.response.use(function (response) {
//对响应数据处理
return response;
}, function (error) {
//对响应错误处理
return Promise.reject(error);
});
解决跨域问题
//解决跨域问题(与config中index.js一起配置)
//main.js添加代码
Vue.prototype.HOST = '/api'
//index.js文件中在dev:{}中添加
proxyTable: {
"/api": {
target: "http://localhost:8080",
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},
//使用时
var url = this.HOST + "/illness/GetHospitalList";
axios.get(url, {}).then(response => {}).catch(error=>{});
//开发时建议不在前端进行跨域处理,因为在打包合并时需要处理的请求url过多,
//建议使用axios默认配置中的默认url进行配置,打包合并时只需要修改一处即可
//跨域与默认配置不可用时使用,使用跨域时需要注释掉默认配置
vue-resource使用
this.$http.get(url).then(response => {
console.log(response.body);
}).catch(error => {
console.log(error);
})