vue-axios

一、vue-axios请求模块

1、axios模块：是一个基于promise的http客户端请求工具。

（1）、从浏览器中创建XMLHttpRequest：异步请求对象

（2）、支持PromiseAPI：请求的返回值是Promise对象(resolve、reject)

（3）、从node.js创建http请求

（4）、拦截请求和响应

2、axios使用方法

2.1、安装axios

npm  install  axios
1

2.2、无参的get请求：

  axios.get('/url').then((result)=>{
                   }).catch((err)=>{
                   })
1
2
3

服务器端user.js代码段：

var express = require('express');
var router = express.Router();

/* 测试路由 http://localhost:3000/users/test*/
router.get('/test',(req, res) => {

  res.json({
    code:1001,
    msg:'测试信息'
  })
})
module.exports = router;

1
2
3
4
5
6
7
8
9
10
11
12
13

客户端Demo.vue代码段

<template>
<button @click="myclick">Get请求button>
  <br/>
  <p>{{responseText}}p>
template>

<script>
import axios from "axios";
export default {
  name: "demo",
  data(){
    return{
      responseText:''
    }
  },
  methods:{
    myclick(){
      axios.get('http://localhost:3000/users/test').then((result)=>{
        this.responseText = result.data.msg
        console.log(result.data.msg)
      }).catch((err)=>{
        console.log(err)
      })
    }

  }

}
script>
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

2.3、带参的get请求

服务器端：‘req.query.参数名’ 格式接收

axios.get('/url'，{params: {id: 12}}).then((result)=>{
            }).catch((err)=>{})
//或者：
axios({
      url:'url',
	  methods: 'get',
params: {
	参数名: 参数值
	}
	}).then((result)=>{
		请求成功的处理代码
		}).catch((err)=>{
		失败的处理代码})

1
2
3
4
5
6
7
8
9
10
11
12
13
14

演示：
客户端demo.vue代码段

<template>
<button @click="myclick">Get请求</button>
  <br/>
  <p>{{responseText}}</p>
</template>

<script>
import axios from "axios";
export default {
  name: "demo",
  data(){
    return{
      responseText:''
    }
  },
  methods:{
    myclick(){
      axios.get('http://localhost:3000/users/test',{params:{userName:'张三'}}).then((result)=>{
        this.responseText = result.data.msg
        console.log(result.data.msg)
      }).catch((err)=>{
        console.log(err)
      })
    }

  }

}
</script>
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

服务器端

var express = require('express');
var router = express.Router();

/* 测试路由 http://localhost:3000/users/test*/
router.get('/test',(req, res) => {
let name = req.query.userName
  res.json({
    code:1001,
    msg:name
  })
})
module.exports = router;
1
2
3
4
5
6
7
8
9
10
11
12

2.4、post请求

服务器端：‘req.body.参数名’ 获取数据

    axios.post('url',{参数名:参数值}).then((result)=>{
			  
			  }).catch((err)=>{
			  
			  })
//或者
   axios({
			   url：'url'，
			    methods: 'post'，
			    data: {
				  参数名:参数值
				  }
			  }).then((result)=>{
			  }).catch((err)=>{
			  })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

演示：
客户端Demo.vue代码段

<template>
<button @click="myclick">Get请求button>
      
  <button @click="postclick">Post请求button>
  <br/>
  <p>{{responseText}}p>
  <p>{{postText}}p>
template>

<script>
import axios from 'axios'
export default {
  name: "Test",
  data() {
    return {
      responseText: '',
      postText:'',
    }
  },
  methods: {
    myclick() {
        /axios.get('http://localhost:3000/users/test',{params:{userName:'张三'}}).then((result)=>{
          this.responseText =result.data.msg
           console.log(result.data.msg)
         }).catch((err)=>{
          console.log(err)
         })
    },
    postclick(){
      // axios({
      //   url:'http://localhost:3000/users/post',
      //   methods:'post',
      //   data:{
      //     postId:'s_POST'
      //   }
      // }).then((result)=>{
      //   this.postText = result.data.info
      // }).catch((err)=>{
      //   console.log(err)
      // })
      this.axios.post('http://localhost:3000/users/post',{postId:'S_POST'}).then((result)=>{
        this.postText = result.data.info
      }).catch((err)=>{
        console.log(err)
      })
    }
  },
}
script>

<style scoped>

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
46
47
48
49
50
51
52
53

服务器user.js：

var express = require('express');
var router = express.Router();

/* 测试路由 http://localhost:3000/users/test*/
router.get('/test',(req, res) => {
  let name = req.query.userName
  res.json({
    code:1001,
    msg:name
  })
})

/*http://localhost:3000/users/post*/
router.post('/post',(req, res) => {
  let id=req.body.postId
  res.json({
    code:1001,
    info:id
  })
})

module.exports = router;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

2.5、put请求：用于对数据更新时使用.请求时传参的方式、服务器端获取数据的方式与post请求类似

2.6、delete请求：用于删除数据。可以采用类似get方式或post方式的写法

（1）、类似于get方式：服务器端以’req.query.参数名’的格式获取请求数据

axios.deleter('url'，

     {params:{参数名:参数值}}
	 
	).then((res)=>{
	
	}).catch((err)=>{})
1
2
3
4
5
6
7

（2）、类似于post方式：服务器端以’req.body.参数名’的格式获取请求数据

axios.deleter('url'，
     {data:{参数名:参数值}}
	 
	).then((res)=>{
	
	}).catch((err)=>{})
1
2
3
4
5
6

2.7、axios的数据封装格式

（1）、data：服务器端响应的数据

（2）、status：请求的状态码

（3）、statusText：状态码对应的状态信息

（4）、headers：服务器端响应头信息

（5）、config：请求的配置信息

3、vue-axios模块：是针对Vue对axios进行了一层简单的包装

3.1、安装：

   npm install vue-axios
1

3.2、在main.js文件中进行全局的配置

（1）、导入axios和vue-axios

（2）、注册：

 //定义挂载根组件
const  app = createApp(App)
//在根组件中注册axios
app.use(VueAxios,axios)
//根组件挂载
app.mount('#app')
1
2
3
4
5
6