通过mockfast来模拟get和post来介绍下两者的区别

请求参数的位置POST

<template>
  <div class="" />
</template>

<script>
import axios from 'axios'
export default {
  name: '',
  created() {
    this.login()
  },
  methods: {
    login() {
      axios({
        url: 'https://www.fastmock.site/mock/f9834bca1c0604895ec164037a0590c6/api/api',
        method: 'post',
        data: '123'
      }).then(res => {
        console.log(res)
      })
    }
  }
}
</script>

<style scoped>

</style>

POST参数在data填写。

POST参数在请求体里面

相比于GET在地址栏更加安全

请求参数的位置GET

<template>
  <div class="" />
</template>

<script>
import axios from 'axios'
export default {
  name: '',
  created() {
    this.login()
  },
  methods: {
    login() {
      axios({
        url: 'https://www.fastmock.site/mock/f9834bca1c0604895ec164037a0590c6/api/test',
        data: 123
      }).then(res => {
        console.log(res)
      })
    }
  }
}
</script>

<style scoped>

</style>

<template>
  <div class="" />
</template>

<script>
import axios from 'axios'
export default {
  name: '',
  created() {
    this.login()
  },
  methods: {
    login() {
      axios({
        url: 'https://www.fastmock.site/mock/f9834bca1c0604895ec164037a0590c6/api/test',
        params: 123
      }).then(res => {
        console.log(res)
      })
    }
  }
}
</script>

<style scoped>

</style>

 Get用params传递参数,拼接在URL参数。