最近赶项目,没什么时间,目前抽出时间更新一下博客,在网上看到很多博客都是复制的,并不能解决问题,现在自己总结归纳了一些东西,在此做整理
因为此项目使用的是的Webpack,以下的操作都是在的Webpack下进行的(的Webpack的安装和使用就略过了)
首先我们需要项目的文件夹下使用npm安装axios
npm安装axios
接着在main.js中引入axios,并绑定在VUE实例的原型上
main.js
从'vue'导入Vue
从'axios'导入axios
Vue.prototype。$ axios = axios
接着在项目中我们就可以直接使用了
axios请求
this.$axios({
type: 'get', // 通过设置type,来选择是get还是post请求
url: '/api/getaxios', // 访问的后端接口地址
params: { // get请求使用params,post请求使用data(data为json格式)
Num: 33,
}
}).then(res => {
console.log(res) // 请求成功打印res
}).catch(err => {
alert('请求错误') // 请求错误弹出警告
})
还有axios.get和axios.post请求,之前在项目中碰到和后台请求头对不上的情况,在上面这个aixos请求设置的请求头实现不了,折腾了很久,使用axios.post请求设置请求头成功,如果和我有类型情况的人可以尝试一下,代码如下
this.$axios.post('/login', { // 前面声明了post请求,不需要在进行设置
username: this.username, // 默认使用data,如果是axios.get,需要使用parmas:{}将数据包裹
password: this.password
},
{
headers: {'Content-Type': 'application/json'} // 这里可以设置请求头类型
})
.then(res => {
console.log(res) //请求成功打印res
})
.catch(err => {
alert('请求错误') //弹出请求错误
})
温馨小提示:在和后端跨域代理的时候,如果得到请求是可以的,交的请求却一直报403(拒绝访问),有可能是后端设置了双重代理导致的。