axios的基本使用

最新推荐文章于 2024-06-13 14:58:45 发布

勤奋猪猪

最新推荐文章于 2024-06-13 14:58:45 发布

阅读量822

点赞数 22

文章标签： html5 前端前端框架

本文链接：https://blog.csdn.net/weixin_45634096/article/details/135379459

版权

Axios笔记

一、Axios引言

Axios 是一个基于的JavaScript的网络请求库，用于从浏览器向服务器发起网络请求。Axios解决的问题：

在这里插入图片描述

目前为止，我们学习了html、css和js以及vue。借助html和css我们可以呈现出一定的页面效果。使用js和vue我们可以将数据回显到页面。但是现在页面的数据都是硬编码的，实际场景下数据一定是来源于服务端的。而Axios就能向服务端发起网络请求，解决页面数据来源的问题。

二、Axios 基本使用

0 环境准备

在tomcat服务器中部署一个 axios-test 项目，项目中放置一个数据文件：users.json。内容如下：

[
    {"id":1,"name": "小明", "age": 13, "gender": "男"},
    {"id":2,"name": "小红", "age": 13, "gender": "女"},
    {"id":3,"name": "小绿", "age": 4, "gender": "男"},
    {"id":4,"name": "小翠", "age": 14, "gender": "女"}
]

并放置一个html文件用来学习axios（因为浏览器的限制，必须同一个项目的页面才可以访问同一个项目的数据资源），整体目录结构如下：

在这里插入图片描述

1 get方式发起请求

直接请求

//发送GET方式请求
axios.get("url")
     .then(function(response){ //处理响应
    	console.log(response.data);
	 }).catch(function(err){//捕获异常
    	console.log(err);
	 });

示例：访问users.json数据文件

<button @click="test">点击</button>

new Vue({
    el:"#app",
    methods:{
        test(){
          axios.get("http://localhost:8080/axios-test/users.json").then(function(response){      //得到成功的响应，状态码200，执行then中的内容
            console.log(response.data);
          }).catch(function(err){
            console.log(err);
          });
        }
    }
});

携带参数请求

//1. 使用params发送请求参数
axios.get("url",{params:{/*请求参数*/}}).then(function(response){ 
    console.log(response.data);
}).catch(function(err){
    console.log(err);
});

注意:get方式发起请求如果携带参数，参数会以k=v形式拼接在url中。
	1.多对数据之间使用&连接
	2.请求参数和请求地址使用?连接

//2. 直接拼接k=v参数到url
axios.get("url?k1=v1&k2=v2").then(function(response){ 
    console.log(response.data);
}).catch(function(err){
    console.log(err);
});

示例：携带name和age参数发起请求

在这里插入图片描述

axios.get("http://localhost:8080/axios-test/users.json",{params:{name:"xiaohei",age:18}})
     .then(function(response){//得到成功的响应，状态码200，执行then中的内容
            console.log(response.data);
     }).catch(function(err){
           console.log(err);
     });


axios.get("http://localhost:8080/axios-test/users.json?name=xiaohei&age=18")
     .then(function(response){      //得到成功的响应，状态码200，执行then中的内容
         console.log(response.data);
     }).catch(function(err){
         console.log(err);
     });

2 post方式发起请求

直接请求

//发送POST方式请求
axios.post("url").then(function(response){//处理响应
    console.log(response.data);    //响应成功后，进入这里
}).catch(function(err){//捕获异常
    console.log(err);  //响应失败后，进入这里
});

示例：访问users.json数据文件

axios.post("http://localhost:8080/axios-test/users.json")
    .then(function(response){//处理响应
          console.log(response.data);    //响应成功后，进入这里
    }).catch(function(err){//捕获异常
        console.log(err);  //响应失败后，进入这里
    });

携带参数请求

<script>
test6(){
    axios.post("http://localhost:8080/axios_test/users.json",'name=cpx&age=20')
    .then(function(response){//处理响应
    console.log(response.data);    //响应成功后，进入这里
    }).catch(function(err){//捕获异常
    console.log(err);  //响应失败后，进入这里
    });
},
test7(){
    //axios.post("http://localhost:8080/axios_test/users.json",{name:'cpx',age:20})
    let u = {name:'cpx',age:20};
    let {name,age} = u;
    let data = `name=${name}&age=${age}`;
    axios.post("http://localhost:8080/axios_test/users.json",data)
    .then(function(response){//处理响应
    console.log(response.data);    //响应成功后，进入这里
    }).catch(function(err){//捕获异常
    console.log(err);  //响应失败后，进入这里
    });
}
</script>


<!-- 
	需要额外引入qs.js，完成json对象转换k=v参数对
-->
<script src="js/qs-6.9.4.js"></script>

<script>
//发送POST方式请求 
axios.post("url",Qs.stringify({/*请求参数*/}).then(function(response){
    console.log(response.data);    //成功响应进入这里
}).catch(function(err){
    console.log(err);  //失败响应进入这里
});
</script>

示例：携带name和age参数发起请求

在这里插入图片描述

axios.post("http://localhost:8080/axios-test/users.json",Qs.stringify({name:"xiaohei",age:18}))
.then(function(response){//处理响应
    console.log(response.data);    //响应成功后，进入这里
}).catch(function(err){//捕获异常
    console.log(err);  //响应失败后，进入这里
});

2.3 get和post的区别

get方式:

get请求不安全（数据会作为url的一部分）
get请求发送数据量有限制（受限于浏览器地址栏允许的字符数量）
get请求只能发送文本数据（字符串）

post方式:

post请求更安全（请求参数在请求体中）
post请求发送的数据量无限制
post请求能发送更多的数据类型（文本数据和二进制文件，比如文件上传一定要使用post）

2.4 a标签和axios异步请求的区别

a标签:

请求携带的请求参数只能拼接在地址后，也就只能携带文本数据
同步的请求：会发生页面跳转，响应回的结果通常会覆盖掉原有页面的内容，一旦原页面被覆盖原页面将无法使用。

axios:

请求携带的请求参数可以拼接在地址后，也可以在请求体中。可以携带各种类型的请求数据。
异步请求：不进行页面跳转，新的结果不会覆盖原页面，当然也就必须手动编码将数据回显到页面。

3 综合案例

使用axios从服务器获取数据，并回显到页面。开发思路：

需要通过axios获取users.json数据
通过v-for指令将数据回显到表格中
axios的执行时机需要在页面加载完毕后立刻执行，也就是在create钩子函数中执行

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="js/vue-2.6.12.js"></script>
    <script src="js/axios-0.21.0.js"></script>
	<script src="js/qs-6.9.4.js"></script>
</head>
<body>
	<div id="app">

		<table border="1">
				<thead>
					<tr>
						<td>
							<input type="button" value="删除选中" @click="removeChecked">
						</td>
						<td>
							姓名
						</td>
						<td>
							年龄
						</td>
						<td>
							性别
						</td>
						<td>操作</td>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(u,index) in users" :key="u.id">
						<td>
							<input type="checkbox" name="id" id="" :value="u.id" v-model="checked">
						</td>
						<td>{{u.name}}</td>
						<td>{{u.age}}</td>
						<td>{{u.gender}}</td>
						<td>
							<a href="" @click.prevent="remove(u.id)">删除</a>
							<a href="">更新</a>
						</td>
					</tr>
					
					<tr>
						<td colspan="5">
							<input type="button" value="全选" @click="selectAll()">
							<input type="button" value="全不选" @click="unselectAll()">
							<input type="button" value="反选" @click="reverseSelect()">
						</td>
					</tr>
				</tbody>
			</table>
			
		</div>

		<script type="text/javascript">
			new Vue({
				el:"#app",
				data:{
					users:[],
				    checked:[1]
				},
				methods:{
					selectAll(){
						this.checked = this.users.map(u=>u.id);
					},
					unselectAll(){
						this.checked = [];
					},
					reverseSelect(){
						this.checked = this.users.map(u=>u.id).filter(id=>this.checked.indexOf(id)<0);
					},
					remove(id){
						// alert(index);
						let index = this.users.map(u=>u.id).indexOf(id);
						if(index < 0){
							return;
						}
						this.users.splice(index,1);
					},
					removeChecked(){
						for(let i = 0; i < this.checked.length;i++){
							this.remove(this.checked[i])
						}
					}
				},
                created:function(){
                    axios.get("http://localhost:8080/axios-test/users.json")
                        .then(resp=>{
                            this.users = resp.data;
                        }).catch(error=>{
                            console.log(error);
                        })
                }
			})
		</script>
</body>
</html>

勤奋猪猪

关注

22
点赞
踩
18

收藏

觉得还不错? 一键收藏
1
评论
axios的基本使用

Axios 是一个基于的JavaScript的网络请求库，用于从浏览器向服务器发起网络请求。Axios解决的问题：目前为止，我们学习了html、css和js以及vue。借助html和css我们可以呈现出一定的页面效果。使用js和vue我们可以将数据回显到页面。但是现在页面的数据都是硬编码的，实际场景下数据一定是来源于服务端的。而Axios就能向服务端发起网络请求，解决页面数据来源的问题。
复制链接

扫一扫