axios操作 和 async-await

最新推荐文章于 2024-03-27 16:28:11 发布
最新推荐文章于 2024-03-27 16:28:11 发布
阅读量737 收藏
点赞数
分类专栏： axios 文章标签： ajax
原文链接：https://harrylyj.blog.csdn.net/article/details/119210269?spm=1001.2014.3001.5502
版权

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

  1. JS中原生提供了Ajax操作. 弊端: 操作特别的复杂 易用性较差.
  2. jQuery中的Ajax 封装了原生的JS Ajax 提高了开发的效率
  3. Axios是VUE中默认支持的Ajax的请求的方式.

Get-简单参数

/**
			 *  GET请求-简单参数的写法
			 * 需求: 根据ID查询数据
			 * URL: http://localhost:8090/axios/getUserById?id=100
			 * then(): 回调函数通过then返回 结构
			 */
			axios.get("http://localhost:8090/axios/getUserById?id=100")
					 .then(function(result){
						 console.log(result.data)
					 })

Get-resultFul

	/**
			 * restFul风格实现业务传参 
			 * 需求: 根据name/age查询数据
			 * URL: http://localhost:8090/axios/user/tomcat/18
			 * 注意: 模版字符串优化参数  ``
			 */
			let name = "mysql"
			let age = 20
			axios.get(`http://localhost:8090/axios/user/${name}/${age}`)
					 .then(function(result){
						 console.log(result.data)
					 })

在这里插入图片描述
Axios-Get-对象传参

/**
				 * 需求: 实现对象方式的数据传递
				 * url:  http://localhost:8090/axios/user/getUserObj
				 * 语法: axios.get("url","参数").then(回调函数)
				 * 业务需求:  查询name="mysql" age=18   sex="女"的用户
				 */
				
				//封装对象
				let user = {
					name: "mysql",
					age: 18,
					sex: "女"
				}
			
				axios.get(
					"http://localhost:8090/axios/user/getUserObj",{params: user})
					.then(function(result){
						console.log(result.data)
					})
			
			/* 	axios.get("http://localhost:8090/axios/user/getUserObj",
				{
					//key: value  key固定写法 params 参数对象
					params: {
						//再写用户的参数
						name: "mysql",
						age: 18,
						sex: "女"
					}
				}).then(function(result){
					console.log(result.data)
				}) */

在这里插入图片描述
Axios-Delete
请求的参数和语法和get是一样的
1.不带参数的删除
axios.delete(“url地址”).then(function(result){ … })

2.携带个别参数 ?id=100
axios.delete(“url地址?id=100”).then(function(result){ … })

3.restFul结构
可以使用模版字符串的方式简化代码结构
axios.delete( “url地址/xxx/xxx/xxx”).then(function(result){ … })

4.采用对象的方式进行参数传递
let 对象 = {xxxx:xxxx,xxxx:xxxx}
axios.delete( “url地址/xxx/xxx/xxx”, {params: 封装后的对象}).then(function(result){ … })

Axios-post

/* 
						1.什么时候使用post请求????
						  答:一般采用form表单提交时,采用post请求类型
								 主要用于数据的新增操作
								 
						2.get请求/post请求主要的区别
							get: 参数动态的拼接到URL地址中 ?id=xx&name=xxx 数据是可见的
							post: 一般采用post请求数据是涉密的 
					 */
					
					
					/**
					 * post业务:
					 * 		实现用户的新增 传递User对象
					 * 
					 * URL地址:
					 * 		http://localhost:8090/axios/insertUser
					 * 总结: 如果需要对象传参  
					 * 				1.get请求采用 axios.get(url,{params: 对象})
					 * 				2.post请求 axios.post(url,对象)
					 */
					let user = {
						name: "post请求的语法",
						age: 20,
						sex: '女'
					}
					let url1 = "http://localhost:8090/axios/insertUser"
					axios.post(url1, user)
							 .then(function(result){
								 console.log(result.data)
							 })

在这里插入图片描述
Axios-post-restFul

	/**
					 * post请求 restFul的写法
					 * 实现用户新增入库
					 * url: http://localhost:8090/axios/user/name/age/sex
					 */
					let url2 = "http://localhost:8090/axios/user/redis/18/男"
					axios.post(url2)
							 .then(function(result){
								 console.log(result.data)
							 })

在这里插入图片描述
async-await用法
概念解释
1.async/await 是ES7引入的新语法 可以更加方便的进行异步操作
2.async 关键字用在函数上. 返回值是一个promise对象
3.await 关键字用在async 函数中

	//配置基本请求路径
	axios.defaults.baseURL = "http://localhost:8080/"


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>async-await语法</title>
	</head>
	<body>
		<h1>Axios练习</h1>
		<!-- 引入JS文件 -->
		<script src="../js/axios.js"></script>
		<script>
					
					/**
					 * axios的get请求语法
					 * 知识点:
					 * 		1.箭头函数 主要简化回调函数的写法
					 * 		思路: 重复的 固定的可以简化
					 * 		规则: 如果参数只有一个则括号可以省略
					 *  	
					 * 		2.async-await简化  解构赋值
					 * 		2.1 async 需要标识函数
					 * 		2.2 await 需要标识ajax请求
					 *    上述的操作可以将多行js 封装为一行执行 简化代码操作
					 */
					
					//1.定义一个方法
					async function getUserById(){
							let url = "http://localhost:8090/axios/getUserById?id=100"
							//2.发起ajax请求  获取promise对象
							//let promise = await axios.get(url)
							//console.log(promise)
							//console.log(promise.data)
							
							//解构赋值 提取对象中有价值的数据
							let {data: resultData,status: code} = await axios.get(url)
							console.log(resultData)
							console.log(code)
					}
					
					//2.调用方法
					getUserById()
					
					
							 
					
		</script>
	</body>
</html>



<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>VUE-Axios练习</title>
	</head>
	<body>
		<!-- 定义VUE根标签 -->
		<div id="app">
				<div align="center">
						<h1 align="center">用户新增</h1>
						名称: <input type="text" v-model.trim="addUser.name"/>
						年龄: <input type="text" v-model.number="addUser.age"/>
						性别: <input type="text" v-model.trim="addUser.sex"/>
						<button @click="addUserMe">新增</button>
				</div>
				<hr />
				<table id="tab1" border="1px" align="center" width="80%">
					<tr>
						<td colspan="5" align="center"><h1>用户列表</h1></td>
					</tr>
					<tr align="center">
						<td>编号</td>
						<td>姓名</td>
						<td>年龄</td>
						<td>性别</td>
						<td>操作</td>
					</tr>
					<!-- 指令: 可以循环数据+标签  v-for -->
					<tr align="center" v-for="user in userList">
						<td v-text="user.id"></td>
						<td v-text="user.name"></td>
						<td v-text="user.age"></td>
						<td v-text="user.sex"></td>
						<td>
							<button>修改</button>
							<button>删除</button>
						</td>
					</tr>
				</table>
		</div>
			
		<!-- 1.引入VUE.js -->
		<script src="../js/vue.js"></script>
		<!-- 2.引入Axios.js -->
		<script src="../js/axios.js"></script>
		
		<!-- 
				需求分析1:
					1.当用户打开页面时就应该发起Ajax请求获取userList数据.
					2.将userList数据 在页面中展现  
							2.1页面中的数据必须在data中定义
							2.2 ajax请求的结果赋值给data属性
					3.利用v-for指令实现数据遍历
					
				需求分析2:  用户数据入库操作
					1.在页面中准备用户新增文本框/按钮
					2.准备双向数据绑定的规则
					3.为按钮添加事件,实现数据新增入库.
							
		 -->
		<script>
				//设定axios请求前缀
				axios.defaults.baseURL = "http://localhost:8090"
				const app = new Vue({
					el: "#app",
					data: {
						//1.定义集合数据 null
						userList: [],
						//2.定义addUser对象  新增的用户数据
						addUser: {
							name: '',
							age: 0,
							sex: ''
						}
					},
					methods: {
						//1.定义getuserList方法 获取后台服务器数据
						async getUserList(){
							let{data: result} = await axios.get("/vue/getUserList")
							//ajax调用之后,将数据给属性.
							this.userList = result
						},
						//新增操作 请求类型: post  接收时需要使用json方式处理
						async addUserMe(){
								//不需要返回值
								await axios.post("/vue/insertUser",this.addUser)
								//将列表页面重新刷新
								this.getUserList()
						}
					},
					//调用生命周期函数
					mounted(){
						//console.log("vue对象实例化成功!!!!")
						//初始化时调用getUserList()
						this.getUserList()
					}
				})
		</script>
	</body>
</html>
josion.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用async await 封装 axios的方法
08-27
主要介绍了使用async await 封装 axios的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
axios和async / await的基本用法
前端、python爱好者
07-20 1万+
主要使用本地自建的cookie工具或者vue提供的vue-cookie以及element-ui框架和nprogress进度条模块，大家可以对照自己代码直接复制使用。为了我们的代码健壮性，因此本质上只要有.then()就得跟一个.catch()，至于finally()则看情况添加。这个时候我们可以直接使用 新增的语法糖 async 和await ，使用起来更加的舒服方便，代码看起来也更简洁。当然实际的开发项目中，如果我们使用了统一的请求模块，用 .then()取到正确的数据，.catch()捕获错误，
利用await解决axios请求问题
qq_46300009的博客
03-26 223
但这样就会遇到问题，我们发现虽然写了两个指令，网络请求能够收到id值，但是第二个请求接受不到id值。这是因为两个请求同时执行，前面的请求还没有执行完毕，第二个请求就来了，显然是不能收到第一个请求获取的id值。将被执行的函数名前加上async，再将axios前面加上await，就能实现解决请求问题。可以看到，第二个请求在第一个请求后，才开始进行的，这样就解决了刚才我们提到的问题。例如，我首先需要发送请求获取id值，再通过id值执行其他操作。我们需要第一个请求执行完毕后，获取到id值后再执行第二个请求。
VUE：使用async和await实现axios同步请求
前端之行，任重道远！
11-11 5302
vue使用async和await实现axios同步请求一、axios异步请求出现的问题二、解决办法：使用async 和awaitasync 和await 介绍注意事项三、突发问题四、解决办法 一、axios异步请求出现的问题 handleClick(tab, e) { this.$axios({ url: '/operatingsystem/student/selectStudentsByClno', method: 'get', params:
axios 进行同步请求(async+await)
最新发布
w710537643的博客
03-27 421
【代码】axios 进行同步请求(async+await)
Axios和(async,await)
热门推荐
清风的博客
02-26 3万+
Axios和(async,await) 1.基于promise用于浏览器和node.js的http客户端 2.支持浏览器和node.js; 3.支持promise; 4.能拦截请求和响应请求; 5.自动转换JSON数据; 6.能转换请求和响应数据; 1.axios基本用法 1.get和delete请求传递参数 ​ 1.通过传统的url以?的形式传递参数; ​ 2.restful形式传参; ​ ...
vue 使用 async 和 await 实现异步 axios 同步化（实战案例：数据异步校验通过后，再执行保存）
朝阳39的博客
05-27 3026
必备知识点 axios请求会生成一个Promise实例对象 await后面可以直接跟一个Promise实例对象，返回值不是Promise对象，而是Promise对象处理之后的结果（await后面跟一个axios请求时，返回值即请求的响应结果 res） 若await后的表达式的值不是一个Promise，则该值将被转换为一个已正常处理的Promise await只能在使用async定义的函数中使用 async函数都会隐式返回一个promise，要获取Promise的返回值应该用then方法.....
Vue笔记
qq_52289068的博客
09-11 219
事渐进式的JavaScript框架，有易学易用，性能出色的特点，适用场景丰富的 Web 前端框架。
浅谈Axios和(async/await)
Growing up Or Growing old
04-13 1012
await 也是一个修饰符，只能放在async定义的函数内。await 关键字仅在 async function 中有效。如果在 async function 函数体外使用 await ，你只会得到一个语法错误。Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。通过 params 设置参数，实际开发中常用。通过 data 设置参数，data可以省略。async/await 是ES7提出的基于。的解决异步的最终方案。
【Axios】async / await 与解构赋值
weixin_45968070的博客
05-09 279
asyncawait是ES8ECMAScript2017）引入的新语法，用来简化 Promise 异步操作。在asyncawait出现之前，开发者只能通过链式 .then() 的方式处理 Promise 异步操作。
async-handler-middleware
05-15
从'async-handler-middleware'导入asyncHandler export const fetchProducts =（）=> asyncHandler（async（dispatch）=> {const response = await axios.get（'/ api / products'）dispatch（getProducts...
React/Redux应用使用Async/Await的方法
11-28
Async/Await是尚未正式公布的ES7标准新特性。简而言之，就是让你以同步方法的思维编写异步代码。对于前端，异步任务代码的编写经历了 callback 到现在流行的 Promise ，最终会进化为 Async/Await 。虽然这个特性尚未...
use-async-effect:具有取消和 CPromise 其他功能的异步效果挂钩
07-24
useAsyncEffect2 :snowflake: ...您必须使用生成器语法而不是 ECMA 异步函数，基本上是通过将await替换为yield和async()=>{}或将async function()替换为function* ： // plain React useEffect hook useEf
AJAX、axios、async、跨域相关笔记
DespairA的博客
03-04 1448
一、前置知识 1.浏览器的调试面板中额network（网络）选项 记录发送的请求 2.headers 单击其中任意一个请求 右侧header中的response header是响应头，request header是请求头，记录请求的信息 3.querty string parameters对URL中的参数进行解析和格式化 4.其他的选项 preview 响应预览 response响应 initiator 请求链 timing 请求时长 cookie 浏览后...
axios的同步请求及Promise与Async/Await
qq_43345846的博客
05-25 9816
1.axios的同步请求 注：我的代码是在vue 中的。 步骤一 先写一个用axios请求的方法在methods中，并将其用return返回。 我这里请求的是本地静态文件，网络请求亦同理。 Test() { return this.axios({ url: '/test.json', method: 'get' }).then((res) => { console.log('这是Test方法') }) }
Axios、Promise、async、await、nextTick
长不大的大灰狼
01-09 1374
Axios、Promise、async、await、nextTick一、Axios1、基本使用2、axios API3、请求方法的别名4、并发5、创建实例6、实例方法7、在Vue项目中进行全局配置二、ES6 Promise 对象三、async和await四、nextTick 一、Axios Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 1、基本使用 GET请求： // 为给定 ID 的 user 创建请求 axios.get('/user?ID=12345
Vue 前后端交互 （axios async/await ）
QuantumYou的博客
02-07 1723
axios 介绍 Github跳转地址 基于promise用于浏览器和node.js的http客户端 支持浏览器和node.js 支持promise 能拦截请求和响应 自动转换JSON数据 能转换请求和响应数据 注意：拿到 ret 是一个对象 所有的对象都存在 ret 的data 属性里面 axios.get('http://localhost:3000/adata').then(function(ret){ // 注意data属性是固定的用法，用于获取后台的实际数据
axios中的async和await是什么意思？
03-10
在axios中，async和await通常用于处理异步请求，可以让代码更加简洁易读。当我们使用async关键字定义一个异步函数时，函数内部的代码会自动转换成Promise对象，而使用await关键字可以等待Promise对象的状态变为...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值