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

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

因为此项目使用的是webpack，以下的操作都是在webpack下进行的（webpack的安装和使用就略过了）

首先我们需要项目的文件夹下使用npm安装axios

npm install axios

接着在main.js中引入axios，并绑定在vue实例的原型上

main.js

import Vue from 'vue'

import axios from 'axios'

Vue.prototype.$axios = axios

接着在项目中我们就可以直接使用了

扫描二维码关注公众号，回复： 4492999 查看本文章

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('请求错误')    //弹出请求错误
  })

温馨小提示：在和后端跨域代理的时候，如果get请求是可以的，post请求却一直报403(拒绝访问)，有可能是后端设置了双重代理导致的。

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

猜你喜欢