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

2.2、无参的get请求:

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

服务器端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;

客户端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>

在这里插入图片描述

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)=>{
		失败的处理代码})

演示:
客户端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>

服务器端

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;

在这里插入图片描述

2.4、post请求

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

    axios.post('url',{参数名:参数值}).then((result)=>{
			  
			  }).catch((err)=>{
			  
			  })
//或者
   axios({
			   url:'url'methods: 'post'data: {
				  参数名:参数值
				  }
			  }).then((result)=>{
			  }).catch((err)=>{
			  })

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

<template>
<button @click="myclick">Get请求</button>
  &nbsp;&nbsp;&nbsp;&nbsp;
  <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>

服务器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;

在这里插入图片描述

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

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

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

axios.deleter('url'{params:{参数名:参数值}}
	 
	).then((res)=>{
	
	}).catch((err)=>{})

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

axios.deleter('url'{data:{参数名:参数值}}
	 
	).then((res)=>{
	
	}).catch((err)=>{})

2.7、axios的数据封装格式

(1)、data:服务器端响应的数据

(2)、status:请求的状态码

(3)、statusText:状态码对应的状态信息

(4)、headers:服务器端响应头信息

(5)、config:请求的配置信息

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

3.1、安装:

   npm install vue-axios

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

(1)、导入axios和vue-axios

(2)、注册:

 //定义挂载根组件
const  app = createApp(App)
//在根组件中注册axios
app.use(VueAxios,axios)
//根组件挂载
app.mount('#app')
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值