在vue-cli中使用axios请求 get与post

最近赶项目，没什么时间，目前抽出时间更新一下博客，在网上看到很多博客都是复制的，并不能解决问题，现在自己总结归纳了一些东西，在此做整理

因为此项目使用的是的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（拒绝访问），有可能是后端设置了双重代理导致的。