axios的四种请求方式

最新推荐文章于 2024-07-23 16:20:57 发布

鹏鹏哒

最新推荐文章于 2024-07-23 16:20:57 发布

阅读量2k

点赞数

文章标签： html5 html css

本文链接：https://blog.csdn.net/aabcdg12345678/article/details/120380024

版权

一、在html文件和vue脚手架中调用axios时需要进行的准备工作

1.在html文件中首先先导入 vue.js 和axios.min.js,并且调用axios只能在vue对象中调用（生命周期函数中或者普通函数中）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>axios测试</title>
		<script src="axios.min.js"></script>
		<script src="vue.js"></script>
	</head>
	<body>	
	   <div id="app">
		   {{info}}
	   </div>
       <script>
		   new Vue({
			   el:"#app",
			   data(){
				   return {
					   info:""
				   }
			   },
			   mounted:function(){
				   axios.get("http://localhost:8091/test").then(res=>{
					   this.info=res.data;
				   })
			   }
			   
		   })
	   </script>
	</body>
</html>

**vue的生命周期函数（8个）

beforeCreate：在创建vue对象前，页面会自动调用

created：vue对象创建完毕后页面自动调用

beforeMount:数据挂载之前自动调用

mounted:数据挂载完毕后自动调用

beforeUpdate:更新前自动调用这里指的是页面渲染新数据之前

updated:更新完成自动调用

beforeDestroy 销毁前自动调用

destroyed 销毁后自动调用

2.在vue脚手架主目录下载axios（npm install axios --save-dev）,首先在main.js导入axios

import axios from 'axios'

在这个时候，你还是无法在组件中使用axios的，但如果将vue改为vue的原型链，就可以解决这个问题

Vue.prototype.$http = axios

并且在调用时使用的路径前面固定的片段也可以在main.js中写，下次只要写后面自定义调用的路径即可

axios.defaults.baseURL = 'http://localhost:8091/'

二、请求方式（四种）

1.get和delete请求（这两种方式请求方式基本一样，只是名字不同，后端的注解使用不同）

无参数的方式

有参数方式（?msg=2传参),后台接受参数的名称需和?后面的名称一至，否则接受不到

有参方式（restFul方式传参）第二种使用了模板字符串

2.post和put请求(这两种请求基本一样) ,前台传过去的是一个json串，所以后台需要使用注解@RequestBody把json串转化为user对象**

***模板字符串和post请求一起使用需要注意的是下图i(也就是你接受模板字符串中的参数起的名字)不能跟user对象中的属性名一样，否则就会报错

3.axios简化

关键字async写在方法前，await写在请求前，result是一个对象，而我们只需要里面数据一栏，所以可以{data:result},这时result是后端发送过来的单个数据或者对象

鹏鹏哒

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
axios的四种请求方式

一、在html文件和vue脚手架中调用axios时需要进行的准备工作 1.在html文件中首先先导入 vue.js 和axios.min.js,并且调用axios只能在vue对象中调用（生命周期函数中或者普通函数中）<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>axios测试</title> <script src="axio...
复制链接

扫一扫