axios在vue框架中的get请求和post请求_vue中使用axiosget请求与post请求

axios在vue框架中的get请求和post请求

1、首先用脚手架搭建一个项目
2、使用npm下载包npm install axios
（以上两个步骤不清楚可以看我前面的文章）
3、在components文件夹中新建文件

4、注意要引用axios

import axios from 'axios'
1

5、以下是代码（get的url地址是后台提供的接口）
axios get无参请求

<template>
  <div class="aget">
    <h1>这里是axios的get请求</h1>
    <button @click='getdata'>get方式的无参请求</button>
  </div>
</template>

<script>
//引入axios
import axios from 'axios'
export default {
  methods: {
    getdata () {
      // 这里是url地址是后台提供的接口
      axios.get('http://127.0.0.1:4444/api/v1/index/search')
      //  请求成功之后的回调函数
        .then((res) => {
          console.log(res)
        })
      // 请求失败之后的回调函数
        .catch((err) => {
          console.log(err)
        })
    }
  }
}
</script>

<style>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

6、要在main.js修改开启文件

import Vue from 'vue'
// import App from './App.vue'
import App from './components/01-axios发起get请求.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

1
2
3
4
5
6
7
8
9
10

7、npm run serve打开浏览器即可查看控制台已经get到数据

axios get有参请求
传递参数的时候，params名称固定，它的值是一个对象，对象中就是你本次请求所需要传递的参数

params: {
          articleId: 8
        }
1
2
3

<template>
  <div class="aget">
    <h1>这里是axios的get请求</h1>
    <button @click='getdata'>get方式的无参请求</button>
    <button @click='getdata2'>get方式的带参请求</button>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  methods: {
    getdata () {
      // 这里是url地址是后台提供的接口
      axios.get('http://localhost:5000/api/v1/index/search')
      //  请求成功之后的回调函数
        .then((res) => {
          console.log(res)
        })
      // 请求失败之后的回调函数
        .catch((err) => {
          console.log(err)
        })
    },
    getdata2 () {
      axios.get('http://127.0.0.1:5000/api/v1/index/get_comment', {
        params: {
          articleId: 8
        }
      })
        .then((res) => {
          console.log(res)
        })
        .catch((err) => {
          console.log(err)
        })
    }
  }
}
</script>

<style>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

axios post请求

<template>
  <div class="post">
    <h1>这个文件主要用于演示如何使用axios发起post方式的请求</h1>分类名称：
    <input type="text" v-model="cate.author" />
    <br />分类别名：
    <input type="text" v-model="cate.content" />
    <br />
    <button @click='addCate'>添加分类</button>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      cate: {
        // 这里要和你数据库的命名一致
        author: '',
        content: ''
      }
    }
  },
  methods: {
    addCate () {
      // 这里是url地址是后台提供的接口
      axios.post('http://127.0.0.1:5000/api/v1/index/post_comment', this.cate)
      //  请求成功之后的回调函数
        .then((res) => {
          console.log(res)
        })
      // 请求失败之后的回调函数
        .catch((err) => {
          console.log(err)
        })
    }

  }
}

</script>

<style>
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45