vue使用axios的五种请求方式及解决跨域问题

说明

在此使用是的vue-cli2

 npm install axios --save

在main.js中引入

import VueAxios from "vue-axios";

Vue.prototype.$axios = axios;

沿用上一次网络请求接口

接口文档

说明	请求方式	请求参数	请求地址
GET 方式，无参数	GET	无	/user/getUser
GET方式，Int参数	GET	Int(id)	/user/getParamUser
Post方式，无参数	POST	无	/user/postNoParamUser
Post方式，有参数	POST	Int(id)	/user/postParamUser
Post方式，Json化参数	POST	Object(id，name，sex，studentId，sex，data)	/user/postObjectParamUser

解决跨域问题

在项目的config目录下的index.js文件下配置，（在vue-cli3中需要手动新建vue.config.js文件进行配置）

在proxyTable属性中添加跨域对象，target为要跨域的目标对象地址,changeOrigin设置为true为表示跨域，pathRewrite则为路径简写，之后根路径的重复路径直接用/api代替就可。

布局

<template>
  <button @click="sendRequset">发送请求</button>
</template>

<script>

export default {
  name: "TestAxios",
  methods: {
    /**
     * 发送测试请求
     */
    sendRequset() {
    	
    }
  }
}
</script>

<style scoped>

</style>

发送Get请求

参照上次接口

无参GET请求

在sendRequset方法中写入请求，因为在配置跨域时配置了请求路径的简写，所以直接简写为/api即可

sendRequset() {
      this.$axios.get("/api/user/getUser").then(e => {
        console.log(e)
      })
  }

打印结果正确

有参GET请求

sendRequset() {
      //有参GET请求还可直接拼接到url后面
      this.$axios.get("/api/user/getParamUser",{
        params:{
          id:15
        }
      }).then(e => {
        console.log(e)
      })
    }

发送POST请求

因为在配置跨域时配置了请求路径的简写，所以直接简写为/api即可

发送无参POST请求

sendRequset() {
      this.$axios.post("/api/user/postNoParamUser").then( e => {
        console.log(e)
      })
    }

发送有参的表单数据

sendRequset() {
      let param = new FormData();
      param.append("id", 14);
      this.$axios.post("/api/user/postParamUser", param)
          .then(e => {
          console.log(e);
        })
    }

发送JSON化POST请求

sendRequset() {
      axios.defaults.headers.post['Content-Type'] = 'application/json;charset=utf-8';
      this.$axios.post("/api/user/postObjectParamUser", {
        id:1,
        name:"顺子",
        data:666,
        studentId:123123,
        sex:"萌新"
      }).then(e => {
          console.log(e);
        })
    }