在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(拒绝访问),有可能是后端设置了双重代理导致的。

展开阅读全文

没有更多推荐了,返回首页